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.
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.
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.
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.
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 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 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.
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.