{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

I wrote a post recently looking at the pros and cons of adaptive web design (AWD), and the comments highlighted the confusion and crossover that exists between AWD and responsive design.

So, with help from some of the expert contributors to our Mobile Web Design and Development Best Practice Guide, let's try and clear this confusion up. 

I've asked them for their definitions of AWD, where the confusion lies, and the best use cases for this approach. 

How would you define adaptive web design?

Stuart McMillan, Deputy Head of Ecommerce at Schuh:

In many ways, adaptive is not dissimilar to a mobile specific site, in that the server delivers different content to different devices. Where it differs is in the logic used to determine which devices get which content.

On an m dot site, the URL tells the server that the client is on a mobile site; on an adaptive site the URL is consistent but the server uses device information sent along with the request to determine the page delivered.

Every time you view a webpage on the internet you send information about the device and browser you are connecting from, it looks something like this:

User-Agent: Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7

In this instance, I am using an iPhone and my browser is Safari. So, much like an m dot site, the web server knows I am using a mobile, and sends the mobile content.

This ability to switch content (templates) based on server-side device detection is the heart of adaptive design.

James Gurd, Owner & Lead Consultant at Digital Juggler:

I like the clear distinction of defining AWD as using server side techniques to customise the assets/contents served based on device/browser and RWD as using client-side, or browser-based, techniques.

RESS effectively straddles the two. You're using a responsive code base and RWD principles but using server side techniques as well (I'll defer to the more technically versed to explain the details).

Justin Taylor, MD at Graphitas: 

Adaptive web design will typically use a completely different set of designs and templates for each platform being targeted.

As a result, designers will create a desktop version of a website and will then design a separate mobile version (and possibly a separate tablet version also). 

Responsive web design on the other hand comprises of a single design with a fluid layout that adjusts to screen width of the device, meaning that only one set of page templates need to be created and maintained.

The two routes are often confused as both are essentially methods of targeting mobile devices, therefore perform a very similar role from a users perspective.

The easiest way to determine if a layout is responsive is to view the site on a desktop computer and re-size the browser window, if the layout re-flows and changes relevant to the width of the browser window, you can be fairly sure the site you are looking at is responsive.

Where do you think the confusion lies between adaptive and responsive?

Stuart McMillan: 

I think the confusion is understandable, given that we’ve historically had to navigate to different URLs to see different desktop and mobile content.

Now, there are two technologies which deliver what appear to be similar interfaces, using a single URL.

Many people just look at the interface as shown on the screen and don’t consider the underlying technology and in this circumstance, 'Responsive' is the term that seemed to catch on first.

Ryan Webb, digital development director at equimedia:

In my experience, the main confusion arises because people don’t really appreciate that there is an alternative to RWD. The phrase 'responsive' is often mistakenly used as a generic term, rather than being clear that it is only one option for a website to be optimised across devices.

It’s a little bit like someone saying that everyone should have a WordPress website because it allows you to manage your content easily…… when we all know that WordPress is just one of the many CMS solutions available and may or may not be the right solution for you.

Even in various articles I’ve read where the author is trying to explain the difference between the different approaches, they incorrectly make a statement such as “it is now becoming increasingly important to ensure your website is responsive”.

What they mean to say is that “it is becoming increasingly important to ensure you have a website that works well across devices of all sizes”.

James Gurd:

I think the confusion lies in the misconception that a RWD solution can't adapt content to suit distinct device/browser user behaviour patterns.

A RWD solution doesn't have to serve the same content to everyone, only changing the page template based on break-points. You can use adaptive techniques on a responsive site – the two aren't mutually exclusive.

So I might define my break points and my template reflows to a single column layout on smartphones (responsive) but I also hide some content as it's not relevant to mobile users (adaptive).

The key point is this – do you need different code bases for each site or are you using one core responsive code base for desktop, tablet and mobile?

Yes, there is debate. Yes, people use different definitions.

In the report we just launched, our aim was to stick to one clear distinction and base the report around that, to help focus people on this definition and then understand the implications of each option, rather than debating definitions that seem to go round in constant circles.

When should businesses consider using an adaptive approach? 

Firstly, I actually think that the best solutions use a blend of techniques from both approaches.

However, I would say that adaptive should be considered if you meet these criteria:

  • You have requirements that are radically different between different devices.
  • You have a sufficient diversity of devices that you can justify different templates.
  • You can design templates that cumulatively deliver more benefit than having a one-size-fits-all solution.
  • You have sufficient resource to maintain and develop different templates (and know that the resource is best spent working on multiple templates, instead of new, universal, functionality).

Lufthansa's adaptive approach: 

The desktop site is geared towards search and booking, while the adaptive mobile site is more for customers who have already booked, with flight status, check-in etc. 

 

Ryan Webb:

We always recommend starting with your target audience; how do they engage with your website and what do they expect across different devices?

If your audience expect the same experience on a smartphone as on desktop, then it is likely that a responsive solution will work for you.

However, if your audience expect to be able to do different things (for example research/browse on desktop but respond/buy on smartphone) then adaptive may be better.

Unfortunately, it’s not that simple and other factors come into the decision making process such as budget, technology platform, technical ability, technical resource and whether you are starting from scratch.

And of course, don’t forget the HiPPO (it seems that RWD is often seen as the'“Ronaldo' option for CEOs).

Justin Taylor:

I'm of the opinion that websites should be designed for user experience, therefore the decision on responsive or adaptive techniques should be made with the user in mind.

Users are the one component that REALLY matter when creating websites as ultimately we want them to interact, purchase or convert on some level.

My advice is to design a site which works for a user then decide if it should be build using adaptive or responsive.

Graham Charlton

Published 28 May, 2014 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

Comments (5)

Avatar-blank-50x50

Richard Cherry

I think you wrote a cool post on adaptive web design and how it differs from responsive web design. I agree that you should do adaptive web design if you have something such as requirements that are radically different between different devices. It can be a tough process, but it is worth it for the clients. Adaptive web design can be a great concept for overall web design.

about 2 years ago

Matthew Lawson

Matthew Lawson, eCommerce Director at loveholidays.com

Good post!

My view is, if you ever want to aspire to having a fast experience for your mobile customers, adaptive is the only way. To achieve the one second load goal set by Google it will be by only taking stuff away and responsive simply doesn't help this, no matter how awesome the design.

You can then compound this aspiration by the fact that your customers are likely to be using their devices differently and at different stages of the journey and any good experience would know this and adapt to this.

almost 2 years ago

Avatar-blank-50x50

Deri Jones, CEO at SciVisum.co.uk

wiki has a slightly differet definition at the moment:
> builds a model of user activity and modifies the information and/or presentation of information to the user in order to better address the user's needs.

Where I guess 'model of user activity' is wider than 'what device is the user on'.

Don't forget, when planning to move your site to AWD that you will need to review your 24/7 user experience monitoring and load testing specs: due to the obvious fact that that you have more user types, who are being served different content and thus may well each end up with different page speeds / user experience when the site is busy.

If you not been using android and iphone/ipad browsers in your regular 24/7 monitoring reports, it is time to add them.

almost 2 years ago

Avatar-blank-50x50

Jason Goldberg, VP Strategy at Razorfish

While I'm a big fan of Econsultancy, the definition of "Adaptive Design" seems to be a topic that you consistently gets wrong.

"Responsive Design" was coined by Ethan Marcole.
On May 25, 2010, when Ethan Marcotte coined the phrase “responsive web design,” he defined it as using fluid grids, flexible images, and media queries to deliver elegant visual experiences.

"Adaptive Design" was coined by Aaron Gustafson
To Gustafson, adaptive design is another term for progressive enhancement, “a layered approach that rises to meet a user’s “needs” by paying attention to the context within which a page is accessed (a combination of the browser’s capabilities and, to a lesser extent, the medium in which it is operating) and adapting the user experience accordingly”

Ethans definition of Responsive Design very clearly defines the specific tactics (fluid grids, media queries) that are used in RWD. Aarons definition is clearly a philosophy w/o specific tactics. In fact, Aaron has repeatedly said that RWD is a set of tactics that can be used to achieve Adaptive Design.

In November of 2011, Aaron posted his views on Adaptive vs. Responsive, on his own blog: (http://blog.easy-designs.net/archives/on-adaptive-vs-responsive-web-design/)

“Adaptive web design,” as I use it, is about creating interfaces that adapt to the user’s capabilities (in terms of both form and function). To me, “adaptive web design” is just another term for “progressive enhancement” of which responsive web design can (an often should) be an integral part, but is a more holistic approach to web design in that it also takes into account varying levels of markup, CSS, JavaScript and assistive technology support.

Many sites, including eConsultancy mistakenly to define Adaptive to be a specific set of alternative tactics to responsive design. It's a great concept as long as you're willing to ignore the inventor of the term.

Google has a great set of definitions in their own guidelines for supporting mobile devices:
https://developers.google.com/webmasters/smartphone-sites/

1. Responsive Design - consistent with Aarons definition. fluid grids, flexible images, and media queries to do client side adaption.

2. Dynamic Serving - Using server side techniques to serve different HTML for one URL depending on the user-agent,

3. Separate mobile site - redirects users to a different URL depending on the user-agent

Adaptive Design would include #1, and #2.

You guys are too good at journalism to keep propagating the erroneous definition.

almost 2 years ago

Avatar-blank-50x50

Shinu Nissi, Web Designer at Nissi Infotech

One of the greatest advantages of AWD over RWD is the ability to segment mobile traffic and deliver device specific experiences. http://www.nissiinfotech.com

3 months ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.