Friday, 20 April 2012

Making websites work well with touch-based IE 10

Windows 8 has a Metro version of its Internet Explorer 10 web browser. That means the browser will have support for touch-based screens. As a result, websites might have to make some small adjustments to make sure they can work well with IE 10's touch features. In the newest entry on the official Internet Explorer blog, Microsoft's Jacob Rossi writes about four specific things web designers can do to make sure their creations work well with IE 10.
One tip makes sure that a website's content is not hidden behind a mouse cursor. Rossi explains:
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.
Windows 8's Metro interface will allow the user to use a variety of touch gestures to navigate websites, including touch moves, pinches, and double-taps. Rossi says that if a website needs to offer some special functions, it needs to be designed so that it only reacts to the default settings for the touch gesture that is needed for that particular function.
If you have a section of a website that requires some kind of text to be typed in, designers can support IE 10 on a touch screen by setting a specific virtual keyboard layout. For example, different layouts can be used if a person wants to type in an email address in a website, or a phone number or a website URL.
Finally, Rossi says websites with IE 10 support should allow for enough room to be touched by a person's finger. He says:
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.

No comments:

Post a Comment