Improving Mobile User Experience with HTML5

Nowadays, people are constantly browsing the web via their mobile devices, there are 5.3 billion mobile subscribers in the world and the percentage of smart phones is growing exponentially. There are a few easy techniques using HTML5 that you can apply to your mobile apps and web pages that will improve user experience significantly.

Inputs

You've probably filled out a registration form from your phone, and it's not the nicest thing, screen needs resizing between reading labels and entering text and you also need to switch back and forward from the text keyboard, to the numeric and symbols keyboard.

Luckily HTML5 has several enhancements for input fields. And even if many browsers don't have full support for all these features, you can still add a lot of them without problems. Only browsers that support them will notice the difference, and older browsers will behave like they always do (HORRIBLE!).

HTML5 Input Techniques

Here's a list of all the input types available, you will notice that there are a lot more than most people are aware of:

• button
• checkbox
• color
• date
• datetime
• datetime-local
• email
• file
• hidden
• image
• month
• number
• password
• radio
• range
• reset
• search
• submit
• tel
• text
• time
• url
• week

Though it’s nice to know there are so many options, keep in mind that not every one of them is going to work for your site. The most common and also the most supported new HTML5 elements are: email, number, tel, and URL. I'm sure you're already thinking on great uses for those!

Another great thing is that browser validation is already provided on some browsers, and my personal opinion is that all browsers will have that sooner or later, so we can see a future without JavaScript validations.

But let's get back to mobile devices and see the advantage of using the proper type of HTML5 input.

If your register form asks for an age or phone number, you’ll want to make sure that the user only enters numbers. To do this, use the input type = “number”. When you do this, the keyboard will automatically change to a numeric keyboard, and look something like this:

Pretty cool from a user's point of view, right? Now let's go through some pretty useful attributes that you can add to your input tags.

Input Attributes

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height
• list
• max
• min
• multiple
• pattern
• placeholder
• required
• step
• width

These are all the "new" attributes according to http://www.w3schools.com. My favorite one is definitely the "placeholder" attribute. It puts a descriptive text on your input that clears on focus and shows on blur if you haven't typed anything. Classical behavior for which you needed to use JavaScript.

Other great attribute for mobile devices is the "autocapitalize". You can set it to "on" or "off" and it works perfectly for fields that should not contain capital letters, like URLs or for fields that should always begin with a capital letter, like names.

As you know, smart phones have dictionaries that correct spelling. The "autocorrect" attribute allows you to turn "on" or "off" this feature, to avoid annoying messages and underlines when you don't want them.

Anchors

Lastly, a great thing to have on all your "contact us" sections: Specialized Anchors.

Most developers know how to use “mailto:your@email.com”. You place that code inside your href attribute on any anchor tag and when a user clicks it, it opens your default email client and sends an email to the specified recipient.

Wouldn’t it be great if there was something like that for your mobile site that could place a call or send an SMS? There is and it's as simple as the mailto option! Just place it on your anchor tab.

Here's an example of each one:

	
		<a href="tel:1-555-123-1234">CALL PHONE</a>
		
		<a href="sms:1-555-666-7788">SEND SMS</a>
	

Hope you enjoyed!!