Dec 18, 2014
Responsive vs. Adaptive Web Design, WTF?
As the market explodes with an array of new smart phones and web-ready devices screens of all shapes, sizes and resolutions have accompanied. How do you ensure your website looks great across all browsers, platforms and devices? You may have heard web designers and or developers use the phrase “Responsive Web Design” and/or “Adaptive Web Design,” and though they certainly relate to one another, I thought I’d explain the differences between the two.
Responsive Web Design
I prefer responsive design because it tends to feel more fluid but the truth is, there’s no right approach, in fact, in many projects we end up with a combination of both methods.
Responsive design incorporates fluid page elements that move and scale as you adjust the size of the viewport ensuring that no matter the native resolution of the device, the page will adjust accordingly and do its best to present content at scale rather than at a fixed size or position.
One reason responsive design is so popular is because it’s mobile-first. The release of Bootstrap 2.0, a front-end framework for creating websites and applications, was a major step towards making responsive design easy to implement. It also works with all major browsers and is an open-source framework, meaning that anyone can make changes to the tools or use it free of charge. Websites like MSNBC, Newsweek, Vogue, Lyft, and NASA use Bootstrap in some capacity. Oh, and it was created by a small team at Twitter, so if you’re familiar with that design, you’re familiar with a Bootstrap site.
Adaptive Web Design
Websites that use adaptive web design philosophies tend to be more “reactive,” as they adjust to a predetermined set of devices and screen sizes. That’s not a bad thing – you can make wonderful looking websites with adaptive design. You tend to have more control over presentation, UI, and element placement because you’re not trying to please all assortments of devices. For example, if your analytics say that the vast majority of your mobile visitors use iPhone 5 and only 1% visit on a Samsung Galaxy S5, your best bet is to ensure that iPhone 5 users accessing an optimal user-experience. Sure you don’t want to alienate the Galexy S5 folks but you do want to make sure your largest audience is at the top of your list.
The downside is that as more and more devices become available and their screen resolutions change, your site may start looking a little dated or glitch out in unexpected ways. A good rule of thumb for adaptive design is to design for three viewports: low-resolution for smartphones, medium-resolution for tablets, and high-resolution for computer monitors. You’ll probably want to go a step further and design both a high and low resolution version for each of the three variations just to be safe, but with more variables and different layouts for your site, the more potential for problems and extra maintenance in the long-term.
While I’m at it, here are a few additional posts that definitely worth a look:
9 Basic Principles of Responsive Web Design
