Guidelines for Building Touch-friendly Sites

IEBlog

Windows Internet Explorer Engineering Team Blog

Guidelines for Building Touch-friendly Sites

  • Comments 27

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.

    ValueDescription
    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

    • Loading...