Responsive Web Design vs Adaptive Web Design

2
11 October 2012

As anyone who is clued up about digital marketing will tell you, mobile has landed, and is here to stay. Recent studies reveal that mobile traffic accounts for roughly 12.5% of all visitors to websites and is on the rise. Just take a look at your own Google Analytics and you’ll see the same trends on your site. So why does it matter? Well, chances are if you haven’t done anything to accommodate your new mobile visitors, you’ll find that their bounce rates are significantly higher than those of desktop and laptop visitors. In fact, if you are likely to be getting next to zero value from your smartphone surfers. Like most B2B companies, your website will be your primary ‘shop-front’, so if 1 in 10 of your visitors were leaving because they don’t like your store layout, surely you would consider redecorating?

Many have used separate, isolated mobile websites, which for all purposes are great if you have the time and inclination to update both websites as the same time. However with the growing levels of tablet traffic, are these websites really optimised for iPad users too? Good practice has taught us that keeping a website updated with relevant, topical content is a good thing; users tend not to like stale content and neither do the search engines. So if you have a website designed for each and every device, keeping the versions of your website up-to-date sounds like too much of a chore to me.

So what should you do?

Why not have one website, which runs off one content management system, that morphs and readjusts for different screen sizes? A bit like a shop window that shifts and changes to be optimised for each visitor as they pass by.

There are 2 proven techniques that provide this idyllic solution; Responsive Web Design (RWD) and Adaptive Web Design (AWD). As their names would suggest they have similarities, yet are very different methods for optimising websites for mobile devices.

Responsive Web Design (RWD)

Responsive Web Design has existed for a couple of years now. It means that content on a website stays the same, but the layout of the content changes for the different screen sizes. For example you could have 3 columns of content on a desktop, 2 on a tablet and 1 on a mobile. The content would simply shift and wrap around the columns.

In terms of managing content on a website, this is a great solution as content stays the same and can be edited from one Content Management System (CMS), and it is relatively quick, easy and cost effective to set up and implement.

However, the easy fix is not always the optimal solution. There are several things RWD does not do, if you really wanted to give your mobile users the best experience:

  • The user does not get a fully optimised experience for the device they are using.
  • The evidence indicates that users behave very differently when using smartphones and desktops, so ideally a mobile website should be adapted to these behavioural changes.
  • Websites with large files, images and videos take much longer to load on a mobile device with a 3G connection than a desktop with broadband. As the content doesn’t change between environments, mobile users are kept waiting.

This is where Adaptive Web Design steps in…

Adaptive Web Design (AWD)

A much newer and fresher concept that is rarely adopted is Adaptive Web Design. This technique adapts what is displayed depending on the capabilities of the device being used, as well as the screen size. It centres on the context of the user, so even when the same content is used, it is adapted (with some or even all of the design elements changing), depending on whether the user is using a mouse and keyboard or touch screen. AWD also uses different layouts for tablets and mobiles with certain ‘Responsive’ elements built in to reduce the number of different templates required. AWD can be taken to further extremes with content being completely repackaged and reworded, while images and video are either reworked or completely removed.

AWD takes mobile optimisation to the next level, ensuring the user-experience is enhanced to its upmost (whilst still using only one website). In terms of usability best practice, this overshadows the cheaper, easier option of RWD. However, great usability comes at a greater cost:

  • Creating content for each and every device that could visit your site is time consuming and may be an inefficient use of resources.
  • A fully Adaptive website can be more expensive if not planned correctly. If you have a CMS you might need to adapt it to cater for the different layouts for mobile, tablets and desktops. This can lead to higher development and on-going marketing costs if not planned properly from the offset.
  • You run the risk of losing branding consistency and confusing your audience if users see different interfaces on different devices.

Again, what should you do?

It is impossible to say what solution is best for your website and your business. RWD can be the perfect solution if you are simply providing an information portal with text content. However, for the purposes of engagement and usability AWD offers a much more customer-focused and unique user-experience for each device. This results in faster browsing and download speeds with much better customer conversions.

Sometimes, the best solution is a combination of AWD within RWD or vice versa. For example, the BBC website (http://m.bbc.co.uk/news) is primarily Adaptive but also Responsive.

Users will rely more and more on their mobile devices, and in this respect, having the best possible website for them at the point when they are searching for you should be a priority, and at least worth including in your business plan. From a marketing perspective, your website will always be your customers’ most engaging impression and touch-point with your brand.

2 comments
?

Anonymous help

Great article, but are we

Great article, but are we arguing over semantics? responsive design also allows for different content.

I was under the impression, RWD responds to the screen size, whether it is because of the device or the user resizes their window. AWD serves up separate content based on device ( similar to the BBC site).

I stumbled across a couple of useful responsive website tools when I was researching. They let you test your layouts quickly and easily before you conduct device testing. The sites are are:
http://digitalgeek.com.au/responsive_website_design/
and
http://mattkersley.com/responsive/
and
http://protofluid.com/

Hi Danny Bluestone. Blogs are

Hi Danny Bluestone. Blogs are troublesome to run and time consuming so I appreciate when I see well written material about RWD & AWD. It’s really a informative stuff. Thanks for the post.
http://wingmenmedia.co.uk

Post new comment

The content of this field is kept private and will not be shown publicly.

CAPTCHA

This question is for testing whether you are a human visitor and to prevent automated spam submissions.

Related Content