Adaptive Web Design vs Responsive Web Design

Well we all know that mobile had conquered the world. If you are a business and don’t have a mobile friendly site, you are in serious trouble unless you don’t want your website to generate revenue for you. Me being a web developer, also if I can’t build mobile friendly website these days I have to find alternative source of income apart from web development.

Coming to topic now. Over the past few years, two approaches to mobile website had emerged. One is called Adaptive Web Design and other being named Responsive Web Design. They tend to work in similar way, responding to the devices screen size and showing the web content based on those resolutions.

Adaptive Web Design

Adaptive Web Design are targeted for different screen sizes within predefined device sizes. For example you can think of case when you target the web design for desktop and mobile only, it’s based on adaptive design principle. Website will be responding to certain device metrics and will appear differently only on desktop and mobile devices. Normally in these kind of cases, desktop website is defaulted to the tablet devices.

Adaptive Web Design uses the principle of creating distinct templates optimised for each devices viz desktop, mobile or tablet. A predefined set of content are served to various devices. For example the content shown on the mobile devices may vary from the content shown on desktop devices.

Pros of Adaptive Web Design:

  1. Website loads much faster
  2. Control on how to display content specifically on wider range of devices

Cons of Adaptive Web Design:

  1. Needs extra time, effort and budget for development
  2. Maintenance can be costly too, as you are maintaining multiple websites
  3. Not recommended as best practices for SEO

Responsive Web Design

Responsive Web Design are based on the fluid layout principles, and responds to the device size using media queries. Media queries are written to target various breakpoints.

The main philosophy behind the responsive web design is single template for all devices. Using media queries to target various breakpoints, content are shown or hidden, or adjusted to fit in the screen size.

Pros of Responsive Web Design:

  1. One website for all devices
  2. Design and Development is relatively cheaper
  3. Maintaining the website is cheaper too as you will be maintaining single website
  4. Recommended by Google as best practice for SEO Oriented Website

Cons of Responsive Web Design:

  1. Website might be bit slow if its content heavy
  2. Fair bit of testing around cross platform and multi devices are needed to achieve the best results


Here is the verdict, if you got decent budget and team, by team I meant team of designer, developer, SEO Manger, then adaptive is the way to go. Suggested for the websites that needs to show specific content across different devices. For example: separate mobile sites targeted for mobile customers and separate sites targeted for desktop customers.

But if you are not willing to spend lots of time and effort but yet want full functional web site, responsive web design is the way to go. With proper strategy, design philosophy and development knowledge, responsive web design works very well. Very much suggested for small to medium scaled website.

About Author

I am Robin - WordPress Developer based in Sydney. I work as Digital Developer. I do some projects now and then, and love blogging about WordPress and Web Design.