Responsive web design is a real buzzword this year, but what does it mean and is it the best design option for your site? In this post we look at the importance of responsive design, why you should use it, and occasions where maybe you should not…
What Is Responsive Design?
According to our old friend Wikipedia, “Responsive Web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors.)”
Why Do I Need It?
Times keep on changing, and technology with it. The increased number of browser enabled devices as well as the increased expectations of users over recent years means that sites have to be where users are, when they want them. We have had that bit covered for a while, but we weren’t always there in an accessible, conversion friendly format. While users may be able to access some sites on their mobile devices, quite often they cannot read the site easily and trying to complete the goals we so want them to becomes nigh on impossible.
The number of users accessing sites via smartphones and tablets has increased exponentially over the last 5 years. If users can’t see or access the site properly, it’s unlikely they are going to stick around.
Would you consider optimising your site for only 50% of your customers?
Give Me An Example of Responsive Design
Responsive design has been a real buzzword in 2013 and there’s a huge number of great examples out there. In this instance I am using Mashable’s responsive update to show the difference in device with responsive design.
If you’re looking for inspiration have a look at eConsultancy’s post or this rather lovely explanation of responsive design by John Polacek.
Give Me An Example Of a Bad Mobile Experience
Part of our job as website owners is to provide the clearest and simplest route to conversion for our visitors, eliminating any and all stumbling blocks. Here are some examples of a poor mobile experience, where users are unlikely to try much harder to access information or complete a goal.
Our own @Koozai_Al recently wrote a blog post entitled Ecommerce Sites: Pet Peeves and How to Fix Them, which gives a great/nightmare example of a site where he could not physically click on a radio button and therefore not complete a purchase on a mobile site.
Here’s a few other examples to give you more of an idea…
This:
This:
This:
This:
All examples from http://wtfmobileweb.com/
According to a 2012 SnapHop study, 61% of users who land on a non-mobile optimised site will go to a competitor. A responsive site will make sure your site is friendly regardless of device or screen size.
What About Dedicated Mobile Sites?
Mobile sites and responsive sites essentially aim to serve the same purpose, but they operate differently.
How Do They Differ?
How They Work
Mobile sites are built on the framework of the existing site, and the server delivers an optimised page for mobile. When responsive sites are accessed the work is done by the device, auto-adjusting to the optimal fit.
Domain Authority
As your mobile site is a separate domain, links and traffic do not count towards your main site’s authority; they are completely separate entities in this respect. This of course runs the risk of taking traffic away from your main site, however a well optimised mobile site should increase conversions for your business, and that’s what we’re really interested in.
Responsive design makes one site fit all devices, meaning that all visits go to your main site.
Give Me An Example of a Good Mobile Site
I will usually default to ASOS when it comes to usability and accessibility, and in this instance they have actually opted for an m. site as opposed to a responsive one, as well as a store app and magazine app. The UX doesn’t blow me away in this instance unfortunately, but it is a good example of a dedicated mobile site in action.
So Responsive Is Better?
In most cases, in my opinion, yes. Shoot me down if you will but I believe in the vast majority of cases responsive design is going to be a better fit. Google prefer it (not that that’s the be-all-and-end-all but it IS a factor), traffic and links go to your main site, lower maintenance costs, and a simpler set up (usually).
When Would a Mobile Site Be Better?
Some businesses favour a mobile site over responsive design purely on a cost basis. Sometimes this is a sound judgement but only when other projections are taken into consideration such as estimated increase in revenue, and the maintenance cost of a mobile site. As a mobile site is separate to your main site content etc will have to be changed separately, creating more work. Your site is an investment, not a one off cost to be factored in to this month’s budget.
Another reason mobile sites might be chosen over responsive design is if you want to change your image, or give a different experience on mobile. A responsive site ‘is’ your main site, there is no flexibility in this. A separate mobile site allows you to start again, making and many changes as you like.
Google’s View
Google prefer a responsive site, as explained on the Webmasters Blog:
“Our commitment to accessibility means we strive to provide a good browsing experience for all our users. We faced a stark choice between creating mobile specific websites, or adapting existing sites and new launches to render well on both desktop and mobile. Creating two sites would allow us to better target specific hardware, but maintaining a single shared site preserves a canonical URL, avoiding any complicated redirects, and simplifies the sharing of web addresses. With a mind towards maintainability we leant towards using the same pages for both, and started thinking about how we could fulfill the following guidelines:
1. Our pages should render legibly at any screen resolution
2. We mark up one set of content, making it viewable on any device
3. We should never show a horizontal scrollbar, whatever the window size
… It’s worth bearing in mind that there’s no simple solution to making sites accessible on mobile devices and narrow viewports. Liquid layouts are a great starting point, but some design compromises may need to be made. Media queries are a useful way of adding polish for many devices, but remember that 25% of visits are made from those desktop browsers that do not currently support the technique and there are some performance implications. And if you have a fancy widget on your site, it might work beautifully with a mouse, but not so great on a touch device where fine control is more difficult.”
Conclusion
Which solution is best for you depends very much on your business. There are a number of pros and cons to weigh up as well as consideration of the state of your current site. In some cases mobile will be the best solution, but it is likely that a responsive design will come up trumps in the majority of cases.
What do you think?
Post from Laura Phillips on State of Digital
Why You Need Responsive Design