Responsive vs. Adaptive Web Design

In the designer’s world, we often used different terminology like fluid, fixed, adaptive, and responsive. Lately, the word responsive and adaptive has been a hot topic for many web designers.

In Blog, Designing, Technology, Reviews, Design, Photoshop

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.

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.

Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 0 Comments On Responsive vs. Adaptive Web Design, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

Auto Scroll To The Top