Adaptive vs Responsive Web Design: similarities, differences, and how to choose.

Adaptive vs Responsive Web Design: similarities, differences, and how to choose.

150 150 admin


This is a follow-up post on our responsive web design article. We are back to expand on responsive, discuss the difference between responsive and adaptive, and how to choose between the two.

First, a recap on responsive:

Responsive web design (RWD) makes a website adjustable (screen size) to the devices where it’ll be viewed. It displays certain size and information when seen from a desktop computer, when seen from a tablet or when seen from a phone.

Usually, the smaller the screen/device, the less information it’ll display. One of the great advantages of RWD is that the same code serves mobile and desktop users; its disadvantage is that using the same code implies that the mobile version of the website loaded on smartphones has the same size and complexity as the desktop version. This means that smartphones typically have to download and sift through all the information even if it’s irrelevant to what will be displayed, which is the primary reason that responsive websites tend to be bloated and slow to load on mobile devices, instantaneously killing user experience and causing poor conversion.

Then, an intro to adaptive:

Adaptive web design (AWD) is server-side, meaning before the page is even delivered, the server (where the site is hosted) detects the devices making requests to it, and loads a version of the site that is optimized for its dimensions and native features. Functionality working on regular browsers may not work on a mobile platform, AWD allows that accomodatation to a mobile browser.

The biggest similarity between the two methods is that they both allow websites to be viewed in mobile devices and various screen sizes, ultimately providing visitors with a better mobile user experience. The main difference however is that the changes are made on the server side rather than the client side.

Furthermore, adaptive websites are designed to respond and adapt to different screen sizes using responsive techniques, and to adapt to different user requirements based on different device capabilities.

Adaptive vs Responsive

Finally, five recommendations to choose between the two methods to optimize web content for mobile consumption:

  1. Analyze data: what does it say about mobile users? What kind of information do these users look for? Creating two layouts might be the solution: one that emphasizes the information mobile users want, another one that makes sense for desktop users.
    The idea behind responsive design is to keep the content and functionality the same, and to optimize the layout for the device’s screen size. But if the content and functionality shouldn’t be the same for mobile and desktop users, RWD may be a bad choice.
    The final decider should be your end users. Think about them before you start building or improving your site.
  2. When website analytics show that a high percentage of mobile users tend to use one of just a few devices, making an adaptive website that caters to those devices is not a bad idea. On the other hand, if visitors are using a wide variety of mobile devices, a responsive design would be a better choice.
  3. Invite your developers into the conversation as early as possible. Discuss coding restrictions and align your visions for the project. Keep constant and open communication between designers and developers.
  4. Determine the differences and similarities between page elements and develop common patterns for page templates. Be available for QA or an initial walk-thru of the coded files to ensure that each page renders as you had envisioned.
  5. For developers: the AWD approach may work better for clients with a smaller budget as you would only need to develop layouts for a few screen sizes rather than planning for an optimal experience for all.
  6. Bonus tip: always ask the web. For the clearest visual example out there of how these both work, play around this site by Nick Davison. Share it with your development, design, or client team.