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 machines 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.
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
"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 distinctionsThe 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.