Building Touch-friendly Sites Using Windows 8 IE10

Windows 8 comes with a new Metro Internet Explorer 10 web browser that enables fast and fluid multi-touch experiences on the Web. Though, most sites will work fine with touch in IE10 with no changes to the site, but some sites might have to make some small adjustments to make sure they can work well […]

Windows 8 comes with a new Metro Internet Explorer 10 web browser that enables fast and fluid multi-touch experiences on the Web. Though, most sites will work fine with touch in IE10 with no changes to the site, but some sites might have to make some small adjustments to make sure they can work well with IE 10's touch features.

In a April 20 IE team blog, Jacob Rossi, Program Manager, Internet Explorer provides four simple guidelines to web designers to ensure your customers who use touch can most effectively use your site.

"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," said Rossi.

First tip is "Do not hide conter behind a mouse hover," Rossi writes, "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."

In the second tip, "Do configure the browser for the default touch behaviors that work well for your site", Rossi says that Metro UI of Windows 8 will allow users to use a variety of touch gestures when navigating websites, including touch moves, pinches, and double-taps. "So, 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," he said.

In the third tip, he says, "Do provide ample room for users' fingers - The average width of a finger is 11mm. As targets for tapping get larger, the percentage of accidental missed taps drops off quickly."

IE10 introduces support for touch optimized HTML5 input controls, all of which are touch optimized. "If you site requires text inputs, you can further improve users' touch experiences by identifying the specific input type, when applicable. IE 10 will show a tailored virtual touch keyboard layout for that input type on Windows 8," Rossi concludes.

Here are example of three different keyboards:

<input type="email">
The touch keyboard shows @ and ".com" buttons for email addresses.

ie10 touch keyboard for email address input

<input type="tel">
The touch keyboard shows a number pad for telephone numbers.

ie10 touch keyboard for tel numbers input

<input type="url">
The touch keyboard shows forward slash and ".com" for URLs.

ie10 touch keyboard to url input