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 game piece will send events to the canvas 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.
<input type="tel">
The touch keyboard shows a number pad for telephone numbers.
<input type="url">
The touch keyboard shows forward slash and “.com” for URLs.
DO 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:
- IE 10 Developer Guide
- Touch Zooming & Panning
- Pointer & Gesture Events
- Touch Input for IE10 and Metro style Apps
- Handling Multi-touch and Mouse Input in All Browsers
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