Make your site touch-ready
Starting with Windows 8, Internet Explorer enables fast and fluid multi-touch experiences on the web and 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 IE to provide only the default behavior you want, if any. You can also disable other default touch handling in IE, such as text selection and the invoking of context menus. For details, see Going beyond the basics.
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">
.png)
The touch keyboard shows a number pad for telephone numbers:
<input type="tel">
.png)
The touch keyboard shows forward slash and .com for URLs:
<input type="url">
.png)
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
}
Controlling the default touch experience
On Windows 8 and later, IE provides default handling for common touch interactions, including:
- Panning for scrollable regions
- Pinch zooming
- Press-and-hold context menus
- Text selection
- Hover (added in IE11)
- Drag and drop (added in IE11)
These features work automatically so that sites and apps have a great touch experience by default. However, you might want to disable them in favor of your own experience.
Panning and zooming
Pointer events won't fire while performing a pan or zoom. You can use the touch-action CSS property to control or disable the browser's default behavior.
| touch-action Value | Description |
|---|---|
| auto | Initial value. The browser determines the behavior for the element. |
| none | The element permits no default touch behaviors. |
| pan-x | The element permits touch-driven panning on the horizontal axis. |
| pan-y | The element permits touch-driven panning on the vertical axis. |
| pinch-zoom | The element permits pinch-zooming. |
| manipulation | The element permits touch-driven panning and pinch-zooming. (Shorthand equivalent of "pan-x pan-y pinch-zoom"). |
| double-tap-zoom | The element permits double-tap-zooming. |
| cross-slide-x | The element permits cross-sliding along the horizontal axis. |
| cross-slide-y | The element permits cross-sliding along the vertical axis. |
For example, a canvas painting application might use:
canvas {
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.
Touch selection
You can select a word using touch in Internet Explorer 10 by tapping on or near text. If you want to disable text selection, do it just like you did in Windows Internet Explorer 9.
element.addEventListener("selectstart", function(e) { e.preventDefault(); }, false);
// Disables selection
Context menus
Pressing and holding certain elements in Windows Internet Explorer shows a hold visual that indicates a context menu is about to appear. If you raise your finger, the context menu is shown. If you drag your finger away, the visual is dismissed and the context menu does not appear.
If you want to use your own context menu, you can still do that with Internet Explorer 10. Just call event.preventDefault on the contextmenu event and run code to display your context menu. Internet Explorer automatically makes your context menu work with touch and provides the same hint visual upon press and hold. This example uses a contextmenu event to detect when the user has pressed on an element, held, and released. When the user lifts their finger, the contextmenu event fires, and a message is displayed.
<div id="touchspot">Press and hold here</div>
<script>
var elm = document.getElementById("touchspot");
elm.addEventListener("contextmenu", function (e) {
e.target.innerHTML = "Show a custom menu instead of the default context menu";
e.preventDefault(); // Disables system menu
}, false);
</script>
If you don't want a context menu at all, such as for a game that requires the user to hold a finger down for awhile, you might want to disable both the default context menu and the hint visual. To do this, you just need to cancel two events.
// Disables visual
element.addEventListener("MSHoldVisual", function(e) { e.preventDefault(); }, false);
// Disables menu
element.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);
Going beyond the basics
When you're ready to optimize your site for touch while still providing seamless mouse and keyboard support, check out the following IE features for adaptive input handling:
Pointer Events
Pointer events are modeled after traditional mouse events, except that they abstract the concept of a pointer to apply across all user input modalities, including mouse, touch, and pen.Gesture Events
Gesture events work with pointer events to enable your code to recognize and respond to more complex interactions like pinch, rotate, swipe, and drag.Manipulation Events
If you want to use a flat system of navigation in your site or Windows Store app using JavaScript, where the user pans across a single page and/or navigates through pages that reside on the same hierarchical level of the site, you can listen for manipulation events to implement the cross-slide user interaction pattern of selecting, activating, and dragging menu item elements.CSS properties for scrolling and zooming with touch and the msZoomTo method
CSS properties for fine-tuned input handling enable you to establish scrolling / panning snap points, set up scrolling and zooming limits, control for zoom chaining from a child to ancestor element, and disable scroll rails for free form touch panning in any direction. The msZoomTo method scrolls and/or zooms an element to its specified coordinate using animation.
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?
IE provides common default handling for basic touch interactions, such as panning for scrollable regions and double-tap and pinch zooming. You can use the 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:
touch-action: manipulation;
How do I detect a drag with touch?
Internet Explorer 11 introduces native support for touch-based HTML5 drag and drop. To detect a drag action on your site with Internet Explorer 10, 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 IE 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 touch-action property. See Configure the browser for the default touch behaviors that work well for your site for more info.