Responsive vs Adaptive Design

Responsive Design, Adaptive Design. What are they?

Quite simply, they are one of the hottest new technologies being embraced by web developers worldwide.

They allow websites to be viewed on a multitude of devices rather than just a standard desktop or laptop.

With mobile devices, & tablets being the go-to device for browsing the internet, your website must allow your visitors to quickly and easily navigate around.


Responsive Web Design was coined several years ago by Ethan Marcotte and first introduced in his A List Apart article, “Responsive Web Design“.

The key points of RWD are using CSS3 media queries, via the @media rule, and fluid grids that use percentages to create a flexible base.

As well as the use of EMs, flexible images, videos and type to allow the responsive website to adapt to the viewing device.


Adaptive Web Design was coined by Aaron Gustafson, who wrote the book of the same name.

In essence, the AWD approach uses a predefined set of layout sizes based on device screen size along with CSS and JavaScript.

What’s the difference?

The main difference between RWD & AWD is the way they deliver the experience.

RWD relies on fluid grids to gracefully scale to any device, whereas AWD relies on predetermined screen sizes and breakpoints.


Both technologies have their Pros and Cons.

What matters most is you choose the right tool for the job.

Users who access your website don’t care what method you use, so long as they can easily navigate around and do whatever it is they came to do.


About Me

Designer. Developer. Hacker. Senior Reviewer / Content Specialist @envato