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 business owners to address the issues encompassing user interactions and acceptance of their websites on the latest 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 don’t care what method you use, just as long as that they can 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 and adaptive design methods are both addressing the issue for rendering websites on mobile devices, there are subtle differences between them.
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 responsive design are listed below. In Ryan Boudreaux’s post on the subject, "How to get started with Responsive Web Design," he describes 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.
The three layers of Progressive Enhancement:
• Content layer = rich semantic HTML markup
• Presentation layer = CSS and styling
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: responsive design relying on flexible and fluid grids, and adaptive design relying on predefined screen sizes. One of the main distinctions between the two is that responsive design might take more code and implementation strategies with the fluid grids, CSS, and flexible foundations, while adaptive design 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 adaptive design and responsive design are represented).
One of the websites on the list includes Abberdein, which utilizes responsive design 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 adaptive design 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.