All posts tagged ‘touch’

File Under: Responsive Design, UI/UX

What the Tablet-Laptop Hybrid Means for Web Developers

Hybrids. Image: Screenshot/Webmonkey.

The advent of hybrid laptops that double as tablets or offer some sort of touch input has greatly complicated the life of web developers.

A big part of developing for today’s myriad screens is knowing when to adjust the interface, based not just on screen size, but other details like input device. Fingers are far less precise than a mouse, which means bigger buttons, form fields and other input areas.

But with hybrid devices like touch screen Windows 8 laptops or dockable Android tablets with keyboards, how do you know whether the user is browsing with a mouse or a finger?

Over on the Mozilla Hacks blog Patrick Lauke tackles that question in an article on detecting touch-capable devices. Lauke covers the relatively simple case of touch-only, like iOS devices, before diving into the far more complex problem of hybrid devices.

Lauke’s answer? If developing for the web hasn’t already taught you this lesson, perhaps hybrid devices will — learn to live with uncertainty and accept that you can’t control everything.

What’s the solution to this new conundrum of touch-capable devices that may also have other input methods? While some developers have started to look at complementing a touch feature detection with additional user agent sniffing, I believe that the answer – as in so many other cases in web development – is to accept that we can’t fully detect or control how our users will interact with our web sites and applications, and to be input-agnostic. Instead of making assumptions, our code should cater for all eventualities.

While learning to live with uncertainty and providing interfaces that work with any input sounds nice in theory, developers are bound to want something a bit more concrete. There’s some hope on the horizon. Microsoft has proposed the Pointer Events spec (and created a build of Webkit that supports it). And the CSS Media Queries Level 4 spec will offer a pointer query to see what sort of input device is being used (mouse, finger, stylus etc).

Unfortunately, neither Pointer Events nor Media Queries Level 4 are supported in today’s browsers. Eventually there probably will be some way to easily detect and know for certain which input device is being used, but for the time being you’re going to have to live with some level of uncertainty. Be sure to read through Lauke’s post for more details and some sample code.

W3C ‘Touch Events’ Specification Targets Tablets, Touch Screens

The World Wide Web Consortium (W3C), the standards body that overseas HTML, CSS and other web technologies, has release a rough draft specification for touch screen devices. The spec is far from complete, but eventually it could give developers a set of standards for creating touch-based interfaces.

Thus far touch screen devices have primarily mimicked mouse behaviors. But the rise of multi-touch gestures and the larger screens available on tablets, mean that touch screens of the future may offer design possibilities far beyond the mouse-based world that exists on today’s web. The goal of the W3C’s touch-based spec is to help define standard behaviors and events that developers can translate into touch-friendly interfaces.

Like much of the W3C’s work, the new touch-screen spec starts with existing specs, in this case Apple’s iOS touch event spec. The W3C’s draft adds several more events like X and Y radii for touch areas and a “force” property. The later, while rather vague at the moment, could give developers a way to emulate mouse-rollover events. For example, a light touch could trigger a rollover, while a hard touch clicks a link.

Mobile platform consultant Peter-Paul Koch calls out a few minor problems and undecided issues — for example, no units are specified for the radius or force properties — but overall says the spec is a step in the right direction.

The Touch Events Specification is a long way from done; it doesn’t even have a real URL on the W3C site yet. And, other than the events cloned from Apple, the spec is not supported anywhere in the wild. Still, touch screens clearly need an expanded set of standards to go along with desktop standards and it’s nice to see the W3C stepping up to the plate.

See Also: