Responsive vs. Adaptive. Do you know the difference?

Posted in Design Life
Responsive vs. Adaptive. Do you know the difference?

If you’ve been paying attention to the latest web design trends, there’s been a lot of discussion about “web accessibility” — where users can access web-based information on devices other than a standard laptop or desktop screen. Mobile is definitely important, and it’s here to stay. There’s no doubt about that. But how do designers and developers effectively deal with the revolving door of technologies, gadgets, browsers, screen resolutions, etc.?

There are really two schools of thought (right now) when it comes to this issue — Responsive and Adaptive web design methods. They have some similarities, but I’m going to try to shed some light on their differences. And hopefully it’ll help YOU choose the best method for your next project!

Responsive Web Design

This method is based upon CSS3, media queries, and the “@media” rule — which use percentages to create a flexible framework for your website design. A truly responsive website can adapt its layout automatically to fit ANY screen or device size. This is achieved by feeding the same HTML code base to each device.

A responsive site truly gives all users an optimal experience — regardless of the device they’re using. However, as the designer / developer, you have less control over how things look with percentage-based scaling. There’s really no way to anticipate EVERY possible viewing scenario.

Adaptive Web Design

This method is basically a series of static web layouts based on breakpoints determined by the designer and developer. You might design a website based on 3 different sizes: 480 px (smartphones), 760 px (tablets), and 960 px (desktop). The server hosting the website detects the devices making requests to it, and sends out different versions of HTML and CSS code based on the characteristics of the device that has been detected.

Adaptive sites are typically faster-loading, because only the required resources are loaded for each visitor experience. However, it might be perceived as “less flexible” because the templates are fixed. If you’re on a smartphone, you get one design … If you’re on a tablet, you get another. Period. Predetermined templates give designers more control because you can always anticipate the breakpoints and what visitors will experience at those sizes.

Both methods allow websites to be viewed on mobile devices, at various screen sizes / resolutions … and that’s absolutely a GREAT THING! It’s really a “no-lose” situation when you choose to adapt a site design for mobile. Either way, you’ll be offering your clients (and their customers) a better experience than a desktop site alone.