What's the difference between Adaptive design vs Responsive design?

metalsguru's picture

He has: 5 posts

Joined: Oct 2010

I usually hear about Adaptive design and responsive design on websites. However, I am not sure what's the difference from them. Would you please give me some points about that?

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

I'm going to leave this, because it's a useful question (even though there was a spam response by someone obviously connected to the original poster)

I think there are some variations in how people define these terms. For example, "responsive" web design (lower-case r) can refer to any method that adjusts a website design to fit the size of the device. It doesn't necessarily have to be Responsive Web Design (RWD) as defined in Ethan Marcotte's A List Apart article. RWD specifically uses media queries and flexible grids to adjust the layout to fit the size of the viewport.

I've seen the term "adaptive" used with several different meanings so it's unclear as to what someone might mean by using this term. It might mean using different templates ands tylesheets for different devices. It might mean something more like progressive enhancement, which considers more than just the size of the viewport. This article from Sitepoint describes Adaptive Web Design as something more similar to RESS, where you would change portions of your mark-up depending on the device.

Here are some interesting links:


I found some good articles about the ambiguity of the term "Adaptive web design" at one point but I can't find them now.

misharnet's picture

He has: 6 posts

Joined: Jul 2015

Well, I was interesting about this subject recently, and I found very good article about it at SitePoint, here it is:
Moving Beyond the Responsive Web to the Adaptive Web
Hope you'll find it useful.

Connect to the People!

They have: 22 posts

Joined: May 2021

Both RWD and AWD are different. In short, the responsive design is somewhat like liquid and will automatically adapt to the user's device regardless of the screen size. With the adoption of CSS media queries, this kind of design method can auto-change the display style on the basis of the target device. This can well solve the display problems on different screen sizes.

However, the adaptive design is built on the use of static breakpoint, and the page won't be adaptive anymore once it's loaded. This will load the work layout appropriately with the screen size of the device. In this way, you need to take all the mainstream display sizes into account and then design the corresponding layout. It will load and display the designed screen layout when a user visits a webpage. This can definitely make your website user-friendly.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.