Guidelines for Building Touch-friendly Sites

In Windows 8 Consumer Preview, IE10 enables fast and fluid multi-touch experiences on the Web. Most sites work fine with touch in IE10 with no changes to the site. This post provides four simple guidelines to ensure your customers who use touch can most effectively use your site.

We’ve written before about how new input devices and touch screens make the Web more fun, interactive, and immersive. We’ve also talked about the importance of ensuring a no compromise browsing experience in IE10 so the real Web works great with touch.

Of the four guidelines below, the first two make sure touch users can access all of your site’s functionality. The last two provide tips to make your site easier to use with touch.

DO NOT Hide Content Behind Hover

A mouse can hover content (point at it) without activating it (clicking it). However, with touch a tap is both hover and activation in one action. So functionality that requires hover without activating will not work for touch users. Instead, consider making all behaviors click (tap) based.

    DO Configure the Browser for the Default Touch Behaviors That Work Well For Your Site

    Users expect to be able to pan and zoom sites using touch. Therefore, the browser consumes touch moves, pinches, and double-taps by default and does not send events for these interactions. If your site needs to provide special functionality for these interactions instead, you must configure IE10 to provide only the default behavior you want, if any.

    When a user touches an element, the -ms-touch-action CSS property determines the default behavior that IE10 provides.

    -ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit;

    The table below describes the five possible values.

    Value Description
    auto The browser determines the behavior for the element.  This is the default value for -ms-touch-action.
    none No default behavior is allowed.
    manipulation Only panning, pinch zoom, and swiping to navigate forward or back are allowed.
    double-tap-zoom Only double-tap zooming is allowed.
    inherit The element inherits the value of -ms-touch-action from its parent.

    For example, a canvas painting application might use:

    canvas {

    -ms-touch-action: double-tap-zoom;


    With this configuration, the user can double-tap to zoom in to the canvas element, but sliding a finger on the canvas element will send events to it rather than pan the page.

    DO Identify Input Types Using HTML5 Forms

    IE10 introduces support for HTML5 input controls, all of which are touch optimized. For text inputs, you can further improve your users’ touch experiences by identifying the specific input type, when applicable. Internet Explorer will show a tailored touch keyboard layout for that input type on Windows 8:

    <input type=”email”>

    The touch keyboard shows @ and “.com” buttons for email addresses.
    The touch keyboard shows @ and “.com” buttons for email addresses.

    <input type=”tel”>

    The touch keyboard shows a number pad for telephone numbers.
    The touch keyboard shows a number pad for telephone numbers.

    <input type=”url”>

    The touch keyboard shows forward slash and “.com” for URLs.
    The touch keyboard shows forward slash and “.com” for URLs.

    Diagram showing relative finger widths and an average finger width of 11 mmDO Provide Ample Room for Users’ Fingers

    To build Windows 8’s touch-first experience, we’ve done a ton of research to formulate some helpful guidelines for developers. The average width of a finger is 11mm. As targets for tapping get larger, the percentage of accidental missed taps drops off quickly.

    Ideally, a target is at least 11mm (about 40px) square with at least 2mm (about 10px) of padding around it.

    40px or more target size
    10px or more between targets

    If you want to adjust the spacing only for users with touch hardware, use feature detection.

    To detect that user has touch hardware:

    if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) {

    // Supports multi-touch


    Going Beyond These Basics

    You can do much more to create a great touch-first experience. For example, you may choose to optimize for touch by supporting custom multi-touch interactions or gestures. Here are a few links to get you started:

    We plan to write more about these methods in future blog posts. Applying these guidelines today will ensure your sites work well with touch in IE10.

    — Jacob Rossi, Program Manager, Internet Explorer

    Comments (28)

    1. Rob Colburn says:

      In your section describing "-ms-touch-action", you switch between talking about a "canvas painting application" and a "game piece".  It seems a few paragraphs are missing there.

    2. interoperability says:

      What about feature detection and other browsers touch / pointer events ?

      and what about ms submit their touch model to w3c ?

    3. color me almost impressed says:

      wow after only what 5 or 6 years… IE finally support input types for number, date, datetime, url, email, range, etc.

      Way to stay ahead of the curve for innovation and all… add this to your fixes for 16year old bugs with innerHTML and IE10 will finally be an acceptable browser! congratulations!

      too bad all this stuff only really helps on tablets… but you're forcing all the "Meh"-tro interface on desktop users that could care less about all this mess… Google " my dad windows 8 " for just some of the video trials of users trying to make heads of tails of the El Camino[TM] OS that is Windows 8.

      I can't believe I almost miss good ole Windows XP… before all the mess was created with the rearrange and hide everything in obscure places on the  "Ribbon", view chaos with broken "Vista", and watch Windows self destruct when it tries desperately to claim a piece of the tablet market that it handed to Apple on a silver platter when it failed to do tablets properly itself years ago… just like it failed at making an mp3 player… just like it failed at making a phone that anyone in western civilization is interested in owning…

      Man… Microsoft used to be the top dog in software… what on earth happened?… you couldn't even bribe me now to invest in this company.

    4. JamesNT says:

      It appears I'm screwed on two things:

      1.  My site uses Silverlight for special effects.

      2.  The latest version of Microsoft Expression is all about Silverlight, not HTML5.


    5. karen says:

      Please talk about drop down menus .?!

      it's very hard in touch screen.! 🙁

    6. Well I really wish to see the Simplified Chinese edition of this!

    7. Don't you consider submitting a proposal to W3C for Pointer Events? The way they work is much more useful than Touch Events.

    8. ieblog says:

      @Rob Colburn: I've updated the noun mismatch in the post.

    9. Kai Sellgren says:

      "So functionality that requires hover without activating will not work for touch users."

      This is not entirely true. Sony Xperia devices support hover for their touch screens, basically if you hover with your finger over the phone it fires the hover events.

    10. Xero says:

      @color me almost impressed,

      if you are referring to SeclectElement.innerHTML issue, it was fixed in earlier IE10 platform preview. 🙂

      Tons of improvements in IE10 is a good sign. If they keep up this enthusiasm and keep fixing the DOM/JS/CSS&UI issues frequently, IE10 certainly is a way to go!

    11. Hank says:

      @Xero yes the SelectElement.innerHTML issue was fixed in IE10 platform preview – since IE10 isn't a production browser yet, the clock is still ticking on this bug (as well as the table bugs)

      Its just really sad that its taken over 15 years for Microsoft to fix this bug.  I wonder if they've decided that Waterfall Development practices suck yet?

    12. @J.Major I also wish so.

    13. Still no date inputs‽ says:

      ⚠ You hint at HTML5 input support, but omit the fact that this support, at least based on testing with the current IE10 public beta that requires installing the Win8 preview, ⌚ still cannot support output, meter, keygen, datetime, date, month, week, time, datetime-local, and color inputs. ☹

    14. 8675309 says:

      lately i havent been able to loginto any site because i cant access the symbols portion of the virtual keyboard

    15. Xero says:

      @Hank, first of in MS they don't follow waterfall development; they use XP and its patterns for a long time. Secondly, the Trident engine used to have a different DOM rendering approach, that is, it consider that elements are non-content aware and discrete (which means an element in principle is unaware of its parent). As SelectElement used to be a unique case and now with HTML5 support, there are number of new dependent elements introduced having the similar association, they have redesigned their DOM renderer.

      I agree it shouldn't be the case, but still it's never too late! Also, there are workarounds to take care of it in the legacy versions. Its not a no-go! For a developer its a matter of one extra div-tag raped around the SelectElement!!

      And hey since we are talking about IE10 and new features, there is no point to troll about the oldVersions. You would probably say, you are not trolling here. If that is true, rather than complaining about the resolved issue, you must have considered looking into tons of new features and standards implemented in it which others are still yet to comply with and vice versa !

    16. Sean says:

      So did anyone else notice that the keyboard for URL is horrible?!

      Where's the colon key? ":" and the numbers?

      How would I type this?

      Sample: http://someserver:8080/access.jsp?id=135

    17. pmbAustin says:

      "Ideally, a target is at least 11mm (about 40px) square with at least 2mm (about 10px) of padding around it."

      Given the differing DPIs of modern displays (and the increasing pixel density), surely there's a better way to detect and auto-size touchable elements to the effective size than specifying pixels…  shouldn't you be giving best practices to deal with displays that are both low and high pixel density with the same code?  Hard-coding 40px squares in graphic images doesn't sound like the best way to go…

    18. Tom says:

      Wide spacing of touch icons is important for older persons due to less able fine motor control.

    19. commongenius says:

      "However, with touch a tap is both hover and activation in one action. So functionality that requires hover without activating will not work for touch users."

      Are you really that ignorant of the most popular mobile platform on the market? I can't say for certain about other platforms, but in the Safari mobile browser, elements that have both hover and activate will perform the hover on the first touch and the activate on the second touch.

      Patently false statements like this don't do anything for my confidence that Microsoft has any idea what it's doing when it comes to mobile browsing.

    20. Randall says:

      I really want to see some vendors catch up to some of the -ms-prefixed CSS introduced in IE10, like zooming and panning.

      While I'm asking for a pony, I hope someone makes a frontend framework that helps one apply the Metro theme/conventions (tiles, transitions, etc.) to a Web site–shiny, practical, and easy for Joe Developer to get wrong in a homebrew implementation.

    21. Brian LePore says:

      Why is there a smiley face in those keyboard options? Why would you need one in any of them?

    22. Vincent says:

      @Brian LePore – totally agree! especially during "Telephone" or "Numeric" input… yeah, call me at: 555-12 cross-eyed face 4

      @Randall – We can only presume you are a troll – no one would want to copy dull flat colored squares with white icon silhouettes onto any UI let alone a Web based UI – and more importantly we wouldn't need a frontend framework for this… basic Mickey Mouse UI squares can be created with a div and simple CSS… just like you could have done 10 years ago long before websites and UI's had really crisp clean fluid lovable graphics, gradients, rounded corners, soft shadows, reflections, lighting effects, embossing, skewing, rotating etc.

      As for me I'd like to hear some official word from Microsoft on the desktop version of Windows 8.  We already know that the Windows Server version will ship by default going straight into the desktop (none of this Metro Mess) but it isn't clear if this will be the default option for ALL desktop Windows 8 installs (or if it will be something we can set easily).

      Also will we be able to turn the stupid ribbon off on all windows/dialogs **ESPECIALLY** the core ones like File Open/Save dialogs.

      Looking forward to Windows 9! similar to Windows 7 (the best service pack ever released for Windows Vista) we fully expect that Windows 9 will be the "Tail between the legs" release of Windows when all the sillyness of Windows 8 is replaced with realistic and usable UI elements that were designed for the desktop… not a tablet that the market doesn't want.

      Oh and for yet another repeated time…


      seriously MSFT read this!!!


    23. None So Deaf says:

      Vincent, for an official statement, try reading the many Building Windows blog posts that explain that the Metro-style Start screen is the new Start screen and that the desktop is only an 'app' that loads when you select it (as well as how the ribbon is in applications like Explorer and Paint where you can minimise it permanently, but not in any dialogs – which you would see yourself if you'd ever actually run Windows 8). Or look at the many tutorials on how to make the desktop open when you boot Windows by setting a startup task for it. Or, you know, just continue trolling with your fingers in your ears 😉

      But yeah, the comment posting does seem to be broken again ;-(

    24. Mr. Smith says:

      @Vincent , this blog system is a product of Telligent corp. The comment system is not broken. The page session expires after 900seconds. If it took youlonger than 900seconds to read the blog and you are not sing-in using Live ID, the page session will expired. This is to avoid spamming. If you sign-in using Live ID, you wont face the session timeout! Otherwise just refresh the page to aquire new session before posting the comment if you hav been on the page for more than 15 minutes without activity.

    25. Rob says:

      IE10 won't be out for quite a while. And a lot of this information was available years ago on the Apple developer documentation years ago and the Android documentation. So I guess this is all new to Windows developers but the rest of us have been messing with this stuff for quite a while.

    26. Len says:

      @mr. Smith INCORRECT! There may be a timeout issue that causes additional frustration but that isn't the root cause.

      If there is a timeout it should be started when the comment textarea first gets focus not on page load which occurs before the user even starts reading the article.

      Worse yet a 15 min delay would do nothing to STOL spammers and only penalize users who read the article and comments before posting e.g. The comments that actually matter!!!!

      The bigger issue is that the session is tied to the last page loaded!!! Which means that standard web surfing is broken!!!

      Users hit the homepage and middle click links to articles they want to read so they load in new tabs.. Then they go to the first article and read it.  The problem is that this ancient blog software was written before IE supported tabbed browsing and assumed that each page would hold its own session.  There in lies the fault.  It was a lousy assumption when developers depended on this and it bit them hard when tabbed browsing became standard.

      No one has the interest or time to log into a live account that also has well reported issues with sharing info with advertisers via tracking cookies etc etc.

      Ideally Microsoft would have taken the opportunity years ago to shop for a high quality blogging software system to replace this dinasour but even if they had they wouldn't likely have found one to their liking because no one writes blog software in .net anymore and MSFT has a mission statement that forces them to use software that showcases their platform.  The scary thing is that this software only goes to show the public how lousy it is and that it must be very difficult to fix since it hasn't been fixed since this blog was created.

      I think it's about high time that Microsoft owned up to the problem and at least announce they want to fix the problem and are looking for alternatives or help from the community to fix the software!

      Please tell me that the software is open source or there is a vendor that will listen to bug reports!!!

      And yes I now have to copy and paste this comment because I know full well 100% that it will fail to post!  Kind of pathetic for a site like the IE blog.

    27. Thomas Gullen says:

      No touch events on IE9 mobile…

    28. Thomas Cooper says:

      Platform for private web hosting.   Simple information. Please.