Summary: In a recent internal discussion here at VDW about mobile options for client websites, it became apparent that we each had our own ideas about what "responsive web design" was, so I thought it was worth posting about so we can (hopefully) get the nomenclature of the modern web all squared away once and for all. So let's dive in and see if we can determine and clearly define the differences between "responsive design", "adaptive design", "liquid/fluid layout". And what, if anything, does all of this have to do with mobile? If you'd like to be spared the journey, skip to the bottom for the simplified definitions.
Before I start parsing the nuanced definitions of each of these types of web design, let's first take a look at the more general and commonly accepted definitions. Wikipedia describes "responsive design"this way:
Responsive web design (often abbreviated to RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
In simple terms, a responsive web design uses "media queries" to figure out what resolution of device it's being served on. Flexible images and fluid grids then size correctly to fit the screen.
Cashmore also mentions the A List Apart article "Responsive Web Design", in which developer Ethan Marcotte originally coined the term. Read that whole articleif you want a clear understanding of what RWD is all about, but I think this bit from Marcotte's conclusion summarizes the technical side nicely:
Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.
The Evolution of Mobile Web Design
In the "good old days" of web design, sites were built using fixed widths for columns, which wouldn't change regardless of monitor resolution or device screen size. To cater to a world that was seeing increased variance in monitor resolution and aspect ratio (wide screen, etc.), fluid design or "liquid layout" became increasingly common in web design/development. Essentially fluid web design involves columns that have relative widths (percentages) and they adjust proportionately to each other to fit the screen (or window) they're being viewed on. None of that is new. What's relatively new is the ability to adjust layout and show/hide various items based on "media queries". Early on, web developers began adapting to the "mobile era" by creating "mobile websites" - stripped down and limited versions of their sites that were built for smaller screens. The problem in recent years has been the explosion in mobile web, both on smartphones and tablets. There are now literally thousands of different mobile devices out there, each with their own screen resolutions, etc. and people increasingly want to be able to do more on these devices. But the idea that users (and their devices) would be well served by identical user experiences is preposterous. And that's where media queries come in - allowing websites to detect specific screen size ranges (among many other things) and adjust the layout and placement of elements of a web page to best serve the user. Often this involves stacking page elements, reducing from 4 columns to 3, 3 to 2, etc. even when just switching from landscape to portrait view on a phone. Various other header and footer elements may also be rearranged. Using media queries in conjunction with a fluid layout is essentially what RWD boils down to. To see some great examples of responsive design, check out this article on The Next Web and actually pull up some of the example websites to experience responsive design for yourself. In this case, seeing is really the only way to understand it, which is what also makes Marcotte's articleso great, because he links to several versions of a page as he ads more "responsive" elements. Check out both pieces and test the examples by resizing your browser window and if you have a smartphone and/or tablet, take a look at how the same sites look on those devices as well.
Responsive Design vs. Adaptive Design - What's the Difference?
Let's return for a moment to what led to our internal discussion about just what RWD is - different understandings of the definition. After we talked it out, we all essentially came to understand that what I described above is what "responsive web design" is. But then came the question, "Now, is that the same as adaptive design, or is that something else all together?". Crap.... Apparently there's a difference, or at least a lot of people think there is. The web is awash with blog posts about "the difference between adaptive and responsive design", but there doesn't appear to be consensus about the distinctions. Allison Grayce at Treehouse, in a YouTube video posted in Nov., contrasts responsive and adaptive design this way (emphasis mine):
Responsive design uses media queries to apply CSS rules based on screen size (learn more about creating responsive designs with media queries). Adaptive design can be set up with media queries, but many adaptive designs rely on a more sophisticated device detection scripts that run on the server and are transparent to the user. In the case of adaptive designs, if you visit a website with a mobile device you may see a very different version of the site, than if you visit the page with a desktop computer.
“Responsive web design,” as coined by Ethan Marcotte, means “fluid grids, fluid images/media & media queries.” “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.
Confused yet? Perhaps not if you're a developer - but what about the rest of us? I'm an SEO, not a technical person, and so I only know enough on the development side to get myself in trouble. Still struggling to understand exactly the technological differences between responsive and adaptive web design, I did a little more digging and at the same time bugged our developers for their simplified explanations. Ben Glassman, our director of web development, Skyped me the following:
It's about tailoring the user experience to the browser capabilities... everybody gets a basic experience, but the more advanced your browser/platform is, the more advanced your experience.
To emphasis his point, Ben directed me to this site where you can actually where you can actually download chapter 1 of Gustafson's book for free, which offers essentially a more in depth similar explanation and some helpful examples. Essentially, as Gustafson stated in the excerpt above, "Adaptive Web Design" is the same thing as "Progressive Enhancement" - but it's not necessarily tied to any specific technology or strategy, it's the grander philosophy of developing sites that offer ALL users at least some sort of experience, rather than throwing errors and telling users with older browsers/devices that they're SOL. That was the old way of handling these issues, known as "graceful degradation" or "fault tolerance". Developers used to develop for the latest and sexiest technologies, and largely ignore issues that might arise for other users not taking advantage of modern browsers/devices. "Adaptive design" (progressive enhancement) essentially means that developers think about all users and aim to deliver content to all of them, without throwing errors or delivering any sort of negative UX (user experience). So, how does "responsive design" actually relate to "adaptive design"? Basically you can think of "responsive" as a subset of "adaptive", that deals mainly with page layout on various screens. Personally I find it even easier to simply recognize that responsive design is one discipline employed to achieve "adaptive design" ends. Not to beat a dead horse, but I like how this answer on Quoraexplains it as well:
Adaptive Design is the title of the book by Aaron Gustafson so I'm guessing he's recognized as on an authority of term. He sites adaptive design as including the CSS media queries of Responsive Design, but also adding Javascript based enhancements to change the site's HTML markup based off the capabilities of the device. This is also called "Progressive Enhancement" An example is you might have a side bar navigation on the desktop size version of the site, and then when viewed on a smartphone the menu becomes a select list to save space in the interface. Another example is you might offer functionally on mobile device not available on a desktop. Say you had a restaurant website - When it's viewed on a mobile device that's location aware with GPS, a panel appears saying "Get directions to our restaurant from your location". Desktops don't know their location so it doesn't appear to them.
Starting to make a little more sense now? Well, it is to me, so let's recap with some quick, simplified definitions...
Types of Web Design
Mobile web design - This is when you actually design a completely separate site specifically for mobile devices. Many websites, especially those that are heavy on text content, may require a dedicated "mobile" site for usability and to improve conversion rates from mobile devices.
Parallel mobile web sites - Sites developed for mobile that exist on separate URLs, such as m.domain.com or domain.com/mobile
Dynamic mobile web sites - Users see the same URLs as the main website but they are shown a mobile site when a mobile device is detected. Benefits of both types of mobile site are compared to RWD in this SEOMoz webinar.
Graceful degradation - Also called "fault tolerance", graceful degradation is the antiquated way developers used to handle website visits from users with older devices/browsers. Essentially developers chased the latest craze and UX suffered for users who didn't keep up as incompatibility led to errors and sites that would appear broken to some users.
Fluid Design - Fluid design, or liquid layout, simply means that page elements have relative widths (percentages) that are proportionate to each other and adjust automatically based on screen size. These don't however consider how items will appear once resized - they're simply stretched/shrunk without regard to how they may appear on screens with different resolutions, which is often problematic on small mobile screens.
Adaptive Web Design - AWD is a new-ish buzzword that essentially means the same thing "progressive enhancement" did earlier in the last decade - Developers should ensure that ALL users are able to consume a site's content without a negative UX (user experience). Instead of hanging users with older devices/browsers out to dry completely like in the days of graceful degradation, developers create sites that will allow for an error free, positive user experience for everyone. The site "adapts" to all environments, but the UX is "progressively enhanced" for those using newer browsers/devices. Essentially "adaptive design" is "progressive enhancement" for the modern, mobile era because it includes more advanced levels of "enhancement" such as detecting mobile users' location and providing directions. The site's ability to "adapt" is heavily dependent on the capabilities of the individual user's browser and/or device.
Responsive Web Design - Though one could be forgiven for confusing responsive web design with adaptive web design, they really aren't the same. RWD is actually one way to go about achieving AWD, though not exactly a "subset" of it, because RWD still stands on its own. Responsive design is essentially a way to use fluid grids, flexible images, and media queries to build a site that delivers a very similar experience for users on a myriad of different devices after media queries determine screen sizes. Items may be stacked and organized in different ways, but essentially the same site is served up to users on all devices/screen sizes. RWD basically deals with layout, which again certainly can be part of AWD, but AWD is less about simple "layout" and more about available technology.
So there you have it, all of the various ways web designers/developers create sites for the modern, multi-device world. Do you disagree with any of my definitions? Please let me know what you take issue with in the comments below, because again, as an SEO I could be misstating something or using developer language incorrectly. Even if I simply left something out you think deserves to be in this post or if you just have questions, please post them below.
