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.

Report a problem with article
Previous Story

Trials Evolution breaks one day Xbox Live Arcade sales record

Next Story

GEMA could have crippled YouTube due to copyright

10 Comments

Commenting is disabled on this article.

As a developer I don't see what the problem is.

Check if there's an event handler on the tapped element for the Javascript "hover" event. If there is, then the tap you just made activates the hover, and a second tap activates a click. If not, you activate the click right away.

Done, solved.

Just what the world needs 10 years after the end of the browser wars, demands for websites to be written for a specific browser; worse operating system if code for the OSK has to be included in the markup body.

I honestly cannot see many people outside of Windows 8 for Arm users existing inside metro anyway. I know that I for one will be avoiding it if possible.

This is part and parcel with working in the tech industry now.

Though I agree with the above poster and this is how we develop where I work. Follow standards and build responsive rather than build for the devices. We test in a device of each software after so, PC (ofc), iPhone and android. If windows touch and windows phone get enough use to warrant thinking about we'll test in those too.

Now days you should be thinking a lot about touch, the days are gone for websites being developed with PC at the forefront. More and more are browsing on mobile devices than PC.

Code to standards, not to vendors. Websites should not be written to work well in certain versions of Internet Explorer, or Google Chrome, or Firefox, or Opera, etc. They should be written according to published industry standards, and browser vendors should make their software conform to those standards when displaying the information. Sounds like the team at IE needs to find a way to accomplish their goals by fixing the browser's behavior in a touch environment instead of asking everybody else to change the way they make their web pages.

am I the only one who dislikes the Metro IE10? Now i'm not saying this as someone who hates Metro. IE10 in Metro just feels clunky and not very inventive and easy to sit down and use.

I can see the above points but surely it will be possible to use hover on desktops and non hover on touch devices. You can target different code at different browsers afterall.

TheDisneyMagic said,
I can see the above points but surely it will be possible to use hover on desktops and non hover on touch devices. You can target different code at different browsers afterall.

You can just code the hover and desktops will use it and tablets/mobiles won't in technical terms. Non-touch users get to see those little extras and touch users get the boring edition. Shame for the clever designs though as they'll get used less and less as mobile take over and everything will become very "flat".

Add to that that developing for mobiles means we are back to the 56k days (500KB seems to be considered too big for mobile devices) and I generally feel that for all the other benefits, mobiles are forcing websites to take a ten year backward step.

Only blessing is I can start to get rid of all those nasty drop down menus.

Hover-over content are a real problem on touch devices.
How about adding a "Hover" option to the tap-and-hold context menu, instead of not using it on sites at all.

This is probably the single biggest down point to all these touchscreen devices. Hover brings a webpage alive IMO. Not just interactivity hidden behind it but the little things like colour effects, images or logos that are monotone that change to colour on hover, etc.

I imagine Neowin without any hover and it is dead and boring. As other websites will be.

'Instead, consider making all behaviors click (tap) based.'
Don't do it as bad as sharepoint site we have to use here, making desktop uses have to click ALL links twice, and then to add insult to injury, redirect all mobile users to a 'mobile' interface that's absolutely useless and offer no way to go to the full interface.