All products featured on WIRED are independently selected by our editors. However, we may receive compensation from retailers and/or from purchases of products through these links.
Windows 8 is just around the corner and Microsoft wants web developers to get ready for it. We’ve yet to see any tablets running Microsoft’s next-gen Metro interface, but the company is already hard at work telling web developers how to optimize their websites for touchscreens.
The IEBlog recently posted some guidelines for building touch-friendly sites and wants developers to know what makes a successful touchscreen website.
Since Microsoft is late to the touchscreen party there isn’t too much here that savvy developers aren’t already doing for iOS and Android devices. Recommendations include touchscreen basics like using the proper HTML input types such as “tel” or “email” to trigger tailored keyboard layouts, and making sure that touch targets are large and easy to hit. Microsoft also suggests avoiding hover events since touchscreen users never trigger them (unfortunately, content hidden from touchscreens by hover events is still an all too common problem).
If you’re building responsive websites or at least tailoring your designs for touchscreens, most of these suggestions are probably already part of your workflow.
One thing that may be new to some developers is the non-standard -ms-touch-action CSS property. The -ms-touch-action property allows developers to override IE 10’s default touch behavior.
Like most touchscreen browsers, IE 10 assumes that touch events are related to browser actions — double-tapping to zoom for instance. Most of the time this is what you want, but occasionally developers may want to take over some actions, for example, drag events in a drawing app, while leaving others alone. If you have canvas element as part of your drawing app you could set the -ms-touch-action like this:
canvas { -ms-touch-action: double-tap-zoom; }
As the IEBlog explains, “with this configuration the user can double-tap to zoom in to the canvas element, but sliding a finger on the canvas element will send events to it rather than pan the page.”
For more details on -ms-touch-action, head over to the Microsoft Developer Network website. As far as I’ve been able to determine, Microsoft has not yet submitted -ms-touch-action to the W3C. It looks like a very handy property, so hopefully it will be submitted at some point.
As the IEBlog notes there’s much more to developing for touchscreens than just a few quick tricks. While most sites will work just fine in tablet versions of IE 10 (or any other touch screen browser) with no modifications at all there’s a rather wide gap between “work” and “amazing.” If you’d like your sites to land toward the later end of the spectrum, be sure to check out our earlier post on building a responsive, future-friendly web for some pointers.
