The mobile web has recently received a lot of attention thanks to a new technique pioneered by Ethan Marcotte that he calls ‘responsive web design’ (see his article in issue 206 and at A List Apart). This uses CSS3 media queries to manage the problem of serving sites to a range of devices.
Basically, you create a fluid grid design, adding styles that target different screen widths using CSS3 media queries. This way you can show a single-column view to smaller screens and scale up the number of columns as the screen width increases. Along with the columns, images can also be scaled using flexible image techniques. Thus you keep the content the same and no longer need to show mobile users different sites.
One problem is that many mobile browsers don’t support media queries. Jeremy Keith and Bryan Reiger have discussed this publicly, stating that the default style presented should be the single column, with the floats and additional elements added within the media queries to progressively enhance your site.
This works because with the exception of IE8 and below, the majority of modern desktop browsers support CSS3 media queries. One solution for the IE problem is the css3-mediaqueries-js project, which uses a JavaScript workaround to mimic CSS3 media query support.
A further issue is that the technique adds extra code to the site, which increases download times. However, if the CSS is well optimised and carefully crafted, the effect can be limited.
A bigger issue is that the images that are scaled down are always downloaded at their full size, even on the smaller devices. One solution to this is a great web service called tinysrc, which you call when you link to the image in your HTML. Tinysrc actually resizes the image server-side so it is optimised for the device accessing it.
Download speed can be limited on both desktop and mobile, so optimising your site for slow connections is something you should already be doing. If your site is too large to be accessed by mobile, it is probably going to perform poorly in a range of situations, desktop included.
Access for all
Some have argued that we should be providing a different experience to mobile users, not a resized one. But I believe we should be making our content accessible to all, regardless of the device being used. If we don’t, we risk limiting our users. Think of an airline only allowing you to check-in on their mobile site, having decided that since you were on your phone, you were probably at the airport. What happens if you need to book tickets, but don’t have access to a desktop? I’m not suggesting mobile-focused functionality is a bad thing, but it should be available alongside the main site, not in place of it. If you are sent a link, you should be able to access that link from a mobile browser, without being redirected to a limited mobile site.
I understand that not all existing sites can translate their content into a single-column design, especially those with complex pages. The full site might contain duplicate ways of accessing content that fits fine on the desktop but would need reducing on mobile. In some cases it might be that the desktop site is actually too complex, and should be simplified. Designers of desktop sites could learn a lot from mobile experiences, which are simple but work extremely well. If designing a new site, mobile should be considered along with screen readers and desktop browsers as an equally important access point, and you should design with the needs of all these in mind.
Responsive design won’t work in every situation, but it is a technique you should use where appropriate. Above all, start working with your customers to create content that considers a range of contexts, design for smaller screens alongside larger, and let’s make the web accessible to all.
Mark (mark-kirby.co.uk) is a user-focused mobile developer at Ribot (ribot.co.uk), the agency behind the recently unveiled Tesco shopping app with barcode scanner.
