Responsive Web Design and Media Queries: Not The Silver Bullet

There's certainly a big buzz right now about responsive web design; flexible layouts that adapt dynamically to the user's device and its capabilities; screen size, resolution and so on. One of the major uses for this technique - a combination of flexible grids, resizeable images and CSS media queries - is as a mechanism for creating a mobile version of a site. And it's a very useful approach - dynamically changing the layout according to your device's capabilities enables content to be re-structured for the small screen with little effort. Also, putting the onus on the device to interpret the style rules makes sense, removing the need for messy, server-side browser detection based on user agent strings. However as tempting as it might be to use this technique as your sole approach to mobile-enabling a site, it is to ignore a number of other factors and issues prevalent in designing - and building - for the mobile web. Displaying a website in such a way that it looks better on a mobile device is only a part of the process for creating a mobile version; there are other factors which should be considered, such as how and where the mobile version of the site is going to be used, a user's motivation for using the site and assessing what is appropriate for the mobile-friendly version of the site. Whilst it is true that some people will only ever visit your site from a mobile device, it is likely to be used differently and should be tailored as such - it's not just about making it look right on a small screen. For example if I'm accessing the RAC website via my mobile, it's much more likely I'm doing so for breakdown assistance or real-time traffic information, than researching my options for car insurance. Interfaces need to be considered carefully on a mobile site; it's not just about styling. If I visit a website for a cinema chain I'd expect something like a drop-down where I can select the cinema I'm interested in; on their mobile site they'd be missing a trick if they didn't use geo-location to save me time. My second argument is more pragmatic and technical. Take the simple example of a blog, with a typical two column layout - using media queries, the right-hand column might be shifted below the main content area (i.e. the articles). Or perhaps the tertiary nature of a typical right-hand column means it can be stripped out altogether. However this creates two major inefficiencies - the HTML is fetched from the server and never used, and typically-dynamic content, whilst most probably cached, still has to be generated from somewhere and it seems illogical to generate something which doesn't ever get seen. Responsive web design calls for images to be resized by the device; but by this time the full-size image has been downloaded (at least on iPhones) - a significant inefficiency, and bad news if you're on an old mobile network. Even Apple themselves advise not to rely on this technique. Better to use servcer-side resizing or a web service such as tinySrc. The solution? Use media queries to fine-tune the display of a mobile version of a site, not just realign or tweak the content of a desktop website. Implement a separate strategy for the mobile version, and use server-side technology to cherry pick the required content and elements, and present this using an alternative theme layer. (Ensuring, of course, that the desktop version is available if required.) Take advantage of features that work well on mobile devices such as geo-location. I do support media queries in responsive web design to help enhance the mobile experience. If you've got a simple site and want it to work okay on mobile device, go for it. But blindly assuming that they can be used alone to create a rich user experience on mobile devices is a little short-sighted.