What is Responsive Design and do you really need it?
A couple of months ago a discussion started about the BBC News mobile site, which was apparently built using responsive design.
It’s a decent site and is easy to use, however there was some debate in the comments section over whether the approach the BBC has used is definitely responsive design.
In fact a vast majority of commenters were adamant that the BBC’s site is adaptive design rather than responsive.
So to bring some clarity to the situation, three mobile experts have been asked what responsive design in mobile means, what the benefits are and also for their opinion on the BBC News site…
1. What is responsive design?
Maani Safa, innovation director at Somo
It’s a way of designing and coding websites with a fluid layout, so that images and other elements of the site adapt to the screen on which the site’s being viewed.
Terence Eden, mobile industry consultant
Responsive design builds on the idea of “One Web”. A single URL should serve up content which is appropriate for the device requesting it – whether it’s a laptop, tablet, mobile phone, TV, or internet fridge.
Responsive design usually means serving the same content, but giving the device instructions via CSS on how to display it appropriately.
Tim Dunn, director of mobile strategy at Isobar
Responsive design is a technique used to deploy content over the internet to various devices seamlessly – it involves deploying a site only once, and using style sheets to reformat the content based primarily on screen width to fit the device.
2. What are the benefits of responsive design for e-commerce sites?
From a user perspective, a site built using responsive design offers a high quality experience. Sites not optimised for mobile devices often display content that is difficult to navigate or too small to read.
From the point of view of the site owner, a site that uses responsive design only needs to be built once – you don’t need to build a web version, a mobile version and a tablet version separately – so this usually saves time and money.
Plus, any updates that then need to be made only have to be implemented on one site.
We know that customers like shopping on their phones and tablets, but most e-commerce sites are hideous to use on a small screen
Responsive design – when done right – provides for a simpler and faster experience.
For e-commerce, the pros and cons of responsive are more or less the same as for anyone else. The benefits are that you can in theory only need to develop and maintain one site, which will work over all devices.
3. What are the potential negatives for e-commerce sites planning to use responsive design?
Responsive design has very few negatives in itself as such, but building a site in this way does require thorough planning and a good understanding of the customer journey through the site on every type of device.
The best responsive designs start by thinking mobile first – not desktop first. A good mobile user experience usually translates well to desktop. The same isn’t always true the other way round.
A minority of users won’t like the way the responsive site looks. If they’re used to navigating one way on their desktop, having a different interface on a tablet may confuse them.
The drawbacks are numerous: primary among them is that responsive will deliver more or less a web experience, but reformatted for mobile, rather than a true mobile experience.
The context for mobile usage, and therefore the objectives for the site and its consequent design and journeys may be completely different, but responsive only provides one user journey across all devices.
Also, while only one set of HTML is required, the difference in the stylesheets to provide a custom mobile experience may well be so great that maintaining two sites is actually easier.
Also with responsive being in a very early stage, the toolkits and resources available are immature, so require very specialist resource at the moment.
4. If an e-commerce site already had a separate m-commerce site would you recommend switching to responsive design?
Not necessarily, no. If a major overhaul of the site is required then starting again using a responsive design is often a good route to take, but it’s rarely worth changing just for the sake of it, provided the mobile site is working well.
No – as long as they are able to move customers to the appropriate site, there’s no need to switch. But you have to make sure that you offer all the functionality of your main site on your mobile site. As you add more features, that may become difficult to maintain.
That’s where the beauty of responsive design comes in – you have one site but present it differently to different classes of devices.
Definitely not, unless you are considering replatforming your desktop site and you feel that you are incurring a lot of cost or operational overhead maintaining your current mobile site.
5. Is the BBC’s site built using responsive design?
Strictly speaking, no, it doesn’t look like it. The site is ‘responsive’ in that it responds to being viewed on different devices, displaying content in a way that’s appropriate to that screen, but it doesn’t look like it’s been coded as one ‘responsive design’ site.
The site detects the device that you’re accessing the site from, but if you resize the browser window on a desktop, the content doesn’t automatically rearrange itself, as you would expect from a truly responsive design (e.g. Smashing Magazine).
It looks like the mobile site is separate (the fact that the URL is m.bbc.co.uk/news also suggests this). The site is probably better described as ‘adaptive’ design rather than responsive.
No. The BBC’s mobile site is fairly responsive. If you view it on different sized phones and tablets it adapts quite well. But it is an entirely separate site from the main BBC news site.
The BBC are doing device detection and redirecting mobile users. It’s not a bad strategy per se – but it is not best practice.
It has some elements of responsive in how it deals with screen width on mobile devices. For example, see how the menu expands and the two columns become three when you turn the phone sideways.
However, it’s not true responsive as you can tell from the fact that it is on a separate ‘m.’ URL, and when you adjust the desktop browser width, the site does not react accordingly.
Apparently the BBC fundamentally doesn’t really understand what responsive means if they’re making statements like the one they have made, but this is a fairly complex issue with many shades of grey between one approach and the other.
this article was re-blogged from econsultancy