names, etc
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 apredefined 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 Designfrom 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 WordPressWhiteboard 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.