Clicky

X

Subscribe to our newsletter

Get the State of Digital Newsletter
Join an elite group of marketers receiving the best content in their mailbox
* = required field
Daily Updates

Why You Need Responsive Design

5 December 2013 BY

58 Flares Twitter 0 Facebook 25 Google+ 17 LinkedIn 9 Buffer 7 Email -- StumbleUpon 0 Pin It Share 0 Filament.io 58 Flares ×

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.

Mobile Users

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.

Mashable 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:

 

Bad Examples of Mobile

 

This:

 

Bad Mobile Layout

 

This:

 

Mobile Design Fail

 

This:

Poor Mobile Design

 

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.

 

ASOS

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?

AUTHORED BY:
h

Laura is a Digital Marketing Executive at Koozai. With search experience in a large number of industries both in-house and agency side, Laura has a strong interest in conversion optimisation and web psychology.
  • Gemma Birch

    Totally agree Laura. Mobile sites will make more sense in some cases, but I’m a big fan of responsive from a user’s perspective as you get the same information as the main site, but in a mobile-friendly format. It surprises me how many sites still don’t use either option and give users a really poor mobile experience.

    • Laura Phillips

      Same here Gemma, there’s quite a few pretty big names still offering a poor quality mobile experience who must be losing so much to the competition…

  • http://www.brosix.com/ Brosix

    Responsive Design or a different mobile site. Whichever way you want to go but not having a mobile or tablet optimized site at all can be a deal breaker for lots of prospective users.

  • aderojas

    Responsive all the way! If we stick to the KISS principle, there aren’t many reasons to choose a mobile site over a responsive design. Two sites to design, track update and maintain vs. one site that works everywhere?

  • AK

    I always push for responsive but occasionally for highly complex websites with tons of content, their layouts and information just won’t present well in a responsive layout. They need a more simplistic site for mobile, you could go responsive and just hide a lot of it for the smaller devices, but sometimes the mobile site still makes more sense. Something like Amazon or Facebook comes to min.

58 Flares Twitter 0 Facebook 25 Google+ 17 LinkedIn 9 Buffer 7 Email -- StumbleUpon 0 Pin It Share 0 Filament.io 58 Flares ×