I had the privilege to attend the first ever Swipe Conference, which was held in Melbourne earlier this week and although it’s primarily pitched at iOS developers, many of the topics are still very relevant for those designing and developing websites. Among the many great speakers was Josh Clarke, writer of "Tapworthy: Designing Great iPhone Apps". Josh's talk, "Teaching touch" was an eye opener, exploring a future where gestures may replace buttons, menus and tabs and ways in which users can be educated to use such interfaces. Due to the nature of the web I think a chromeless future is a fair way off, but it did make me consider how us web developers approach touch when creating responsive layouts.

Considering touch

When creating responsive layouts the accepted approach is to use CSS media queries to reflow content within flexible layouts, thereby optimising websites for various screen sizes. However this approach doesn't allow us to target touch devices specifically and to take advantage of touch interaction and gestures. Therefore we're only part optimising for such devices as we're still only providing point and click interfaces.

In other cases we may also be abandoning features such as hover effects and fixed elements, due to the issues that arise when considering touch devices. Touch detection however allows for such features to incorporated where suitable and to offer alternatives when they are not.

While detecting and optimising for touch devices sounds complex, it can be very easily achieved and used to elegantly resolve a range of real-world problems that designers and developers confront on a regular basis.

Detecting touch

As far as I'm aware the only browser vendor offering a media query to detect touch devices is Mozilla, but due to limited usage of Firefox and Fennec on touch devices this option isn't really worth exploring.

The easiest way to detect whether or not a user is accessing your site on a touch device is by using JavaScript. Using JavaScript for this purpose is not only an acceptable solution, but the best and easiest to implement. To detect touch interactions and gestures and react to them you'll need to use JavaScript anyway, meaning that if a user attempts to access your website via a touch device that doesn't have JavaScript enabled, you shouldn't be serving up a touch optimised layout anyway.

The simplest way to implement this is to use Modernizr, as it offers this functionality out of the box. My personal opinion is that Modernizr is a must for modern web development, as it offers a very complete toolset for detecting a wide range of features, allowing for websites to be progressively enhanced for a variety of environments. However if your averse to Modenizr for whatever reason, this JavaScript snippet can be easily adapted to suit your requirements:

try { document.createEvent("TouchEvent"); // This is a touch device } catch(e) { // This is not a touch device };

I should point out that this script will result in a false positive in Chrome 4 and 5, but given Chrome's rapid release cycle this is unlikely to ever be an issue. I should also point out that I'm not a JavaScript guru and thank Paul Irish (author of modernzr) for taking the time to put together this great test page, which demonstrates various methods for detecting touch events. It's well worth a look if you need a more robust solution.

Don’t make dangerous assumptions

On a few forums I've stumbled across while researching this article, I've seen people advocating the alternative of simply assuming that a device is touch enabled based on screen size or media queries alone.

Please don't do this as it's a very dangerous assumption to make. While you may be able to write media queries to detect popular devices such as the iPhone and iPad, there will certainly be devices that you cannot detect and you risk impairing the user experience for those using them.

Optimising for touch

There are numerous ways that this technique can be utilised to optimise layouts for touch devices and to also resolve common real-world problems that result from condensing layouts. In addition to optimising for touch, it also allows us to optimise for point-and-click devices as well and to reconsider features such as fixed elements and hover effects.

Hover effects

Over the past couple of years we've seen designers abandon hover effects due to the issues that arise when considering touch devices. Personally I love hover effects and think they're great for revealing non-essential content such as image captions and can also help reduce page clutter. Rather than abandon them altogether, touch detection allows designers to consider alternatives. Even when not developing responsive websites, touch detection should become mandatory for layouts that utilise hover effects for interacting with essential elements, such as navigation, to resolve issues that can impair usability when viewed on a touch device.

Fixed elements

Fixed elements are another example of a technique that has been abandoned by designers and developers in recent years. Again fixed elements can improve the user experience for desktop users, but can be downright horrible when viewed on touch devices. Touch detection enables developers to absolutely position or hide such elements where appropriate, rather than abandoning them completely.

Buttons

Buttons have increased in size over the years to account for the imprecision of meat pointers (fingers) when compared to the mouse. However in many circumstances increasing the size of buttons can often make them appear awkward, as they appear to be out of scale. For touch devices this is a necessary evil, but touch detection allows designers and developers to contextually size such elements, which offers a more elegant solution.

Inner scrolling

Most content such as text and images easily scale for narrow screens, but elements such as tables are often more problematic. By using JavaScript and touch detection it's possible to allows users to zoom and scroll such elements via pinching and swiping, which may be more preferable to simply hiding them. You can easy achieve this using a plugin like iScroll.

Galleries

Basic image galleries can be designed and developed to be viewed on mobile devices easily enough, but in many cases gallery controls may obscure the image underneath. The ability to swipe through image galleries has become very intuitive for most users, due the prevalence of this design pattern in native applications. Removing gallery controls and enabling support for gestures, such as swiping, therefore is not only feasible, but may offer a richer user experience.

A word of caution

As discussed there are numerous real world cases where detecting touch in the context of responsive web design can be extremely valuable, but it's important to not over do it. The primary goal is to optimise layouts for various environments through minor CSS and JavaScript tweaks.

The goal therefore is not to create an experience that compares to a native application using this technique. Trying to attempt this is nothing short of delusional and the inevitable result of over-complicating CSS and JavaScript may mean that development and maintenance exceeds the cost of developing an alternative mobile or touch optimised site, or even a native application.

When I first experimented with developing websites for mobile and touch devices I attempted to implement things such as fixed headers using complex JavaScript and the results were not only poor when compared to native applications, but a nightmare to maintain.

At all times it's important to the consider the user as well and why they would be accessing your site using a touch/mobile device. Unless you work for Google or Facebook it's unlikely that mobile users are accessing your site daily and therefore are not invested enough to learn how to interact with your site, implying that complex gestures or behaviours are best avoided. Support for complex gestures between various platforms also varies greatly and while support for basic interactions is good, multi-touch gestures such as pinching are best avoided.

More than screen size

In hindsight it seems a little strange that this article was inspired by an iOS developer talking about a buttonless future for native iOS applications. In the context of the web and responsive design I don't think this is a possibility, but Josh Clark's talk did force me to at least consider touch more in my work.

While touch detection is often not considered when creating responsive websites it should be. Touch detection complements the use of media queries and while further segmenting users can mean more work, the result is a far more refined user experience. The notion of optimising for various environments is the core principle of responsive design and if touch detection enables us to better achieve this it is a must for all web designers and developers.

Comments will be enabled soon. In the mean time let me know what you think via Twitter