Microsoft Urges Developers to Embrace Touch-Friendly Web Design

Compare Cost: Get 8 Free E-Commerce Design Bids
Service:
Location:
Budget:
Deadline:
Compare: Web Design Calculator | Web Design Cost Guidelines

Windows 8. Photo: Microsoft

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.

Source http://www.webmonkey.com/?p=55832
Mon, 23 Apr 2012 18:46:06 GMT
Tags: Browsers, future friendly, IE10, Metro, responsive design,

Browsers


Internet Explorer Market Share Surges, as IE 9 Wins Hearts and Minds

The browser wars are back and Internet Explorer 9 is gaining converts. For the second time this year IE made large gains, picking up almost one point of market share while Chrome, Firefox, and Safari all lost out.

The Web Needs to Get Ready for the High-Resolution Future

The new iPad is just the first in a coming tidal wave of high-resolution screens. Today we have hacks, but what the web needs are new standards and new tools to make sure developers are ready for the high-resolution future.

Firefox for Windows 8 Beginning to Take Shape

Mozilla is making progress on a version of Firefox for the Windows 8 Metro interface, but bigger problems lie ahead. Microsoft's rules for the Metro environment allow for only one browser in Metro mode. By default that's Internet Explorer 10, which leav

future friendly


Build Responsive Websites Like Bruce Lee

Responsive design means building fluid websites that work everywhere. So why are you still using pixels in your media queries? There's a better way. To paraphrase Bruce Lee, make your site more like water.

Retailer ‘Taxes’ Customers Still Using Internet Explorer 7

Still using an old version of Internet Explorer? It could cost you. One online retailer is making IE7 visitors pay an additional fee to cover the extra development costs it claims are necessary to support the aging browser.

IE10


Rumor: Internet Explorer 10 Metro to Run Flash After All

Leaked screenshots show Microsoft may have changed its mind about the plugin-free web. The latest builds of Windows 8 show limited support for Flash even in the Metro version of Internet Explorer 10.

Microsoft Update Secures Flash Plugin for IE 10

Microsoft has finally updated the Adobe Flash plugin bundled with Internet Explorer 10, securing Windows 8 users against several Flash-based attacks. The company has also released a new version of IE 9 that closes an exploit that allowed malicious website

Flash, Firefox Play Together in New Security ‘Sandbox’

DECO presents a green take on conventional caskets

Does The Internet Need Rules & Regulations? [You Told Us]

Pinterest For iOS Put To The Test – Was It Worth Waiting For?

23 Examples of Flat Web Design

Article Tags
Freelance Designer News Articles
Web Apps & Internet

News
cool web apps
Inspiration
CFC
All Posts
iPhone / iPad / iPod
Freelancing
Browsers
Freebies
Google Android
Games & Gaming Tips
Web Design
Freelance Graphic & Web
social media
Music
Cool Windows Apps & Tric
Featured
Photography