Responsive design vs adaptive design

responsive-design adaptive-design
hd. picture hd. · Feb 12, 2013 · Viewed 13.5k times · Source

Would you explain difference between RWD (Responsive Web Design) and AWD (Adaptive Web Design) in a simple way?

Answer

lockedown picture lockedown · Feb 12, 2013

Adaptive (AWD): Not necessarily set on a fluid grid; targets specific device resolutions (320, 768, 1024, et.al.); can have set widths (fixed) or relative widths (%), controlled by media queries.

Responsive (RWD): Built on a fluid grid; will change with the browser, no matter what the screen resolution; content can break apart and realign if need be.

In short: RWD is like AWD, except taken a step or two further, in order to future proof design for unknown devices as well as known devices.

Related questions

Font scaling based on width of container

I'm having a hard time getting my head around font scaling. I currently have a website with a body font-size of 100%. 100% of what though? This seems to compute out at 16 pixels. I was under the impression that 100% would somehow refer …

Read More
Responsive font size in CSS

I've created a site using the Zurb Foundation 3 grid. Each page has a large h1: When I resize the browser to mobile size the large font doesn't adjust and causes the browser to include a horizontal scroll to accommodate for …

Read More
Responsive css background images

I have a website (g-floors.eu) and I want to make the background (in css I have defined a bg-image for the content) also responsive. Unfortunately I really don't have any idea on how to do this except for one …

Read More