Responsive design vs. adaptive design: what's the difference + why does it matter?

One size fits all. It’s been many years since that sentence could be used in reference to digital design. It’s true, once upon a time digital designers only had to worry about designing for desktop. However, since the advent of mobile devices, this way of working simply hasn’t cut it anymore.

Since the evolution of multiple screen sizes, digital designers have been locked in debates regarding the best way to create for the continually shifting ways users are interacting with constantly shifting screen sizes in a fluid and transferable way.

The two topics du jour recently have been “Adaptive Web Design” and “Responsive Web Design”. While both schools meet Google recommendations and can provide flexible and robust UX performance, each school has pros and cons (of course).

Adaptive Web Design

To begin with, Adaptive Web Design (AWD) is similar to the old school method of fixed designs - they use static layouts and respond based on breakpoints. To cut a long story short, this means designing 4-6 different screen widths but having almost total control over the content and strategy over your website.

Now those different screen widths can mean extra work designing AND developing what is effectively up to 6 different websites. It allows you to create multiple experiences based on the device the user is coming to your site on. It can allow for entirely bespoke experiences to be built, increasing the room for creativity and brand immersion. When combined with the relevant insights and data (which are ever important) this can be used to target users based on where they come from, and what they are looking for, allowing us to tailor how they experience a website almost exactly to their needs.

However, this level of creative freedom and flexibility doesn’t necessarily mean that adaptive design is right for you. We here at Studio 77 have thrown together a small list for your convenience.

You should consider using Adaptive design if:

You have the resource to create different experiences for each device.

Device-specific experiences are a necessity for your users' journey.

You can handle and maintain adaptive templates and resources.

Your user base is accessing your information on a lot of different devices (we recommend analytics show 70% of users are on a single device, and adaptive UI might not be for you).

Responsive Web Design

Onto the flip side, Responsive Web Design (RWD). After the grand and weighty promises of complete customisation made by Adaptive Design, Responsive design offers a more straightforward way to create and maintain a website. The, however, is comparatively less customisation. That being said, that isn’t necessarily a bad thing as most sites just don’t need the multiple experiences that AWD offers. Responsive Web design offers a more fluid solution, creating one website that responds to the screen size no matter what device the users on. RWD uses CSS media queries to change styles based on what device the user is currently using, loading the page layout based in that devices screen size.

RWD shuffles and moves content around the screen, using one set flow fluidly across multiple devices and browsers. This, of course, means that visual hierarchy takes centre stage to keep the design working as content shifts around devices. Some designers may saw that RWD is more challenging as it requires planning for an almost infinite amount of screen sizes. However, even with this caveat, Responsive Web Design always results in cleaner and easier to maintain code, and better adaptability.

Here is a list summarising the advantages of using Responsive Web Design:

It’s more pleasant for readers as there are no inherent limits on screen dimensions. AWD’s will have drastically different experiences based on the device they are being viewed on. While this may sound cool, it can be disorientating for users that will switch devices to use your site. RWD’s guarantee a smooth experience no matter how a user interacts with a website.

Responsive Websites generate cleaner code and load quicker. AWD’s will load all possible layouts in the background, eating into users data if they are on the go. RWD’s inherently work across all platforms, all the time. It’s as close as you can get too “One Website fits all” as you can get in our multi-device world.

It’s future-proof. RWD’s remove screen size limitations, meaning a well designed and built site will look beautiful on the next Samsung or iPhone (not to mention tablets and smartwatches), regardless of their screen dimensions.

In summary, both design styles offer pros and cons. However, they definitely cater to very separate digital needs. If your site needs to offer different users different experiences and requires large amounts of content customisation, the Adaptive Design is the road to go down. However, if your users are looking for consistency in their user journey and brand experience, then Responsive Web Design will serve you much better.

Looking for a website yourself, or have more questions? Why not get in touch with our team for a consultation to get you on the right path.