It’s no secret – smartphone penetration has tipped over the 50% mark. According to ComScore, the figure at the end of January 2012 was 53.6%. The meteoric rise of mobile web browsing shows no sign of slowing…yet. Predictions are that by 2014, web traffic from mobile devices will have overtaken that from desktops. Even now, it’s almost as likely that your visitors are viewing your website on a smartphone or a tablet than a large-screen desktop device.
If your visitors are being presented with the same view of your site on their mobile devices, chances are you’re not meeting their needs…and they’re probably leaving to find what they need from one of your competitors. Delivering a great user experience is key – whatever the device.
So how do you deliver a great experience? One way you might be considering is responsive design - (after all, right now it’s the talk of the town!) It is a technique for using CSS media queries to adjust what appears and how it appears on a screen.
In theory, it’s a great piece of technology. Which is why it’s getting a lot of coverage recently, even though it’s not that new (Adobe introduced media query support in it’s Dreamweaver product in early 2011 – well before Ethan Marcotte’s seminal book on the subject came out). What more could you ask for than a single website that adapts it’s layout depending on the size (resolution) of the screen that it’s being viewed on.
To see some examples in action take a look at a few of these sites and try re-sizing your browser window: FiveSimpleSteps, Ethan Marcotte, TMW. And our own site is also responsive.
But is it the answer to all your mobilisation woes? Well, not entirely.
Let’s examine some of the issues:
- The media queries used as part of a responsive design technique typically work by showing or hiding various elements on the page. But all those elements are still downloaded – so effectively, elements that aren’t even displayed on a mobile device are downloaded. Which takes (un-necessary) time.
- Unless you’re careful, images that are displayed on the desktop version of your site are just re-sized by the mobile device after they’ve been downloaded. Which means that an un-necessary amount of bandwidth is being used…and then processing power is being used up by your mobile to do the re-sizing. Both of these factors will result in a potentially slow site. Of course, you could create a separate set of mobile-optimised, smaller & lighter images and get the CSS to use those instead – but that means additional maintenance of a separate set of smaller images.
- Both of the above issues could cause your responsively-designed mobile site to take longer to load. And we all know slow sites cause reduced user satisfaction & increased drop-outs.
- The context of the user isn’t considered – if you run an airline website and someone visits you from a mobile device, chances are they either want to check a flight status or perhaps check-in. You probably aren’t looking to book a flight. (Well done KLM. Oh dear Virgin Atlantic, British Airways, EasyJet…!) So the functionality of the mobile site should take into account the context in which the user finds themself when they’re visiting. This will have more relevance in some markets than others – but where there is a specific feature that should be available to mobile users, responsive design won’t be the only answer.
On the face of it, responsive design sounds like a really attractive technique to delivering websites on a mobile device. But as with most technologies, you have to be fully aware of the pros and the cons before jumping in with two feet.
When we created the mobile version of the Aptamil site, we used a different type of technology. More about that in a later post.
What methods do you use for your mobile sites? Drop me a line using the comments box below.
Comments