Responsive vs. Adaptive Web Design

With the rapid growth of tablets and smartphones, web designers and website owners strive to enhance the site’s layout to suit the screen sized of the varying devices it is viewed on. There are two ways to achieve this, first is with the use of Responsive Web Design (RWD) and second with the use of Adaptive Web Design (AWD).

Responsive Web Design (RWD)

Gone are the days that websites are limited to desktop viewing only. We are now living in a world where websites, big or small, can be viewed on a low-resolution smartphone, a medium resolution tablet, or a high-resolution desktop, laptop, or even smart televisions.

It was in 2010 when Ethan Marcotte, a web designer and speaker, coined the Responsive Web Design. He shows us a new way of designing the ever changing web, and how to embrace them. RWD is a method of making a website look fully functional on very small screen to large screens, at any resolutions in between.

Adaptive Web Design (AWD)

Adaptive Web Design was created by Aaron Gustafson, which uses predefined layouts that have been designed for different screen sizes. Unlike responsive web design, this process is predominantly server side. It is the server that determines on what device the website is being viewed on. It uses a different template for each device. For instance, a website that is viewed on a laptop uses a different template than that of a website which is viewed on a smartphone screen.

Their Similarities

The most obvious similarities of these methods are that both render mobile-friendly sites. According to, adaptive web design is basically the same as responsive web design and shares many of the same ideas and goals.

Their Differences

1. Responsive web design fit to change the screen on varying devices while Adaptive web design change and responds to fit a set of devices and screen sizes.

2. Adaptive web designs are created based on a pre-existing site. Responsive web design requires you to build a site from scratch.

3. Adaptive web designs supports separate website either by separate URL or by separate HTML/CSS code. Responsive web design relies on existing HTML/CSS3 and Javascript.

4. This means you don’t need to maintain a different URL or HTML/CSS.

5. Responsive web design involves more coding and implementation strategies but adaptive web designs relies on predefined screen sizes and it has already a streamlined approach.

6. Adaptive web design requires deeper understanding on Javascript and CSS. Responsive web design only needs the familiarity of making changes to existing codes.

7. Responsive web designs provides images that are first downloaded and then re-sized to fit the screen size it is being viewed on while adaptive web design contains images that are adjusted for specific screen resolutions.


Although both methods share a common goal and objectives – to ensure that a site is fully functional on any devices, to provide an enjoyable user experience, still they are created with differences. Because of this, web designers should have a clear and deeper understanding on both methods.

About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:


Popular posts