The web is constantly awash with buzz terms and acronyms, and keeping pace with them can be challenging. Three fairly similar-sounding terms now exist for three fairly similar approaches: Responsive Web Design (RWD), Adaptive Web Design (AWD), and Responsive Web Design + Server Side Components (RESS). Part of the confusion is that there is actually some overlap in all three of these. I am going to try to clear a little confusion here, and hopefully not add more…
But first, lets talk about me…
Having just written an article about AWD, I was surprised by some of the responses, with regards to AWD being old-hat, and terrible because it meant maintaining multiple layouts at once, and many other issues that just didn’t jive with my understanding of AWD. So I thought I should clarify my perspective…
My understanding of AWD matches this Wiki page, which quotes Aaron Gustafson, who I believe to be the one that coined the phrase. In that Wiki page, AWD is described as making decisions on the server as to which components, CSS, JS, etc., that the user should get, based on the device they are using to view the page at this moment. This approach reduces the delivered assets to only those that are needed for this user on this device.
Some other interpretations of AWD that I have found around the web involve maintaining different layout templates for different devices, which would be horrible, as I know, because I have done that before. It’s painstaking, frustrating, and extremely expensive, because you are basically maintaining multiple websites, all at once. This approach, to me, sounds like the exact antithesis of “Adaptive”. I’m not sure what it should be called, maybe “Redundant” or “Reiterative”.
Okay, now that that‘s cleared up…
So what is the difference between these three?
I’m glad you asked.
Responsive Web Design
RWD was coined by Ethan Marcotte in one of the seminal articles of web development. In it, he builds upon what is perhaps the seminal article of web development, A Dao of Web Design, by John Allsopp, by stating loosely that websites could work across all devices if they follow a pattern of a fluid grid, responsive images & videos, and the use of CSS media queries to make adjustments to the layout, depending on screen size.
RWD is basically one set of templates that is designed and coded to work on all devices, flowing from screen-size to screen-size, perhaps changing the appearance of things on the page, but always working with the same set of HTML, CSS and JS on all devices. This doesn’t mean you can’t fetch different content or display things differently from device-to-device, but you deliver the same set of templates to all devices.
Adaptive Web Design
As mentioned above, AWD was coined by Aaron Gustafson in his book Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement.
As also mentioned above, Aaron basically describes a server-side process that decides what components and assets to send to the device, based on what the device is. This means that desktop browsers might not get a “Call Us” component, and that mobile phone browsers might not get some crazy, large-screen, interactive map, but instead get a link to a store’s address, so their device’s navigation system can find that location itself.
Responsive Web Design + Server Side Components
Finally, RESS was coined by Luke Wroblewski in his article RESS: Responsive Design + Server Side Components. In it, Luke describes essentially the same thing that Aaron Gustafson describes with AWD: letting the server make choices, do the heavy-lifting, and customize the user experience based on their current device.
This is where AWD and RESS differ drastically from RWD: RWD users get all components and assets, regardless of their device, and then there is usually something on the front-end to make choices and perhaps alter the experience based on the device; AWD and RESS users get only what they need for their device. It’s really all about reducing deliverables, thus saving bandwidth, thus improving download speeds and time to render, thus making for a better user experience.
So, RWD sucks and I should use AWD or RESS, right?
Well here’s where I throw it all back in your face: you should use whichever approach works best for your project. :-)
As with most things web-development-related, there is no right or wrong answer, only lots and lots of shades of gray. If your project can work nicely via RWD (as this site does), then there’s really no need to build a bunch of elaborate server-side stuff. But if your project needs fancy components and modules on the desktop that won’t work very well on feature phones, maybe you should try to find an alternative. Even more, maybe you can mostly get away with RWD, but that “one component” is a real hassle; if it’s small enough maybe you can put it in the page and hide it for devices that shouldn’t get it, or maybe you leave it out and fetch it via Ajax for devices that can handle it. You’re the developer, you make the decision.
Happy devving,
Atg
The article describes the difference between RWD and AWD/RESS perfectly. I am currently trying to figure out the difference between AWD and RESS. Could you please elaborate on that?
Hey, Arno, thanks for the question.
The “bad version” of AWD and RESS are drastically different, in that this version of AWD either maintains multiple completely different websites or templates for differing devices, or sends everything to the device, then makes a bunch of changes there via JS, adapting to that device.
The “good version” of AWD and RESS are actually not all that different, other than RESS formerly conceptualizing the concept of “components” in the name: you basically detect something about the device on the server, and send that device only what it needs. Both of these are usually responsive in nature as well.
That was not very clear in the article, so thanks for bringing it up!