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).But how is this achieved? In a post written in December entitled Why 2013 Is the Year of Responsive Web Design, Mashable founder and CEO Pete Cashmore explained it like this:
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 DesignIn 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):
Whereas Janine Warner at Digital Family explains the differences like this:
- Set or relative widths
- Device & resolution driven media queries
- Relative widths
- Content & design driven media queries
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.Janine also mentions Aaron Gustafson, who literally wrote the book on "Adaptive Web Design" and who seems to draw similar distinctions, albeit using different language:
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:
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.