Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News Recommendations for Touch Friendly Sites

Recommendations for Touch Friendly Sites


Though it really should have been done back in 2009 (the year Windows 7 was touting its touch screen support), Microsoft’s IE team has finally released their recommendations for building touch-friendly web sites. The recommendations are fairly straight forward.

The first is the obvious “DO NOT Hide Content Behind Hover”. Since hiding content was always a bad idea from both an accessibility and general usability perspective, we may finally see this bad practice falling to the wayside.

The second recommendation is specific to IE 10. Special CSS tag called “-ms-touch-action” can be used to control whether the page or the element responds to actions such as dragging and double-tapping, a useful feature when building games or supporting drag-and-drop.

The third recommendation, “DO Identify Input Types Using HTML5 Forms”, really has nothing to do with touch itself. While it is true that IE 10 will honor HTML5 input controls with custom support for Windows 8 touch screens, all browsers (aside from IE 9) have at least some support for this feature. QuirksMode offers information on which desktop and mobile browsers currently support this feature.

The final recommendation deals with spacing. Microsoft claims that the human fingertip ranges from 8 to 19mm in size, with an average of 11mm. Based on that average, they are recommending anything that can be touched be 40px or larger with a minimum spacing or 10px.

Since this document doesn’t cover other browsers, InfoQ invites our readers to submit their own favorite recommendations for touch-friendly sites.

Rate this Article


Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p