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.

Show mobile users you care

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.

Here’s a what a iPhone user has to tap out without the email input type in play.

  1. email username
  2. .?123 button (switch keyboards)
  3. @
  4. ABC button (switch back)
  5. email domain
  6. .?123 button (switch keyboards)
  7. .
  8. ABC button (switch back)
  9. c
  10. o
  11. m

Now here’s what they have to tap with the email input type:

  1. email username
  2. @
  3. email domain
  4. Tap and hold . to select .com

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:

Updating your email input type for mobile

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+

▼ If you found this post useful or interesting, please recommend it for me below. ▼
Mike Arnesen

Mike Arnesen - Director of Analytics & Optimization

A diehard SEO and web analytics geek, Mike is the Director of Analytics & Optimization at SwellPath. He is also a board member at SEMpdx. Mike's fascination for search experience optimization, structured data and semantic markup, and web technology knows no bounds. Beyond geeking out with SEO and analytics, Mike is also a prolific blogger, speaker (MozCon, SemTechBiz, SEMpdx, SMX, State of Search Conference, etc.), and company culture advocate. When not in the office, Mike is spending time with his wife, enjoying the outdoors, or keeping up with inbound marketing news via mobile; most of the time, it's all three simultaneously.

Watch Mike talk about his role and life at SwellPath

44 Responses to “How to Show Mobile Users You Care with a Single HTML Tag”

  1. Iain

    Good post, we’ve used this technique lately to a good response. There is a similar function for displaying a numerical keypad for the input of phone numbers, etc.

  2. Monthly Digest: Geeked for MozCon & New Blog Posts | Mike Arnesen

    […] that you care, simply by changing one HTML input attribute value. It’s actually titled “How to Show Mobile Users You Care with a Single HTML Tag” and I thought it was hilarious when I posted it to r/webdev and people started getting […]


Leave a Reply

Loading Facebook Comments ...

Get Our Newsletter

To keep up with the latest news from SwellPath on digital advertising, analytics, and SEO, sign up for our newsletter.