Make your site touch-ready

Internet Explorer 10 on Windows 8 enables fast and fluid multi-touch experiences on the web. Internet Explorer 10 provides common default handling for basic touch interactions, such as panning for scrollable regions, double-tap and pinch zooming, touch selection, and press-and-hold context menus. This guide provides touch-friendly design guidance and troubleshooting suggestions to ensure your customers who use touch can most effectively use your site.

Design guidelines for touch-friendly sites

Don't hide content behind hover

With touch-based browsing, there is no equivalent to hovering the cursor over a webpage element. Therefore, any actions or content that are activated by hovering are potentially inaccessible to touch-based users. A common scenario with this problem is hover-activated submenus. To avoid this problem, don't use hover to hide content that a user can interact with. Instead, consider using the onclick event to toggle the visibility:

<style type="text/css">
    #subMenu {
        display: none;
    }
    #subMenu.showSubMenu {
        display: block;
    }
</style>
...
<script>
    function toggleMenu() {
        var subMenu = document.getElementById("subMenu");
        subMenu.classList.toggle("showSubMenu");
    }
</script>
...
<div id="menu" onclick="toggleMenu()">
    <a>JavaScript Hover Menu</a>
    <div id="subMenu">
        <div class="subMenuItem"> 
            <a>Sub menu item 1</a>
        </div>
        <div class="subMenuItem">
            <a>Sub menu item 2</a>
        </div>
    </div>
</div>

Alternatively, Internet Explorer 10 adds new behavior to the existing aria-haspopup property to simulate hover on page elements with hidden interactive content:

<style type="text/css">
    #menu .cssSubMenu {
        display: none;
    }
    #menu:hover .cssSubMenu {
        display: block;
    }
</style>
...
<div id="menu">
    <a aria-haspopup="true">CSS Hover Menu</a>
    <div class="cssSubMenu">
        <a>Sub menu item 1</a>
    </div>
    <div class="cssSubMenu">
        <a>Sub menu item 2</a>
    </div>
    <div class="cssSubMenu">
        <a class="cssSubLink">Sub menu item 3</a>
    </div>
</div>

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 doesn't send events for these interactions. If your site needs to provide special functionality for these interactions and you need to listen for the constituent pointer events, you can configure Internet Explorer 10 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 Internet Explorer 10 provides.

This table describes the possible values.

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 into the canvas element, but sliding a finger on the canvas element will send events to that element rather than pan the page.

Use scrollable regions to implement panning experiences

Developers occasionally implement pannable experiences using script and events to mimic panning. This, however, can result in a jerky experience that affects performance. If instead you use overflow to create scrollable regions, Internet Explorer 10 will provide hardware accelerated panning and zooming, creating a smooth, stick-to-your-finger touch-first experience. Further, Internet Explorer 10 lets you customize the panning and zooming experience. For example, you can create paginated content that users can swipe through. You can then set up snap points in CSS to identify the boundaries of the pages that Internet Explorer 10 will snap the users panning to:

    <style>
        #imagePanner {
            -ms-scroll-snap-type: mandatory;
            -ms-scroll-snap-points-x: snapInterval(0%, 100%);
            overflow-x: auto;
            overflow-y: hidden;
            width: 480px;
            height: 270px;
        }
        .imageRow {
            width: 2400px;
            height: 270px;
        }
        img {
            width: 480px;
            height: 270px;
        }
    </style>
    …
    <div id="imagePanner">
        <div class="imageRow">
            <img alt="Cliff" src="images/Cliff.jpg" />
            <img alt="Grapes" src="images/Grapes.jpg" />
            <img alt="Rainier" src="images/Rainier.jpg" />
            <img alt="Sunset" src="images/Sunset.jpg" />
            <img alt="Valley" src="images/Valley.jpg" />
        </div>
    </div>

For more info about using snap points, check out the Scrolling, panning, and zooming with touch input sample.

Identify input types using HTML5 forms

Internet Explorer 10 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.

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

<input type="email">

The touch keyboard shows a number pad for telephone numbers:

<input type="tel">

The touch keyboard shows forward slash and .com for URLs:

<input type="url">

Provide enough room for users' fingers

To build the touch-first experience of Windows 8, we’ve done a lot of research to formulate some helpful touch interaction design guidelines. 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 7mm (about 40px) square with at least 2mm (about 10px) of padding around it.

If you want to adjust the spacing only for users with touch hardware, use feature detection. To detect that user has touch hardware, use:

if (navigator.msMaxTouchPoints > 1) {
// Supports multi-touch
}

Going beyond the basics

When you're ready to optimize your site for touch while still providing seamless mouse and keyboard support, check out some of Internet Explorer 10 features for adaptive input handling, including the pointer events model and the gesture events model.

Troubleshooting touch issues

How can I make my hover menus work for touch?

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, using the onclick event to toggle the visibility. For more info, see the Don’t hide content behind hover design guideline.

How do I provide custom experiences for double-tap?

Internet Explorer 10 provides common default handling for basic touch interactions, such as panning for scrollable regions and double-tap and pinch zooming. You can use the -ms-touch-action CSS property to override these defaults and specify the allowable touch action behaviors for your site. To provide your own behavior for double-tap on a given element, you can disable the default double-tap zoom by simply omitting that value from the rule. For example, the following style declaration allows for panning and pinch zooming, but disables double-tap zoom:

-ms-touch-action: manipulation;

How do I detect a drag with touch?

HTML5 Drag and drop is not supported with touch input in Internet Explorer 10. To detect a drag action on your site, listen for the gesture events of press and hold (MSGestureHold) and swipe (MSGestureStart, MSGestureChange, MSGestureEnd).

Why don’t I see pointer moves for touch?

Because Internet Explorer 10 provides common default handling for basic touch interactions, it consumes touch moves, pinches, and double-taps by default and doesn't send events for these interactions. If your site needs to provide special functionality for these interactions and/or listen for the constituent pointer events, you can disable the default handling of specific touch behaviors by using the –ms-touch-action property. See Configure the browser for the default touch behaviors that work well for your site for more info.

Related topics

Design adaptive sites across Windows 8 devices

Send comments about this topic to Microsoft

Build date: 3/14/2013