Apps

What is the difference between responsive vs. adaptive web design?

Ryan Boudreaux clears up some of the confusion about what is meant by responsive vs. adaptive web design. While similar in their goal, the approaches are different.

One of the hottest issues in web developer circles this year is accessibility of websites on various devices other than the standard desktop or laptop screens. While the subject is not new, it has taken on a relatively new approach with respect to how to deal with the opportunities ahead.

With mobile devices, tablets, and similar gadgets gaining ground faster than most can keep up, it behooves organizational stakeholders to address the issues encompassing user interactions and acceptance of their websites on the latest diminutive gizmos. Oh, and don't forget other devices acquiring web-enabled screens such as refrigerators, washing machine,s and other everyday appliances.

Users who access your websites through their mobile devices or other display screens really do not care what method you use, just as long as that they can effectively navigate your website on whatever device they happen to be using. For that reason, the two methods described in this article have been devised for web developers to meet the challenge, and while responsive (RWD) and adaptive (AWD) design methods are both addressing the issue for rendering websites on mobile devices, there are subtle differences between them that I will attempt to explain.

RWD

The phrase Responsive Web Design was coined several years ago by Ethan Marcotte and first introduced in his A List Apart article, "Responsive Web Design" and later, his book, A Book Apart - Responsive Web Design. Marcotte's key points of RWD are listed below. In my post on the subject, "How to get started with Responsive Web Design," I described how a responsive website design starts with the primary task of incorporating CSS3, media queries, the @media rule, and fluid grids that use percentages to create a flexible foundation. These key points, as well as the use of EMs, flexible images, flexible videos, and fluid type, allow the responsive website to adapt its layout to the viewing device, user agent, and environment.

The distilled definition of a responsive web design is that it will fluidly change and respond to fit any screen or device size.

AWD

The phrase Adaptive Web Design was coined by Aaron Gustafson, who wrote the book of the same title. It essentially utilizes many of the components of progressive enhancement (PE) as a way to define the set of design methods that focus on the user and not the browser. Using a predefined set of layout sizes based on device screen size along with CSS and JavaScript, the AWD approach adapts to the detected device. A recent post, "Understanding progressive enhancement techniques in web design" described the layers that make up the adaptive approach.

The three layers of Progressive Enhancement:

  • Content layer = rich semantic HTML markup
  • Presentation layer = CSS and styling
  • Client-side scripting layer = JavaScript or jQuery behaviors

In a recent podcast interview, Aaron describes how the term was selected; he wanted to disambiguate his book from the Filament Group's book, "Designing with Progressive Enhancement". Aaron goes on to mention in the podcast:

"So, we were trying to think of, you know, what exactly does all of this stuff really mean, and it was about creating rich, adaptable experiences that tailor themselves to the particular device that you were working with. So, the way that I view progressive enhancement is very much analogous to adaptive web design. It's essentially the same concept."

The condensed definition of an adaptive design is that it will change to fit a predetermined set of screen and device sizes.

Comparisons and distinctions

The biggest similarity between the two methods is that they both allow websites to be viewed in mobile devices and various screen sizes, ultimately providing visitors with a better mobile user experience. Where the two methods differ is in their delivery of the responsive/adaptive structures: RWD relying on flexible and fluid grids, and AWD relying on predefined screen sizes. One of the main distinctions between the two is that RWD might take more code and implementation strategies with the fluid grids, CSS, and flexible foundations, while AWD has a streamlined, layered approach, which utilizes scripting to assist with adapting to various devices and screen sizes.

Some would argue that the terms used invite confusion, in particular, responsive, and might not accurately reflect what is actually occurring when a website changes its design according to the particular mobile device being used. Paul Gordon argues this point in his blog post, "Adaptive or Responsive Design."

If you are interested in reviewing live examples of known web sites that utilize the methods described in this piece, check out this list of 70 Examples of Modern Responsive Web Design from Splashnology Web Design and Development (both AWD and RWD are represented).

One of the websites on the list includes Abberdein, which utilizes RWD in its WordPress Whiteboard framework, and includes several  features in the code such as div column widths set as a percentage (%). It also utilizes the Less Framework CSS grid system, which  contains four layouts and three sets of typography presets, all based on a single grid.

An example of a website that utilizes AWD would be the Screaming Frog, a search engine marketing agency, which utilizes @media query  and @media screen properties in its CSS to set breakpoints at set pixel widths depending on the device recognized in the browser window.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

23 comments
ngl817
ngl817

Adaptive web design has nothing to do with responsive web design. Adaptive web design is about progressive enhancement, which ensures that the content of a web page will never be obscured by the user's browser limitation. At the very least, for the oldest browser, a semantically rich html document will render on the user's computer. From there, styles can be added, and javascript can be added. But neither style nor interactivity should in any way be a requirement of communicating the content on the page.


Even the best responsive web site should be developed adaptively.

Emmn
Emmn

Responsive design/development is better for the overall flow of a webpage. This is especially important for backwards compatibility since earlier versions of IE don't render media queries, so AWD would never look work on those screens. But AWD is also a necessary component of responsive design, in my experience, to allow us to set breakpoints for certain elements to ensure they continue to look and funciton well on any sized screen. It's 2014, and I still don't understand why we need the distinction between the two. RWD and AWD go hand-in-hand. One without the other just never delivers the best solution.

anirban09P
anirban09P

True responsive design is fluid, using CSS3 media queries to respond to any screen sizes. With the use of this CSS3 module, you can create a flexible grid where text can wrap and images can shrink to adjust along with your browser.  For designers, this is similar to adjusting a text box in Photoshop and having the copy adjust to fill the height and width of the box.

anirban09P
anirban09P

This is a nice article. You have very well differentiated between RWD and AWD. I agree with you r analysis that RWd will be the preffered choice and i say it is the logical choice. The market dynamics are changing.

mihirrao
mihirrao

I wanted to thank you for this article for its simple and clear distinction between the 2 web design methodologies. I have read it no less than 5 times in the past 2 months to keep the simple distinctions in mind.

jeff mignon
jeff mignon

In our company we combine both AWD and RWD. We develop three templates -- one for each main device -- and all of them are fluid.

edelente
edelente

I usually think of responsive as a series of liquid layouts.  This site does a great job of comparing and contrasting some of these things. : http://liquidapsive.com/

Is that an oversimplification?

larryqueling
larryqueling

Depending on who you talk to, adaptive web design is either a subset of responsive design - melissa @ Connecticut Web Design Company

randimanchezu
randimanchezu

There has been a lot of chatter in the web design world recently about something called Responsive/adaptive web design.

sushant21
sushant21

Hi Ryan, Nice Post. you have very well differentiated between RWD and AWD. I agree with you r analysis that RWd will be the preffered choice and i say it is the logical choice. The market dynamics are changing. The 2013 ComScore mobile report states that ‘Smartphone’s have surpassed 125 million U.S. consumers and tablets are now owned by more than 50 million. People today are using more than one device computer, tablet, phone, etc and they use it in complimentary fashion. In this scenario, it becomes imminent to take the different form factors and capabilities of each device into account when designing their website. In my quest to learn more about the RWD, I have registered for a webinar on Best practices in Responsive Web Design, it looks a promising one http://j.mp/125MSXv

quantumcloud
quantumcloud

You will find few websites developed based on AWD currently. RWD has become the clear winner between the two approaches already.

iwangchungfofun
iwangchungfofun

Can someone please help clarify if AWD and/or RWD supports minimal constraints? In other words, could I specificy that the resolution not collapse beyond a certain width? Thanks!

jebswebs
jebswebs

I was considering writing my own article about this topic, but I think I will refer others here. I will write something, but it will be to take the topic from a difference perspective, that being the effect on users with assistive technology and general accessibility issues. Thank you for the clear explanation of this hot topic.

setanta5
setanta5

I am not a web designer, rather I handle all the machinery behind the beautiful facade (PHP, SQL, et al), but I certainly have an appreciation and admiration for beautiful web design. It hadn't occurred to me that there was an alternative to RWD. Interesting. What I really liked about this article, though, was the 70 sites which handle RWD in their own individual way, that was fascinating!

Kevin Morrison
Kevin Morrison

To The Other End - you are only one person and the web designer needs to take into consideration for multiple users. Your resolution being 2560*1600 is not important to the designer if only a hand full of the visitors to the site have this size resolution. If I had to calculate all the users that visit my sites with that resolution it would not even be 3% and I am not going to cater to 3% of my sites visitors just so they can see more above the fold.

dogknees
dogknees

Do these techniques help with large hi-res screens? Are developers building sites the effectively make use of resolutions like 2560*1600 and aspect ratios of 21/9? This is my biggest complaint with most site's design. I spend money on large screens so I can see more information at a time, not the same stuff re-arranged.

dogknees
dogknees

If you're going to build a site that works well for all your users, then you should include ANY resolution. My res might be rare now, but 4K is coming and what I'm currently running will be at the small end. Why not do the work once and do it properly, rather than having to go back and modify things with the likely introduction of bugs that entails? It's not just at the extremes, my res at work is 1920*1080, which is pretty common, but most sites, including TechRepublic, don't even make effective use of that. At least 30% of the screen is blank.

Editor's Picks