Plank Blog

This year, smartphones are going to outsell feature phones. More people are going to be surfing the web while standing on a bus or walking down the street, and they’ll usually be tapping away on a virtual keyboard that’s taken over the bottom half of their small screen.

While touch interfaces have offered us amazing new ways to interact with content, one of the common (and valid) criticisms of them is that using the screen keyboard is a poorer experience than a conventional keyboard that gives you that helpful tactile feedback.

The physicality of the keyboard aside, the main problem is of course screen real estate: you just can’t fit all the keys of a full keyboard onscreen at once, at least not if you want to see what you’re writing. But with HTML5, the nice people at the W3C introduced several new input types to use in forms. By using these types, the user’s screen keyboard gets modified to provide the most relevant keys for the type of data they’re being asked to enter.

You can review all the new types and their respective browser support here, but one the most commonly used fields we encounter is one requiring us to provide an email address, and conveniently enough, there’s an ‘email’ type. The beauty is that older browsers that don’t recognize the ‘email’ type will simply interpret it as a ‘text’ type. The change required is literally this easy:

The Old World:

<input type="text" />

The New World:

<input type="email" />

Surprisingly, some of the big players in our online world have not adopted this new type to their forms. The mighty Apple, who publicly praises HTML5/CSS3 as our collective technological savior, has yet to update the email fields on their contact forms (on the few I checked). Amazon, on the other hand, has made the update. You can see in the screenshots below how this simple change means the user doesn’t need to toggle their keyboard view to access the ‘@’ or ‘.’ characters.

You can take things a step further and modify the input as follows:

<input type="email" autocorrect="off" autocapitalize="off" />

These are proprietary attributes that work in Safari on Apple’s devices. As you’d expect, they’ll disable auto-correction and prevent the field from being auto-capitalized. They won’t cause any real world problems for other browsers, but because they’re not official standards, they will cause any web page that uses them to fail official validation. I don’t mind the trade off, as these extra touches help streamline the process for people, since email addresses are rarely capitalized, and certainly don’t need spell-checking.

For new forms, make use of the new HTML5 input types by default, and if you’re doing some maintenance on an old site, take a few seconds to update those old form fields. When it comes to mobile, these little things can make a big difference in our daily small screen surfing.