How to Show Mobile Users You Care with a Single HTML Tag

The email input type. Learn it. Love it.

Mobile is the future of the web and if you don’t believe it, you have your head in the sand. Arguably, mobile is the present of the web. According to research by Phil Webb, 20% of all web traffic in North America comes from smartphones and tablets (40% in China). If your website isn’t mobile compatible, you have a huge problem.

Think your all-Flash homepage isn’t a big deal? Well, you just threw away 20% of your site’s traffic.

But this post isn’t about overhauling your website to make it an awesome mobile web experience. This post is about demonstrating how one simple adjustment can show mobile users that (even if your site isn’t amazing on mobile) you still care about them.

Introducing the HTML5 email input type.

This is actually a late introduction since HTML5 and features like the email input type have been available since 2008. If you’re a web developer, you may already be familiar with it. If you’re not, this is new to you.

The email input type is exactly what it sounds like; it is designed to be “used for input fields that should contain an email address”. How does this affect things? Well, the distinction is largely semantic and doesn’t necessarily have a lot of actual impact. However, the power comes from this one simple fact:

The Safari browser on iPhones and iPads changes the on screen keyboard to add @ and .com options!

Let me say that again and rephrase a bit. When someone on iPhone (74% of smartphone traffic) or iPad wants/needs to enter their email on your site, their onscreen keyboard will actually change to make it easier for them to do what they need to do. Isn’t that the basis of good UX? Make it easy for users to do what they need and want to do? The answer is yes.

Now, HTML5 is designed to support smart degradation. For browsers that don’t support HTML5 (I’m looking at you, IE), the email input is simply treated like a text input, which is probably what you already use on your email inputs anyway.

So how does this show mobile users you care? Have you ever tried to log in to a website on your smart phone or tablet? In many cases, you simply don’t do it because it’s a huge pain. However, when you do, the number of steps you need to take and virtual buttons you need to tap can add up quickly.

Adding the email input attribute saves a mobile user four taps (for a .com email address). Check this out.

Amazing! That’s 63% less steps for your mobile users. Of course, the majority your mobile users will never notice that you greatly simplified their login or signup process, but in their heart, they’ll know.

Here’s all the change you need to make:

So, in conclusion:

1. Realize HTML5′s email input type is awesome.
2. Implement it now.
3. Don’t argue with me.
4. Make your users happy.

Like this post? Follow Mike Arnesen on Google+

Tags: mobile ux

You can leave a response, or trackback from your own site.