Responsive vs. adaptive design: How do they compare?

Profile picture of Suzanne Scacca

{date}

{#hash1}

{#hash2}

Illustrations by {name}

Responsive and adaptive web design both ensure that your site will look its best at any viewport. But how do these methods differ?

4 min read

A fashion website shown on several screen sizes and viewports

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

With the many devices and browsers people use to connect to the internet these days, designers and developers can choose between creating a responsive website design or an adaptive one. Both methods help make the site look and act great across different viewports, yet there are significant differences in their workflow and even end results.


In this post, we’ll compare responsive vs. adaptive design and examine the use cases for each approach.



The difference between responsive and adaptive web design


At their core, responsive and adaptive design accomplish the same thing. They enable web designers to make a website look good and perform as intended regardless of how wide or narrow the screen is that it’s viewed on.



What is responsive design?


The basic idea behind responsive design is that the website design fluidly adjusts to fit any browser or screen it’s viewed in.


Responsive websites scale to achieve an optimal fit for the available viewport size. When browsing a responsive website (like this one), you can drag to resize your browser window on desktop, and see how it rearranges its design and content accordingly.


Responsive web design was first introduced in 2010, in Ethan Marcotte’s article “Responsive Web Design”. In it, he correctly anticipated a shift in devices that would be used to access the web and, as a result, proposed a new device-centric way of designing websites.


In order to create a website that’s truly responsive, a designer must make careful adjustments to the website’s various breakpoints and how it resizes itself and its layout. This functionality can be coded into a website with CSS media queries or using advanced creation platforms like Editor X.



A responsive website design in three breakpoints
Responsive website design fluidly adjusts to fit any viewport.


What is adaptive design?


With adaptive design, a website snaps into place using static designs that match the current width of the browser.

Unlike responsive design which is a single website design that rearranges its content to best fit each new viewport, adaptive design uses multiple versions of a website for each device.


This is accomplished by developing a selection of fixed layouts for the most common browser breakpoints: 320, 480, 760, 960, 1200, and 1600 pixels. When someone visits an adaptive site, it will choose the corresponding layout out of the ones created.


Aaron Gustafson introduced the concept of adaptive web design in 2011 in his book Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. His goal was to teach designers and developers how to create truly accessible, usable, and future-proof websites.



Six browser breakpoints in adaptive design
Adaptive design snaps into place by choosing the most fitting layout out of a selection of fixed designs.


Responsive vs. adaptive: How do they compare?



Layout


In responsive design, the design is relative to the screen dimensions. This means that the layout, sizing and measuring units are fluid and relative, helping to create a design that seamlessly adjusts to any viewport.


Web designers use tools such as grid, responsive measuring units (like percent, viewport height and width, and minimum and maximum values) and more to ensure that their layout can change across browsers and devices.


There are also technologies like flexbox that can auto-stack and wrap the content and layout. Flexbox is a CSS container created around elements so that they’re arranged automatically depending on screen size. It's a helpful tool in responsive design that keeps things organized and prevents elements from overlapping or changing their order.


In adaptive design, designers create a tailor-made layout for each of the selected breakpoints. As a result, an adaptive site realistically ends up with 6 different versions of the site:

  • 320 px

  • 480 px

  • 760 px

  • 960 px

  • 1200 px