What're the differences between the responsive design(RWD) and the adaptive design

Question

Explain these differences by your own words, please.

Answer 1

If you go to facebook.com on your mobile you're going to be redirected to the mobile version of the site; if you go to facebook.com on your computer you're going to be redirected to the desktop version of the site, now if you shrink the browser window you'll notice that the site doesn't change with the size of your browser window like it would on a responsive web page. That's Adaptive Design.

Adaptive design is a little bit harder to implement but lets you be absolutely free to re-create the page from scratch in order to offer the best user-experience.

Answer 2

Morpheus
Not 100% right, my friend. It's more philosophical question, but not only about units and other signs. You can read the book and the famous article of inventor Ethan on alistapart resource and about adaptive - adaptivewebdesign.info

Answer 3

Morpheus
This is not about freshness. This is about basic things that change very slowly, even in web design.
For more clear understanding I suggest rather silly but interesting example:
You will not argue that Euler's formula is outdated only because several centuries have passed?

"RWD is not a science, it's more about the art"

For more fresh stuff you can read css-tricks, smashingmagazine, medium subblogs about UI/UX design.

The most funniest thing that all answers in those Ethan's article 😂

Answer 4

The Difference Between Responsive and Adaptive Design. This is mostly focused on the difference between responsive and adaptive layouts: In short, the responsive design is somewhat like the liquid and will automatically adapt to the user's device regardless of the screen size.

Adaptive Web Design. Adaptive web design is different from responsive design in that there isn't one layout that always changes. Instead, there are several distinct layouts for multiple screen sizes. ... The site detects the type of device used, and delivers the pre-set layout for that device.

RWD delivers its responsive structures by relying on flexible and fluid grids that use percentages to create a flexible design foundation. Adaptive Web Design (AWD): Web sites designed using AWD are coded to change to fit a defined set of screen and device sizes.

Answer 5

If I use css media queries to write separate css for phone then will that be called Adaptive design?

Answer 6

Morpheus
You mean mobile view? I think it will be RWD. System of files is not about responsive or adaptive, it's about methodology (like smacss or bem) more

Answer 7

"Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts"

Ethan Marcotte (inventor of RWD term)

Answer 8

I found the best explanation with examples here.

https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/

In css terms,

- when we use responsive units like vw, %, vmin, vmax then the design tends to be Responsive.

- when we use css media queries (@media) to target specific widths then the design tends to be Adaptive.

Maz personally I felt that adaptive design is so much easier than responsive design where you have to take care of many side effects due to overflowing.

This article also conveys a similar message.
http://mediumwell.com/responsive-adaptive-mobile/

Answer 9

Maz suggests excellent comparisons and answers as always👏👏👏

Answer 10

ravi yadav
Nevertheless thanks for trying

Answer 11

4rontender my friend, I wish I had time for philosophy in CSS 😅, i know some designing but I am not a designer. I tried going through the site
https://alistapart.com/article/responsive-web-design/

All his articles are decade old, are using pedantic tone and will confuse beginners. Definitely not recommended. If you have links to some fresh stuff from Ethan then please share it.

I tried to differentiate crudely between the 2 using css for my convenient understanding. But maybe you can help me explain with an example code.

Answer 12

Thanx for support

Answer 13

I was not knowing so much about it so i have brought it from google.