The Differences Between an Adaptive & Responsive Web Design

by | July 15, 2014


In the big world of web design, there are two top contenders you’ll have to choose between when creating your website: Responsive Web Design and Adaptive Web Design.

The difference between them is simple enough, but deciding which is best for you may not be. While you have to keep your own resources in mind, website performance and speed are huge factors that must not be overlooked.

What is Responsive Web Design?

RWD is, at its core, web design that will change of its own accord depending on what viewing device the browser is using.

How does it do this?

RWD relies on flexible, fluid grids to allow the site to adjust based on the device. So, what you see on your laptop is what you’ll see on your phone – just in a different size.

What is Adaptive Web Design?

AWD, on the other hand, will change to adapt to predefined screen sizes. It focuses more on the users’ experiences as opposed to the browser. It uses layers of “Progressive Enhancement,” meaning that you start with a preset foundation and then add the bells and whistles as you go along. There’s more control to what shows up on each screen with this method, as you can pick and choose how to layer the design based on what device it will be shown on.

How do these differences affect you?

The benefits of RWD are obvious: there is more consistency across all platforms, which makes it easier for users to navigate your site from any device. It is also better for your site’s SEO. In addition, there’s less development involved because it’s all one site, changing on its own for each device.

AWD comes across as more complicated. You’ll have to spend more time and money developing your site, as it will really be multiple sites designed to match up with their respective device.

The plus side of AWD? It’s much faster than RWD on mobile devices because your site will be truly optimized for them. You can resize images and eliminate parts of your site that aren’t necessary for the mobile user.

In fact, response times for AWD sites on mobile devices are over 40% quicker than RWD sites, because less data is used for them. However, when it comes to desktop or laptop versions of sites, the differences in speed are basically nonexistent.

So, how do I choose?

The question you have to ask yourself: Will the typical user be looking at your site on a mobile device or a computer?

If having a speedy mobile site would give you a great advantage, an AWD site may be the better choice. But if most of your users will be looking at your site from their desks with a 15 inch screen, you can probably save yourself some hassle and boost SEO with a RWD site.

Apica Product Team