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.
[h=3]DO NOT Hide Content Behind Hover[/h]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.
[h=3]DO Configure the Browser for the Default Touch Behaviors That Work Well For Your Site[/h]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.
[h=3]DO Identify Input Types Using HTML5 Forms[/h]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:
The touch keyboard shows @ and “.com” buttons for email addresses.
The touch keyboard shows a number pad for telephone numbers.
The touch keyboard shows forward slash and “.com” for URLs.
[h=3]
DO Provide Ample Room for Users’ Fingers[/h]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
}
[h=2]Going Beyond These Basics[/h]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
