Responsive vs Adaptive Design, what’s the Difference?

Front End Development, Tip and Tricks, Trends, Web Design
Adaptive, Adaptive Design, design, difference, responsive, responsive design
5 August 2014

The trend of the last few years has been designing for the mobile web. In doing this, developers are presented with 2 choices – responsive and adaptive. Without mobile websites, businesses are bound to see a decrease in website visitors and revenue.

Both choices successfully display websites for mobile users with ease and efficiency on the go, so what’s the difference?

Responsive Web Design

The term responsive was first introduced by Eden Marcotte many years ago. Responsive design adapts to the screens of any mobile device. The responsive web always starts the task by incorporating the CSS3, fluids grids and media queries. These key points make the website capable of showing its layout to viewers. Fluid grids are a big part in responsive design. Pages are sized with proportion instead of exact pixels. It is an approach that recommends it should be according to the user’s response. In other words, it can be explained as it is a technology that automatically responds as the user wants. This would dispose of the requirement for an alternate outline and advancement stage for every new contraption available.

Adaptive Web Design:

The term adaptive was first utilised by Aaron Gustafson. An Adaptive Web Design (AWD) utilises the server to identify the gadget that is being used for viewing the site – a laptop, desktop, tablet, or mobile phone. To define this set of designs it mostly uses the progressive enhancement components. Progressive enhancement consists of three layers:

1) Content layer

2) Presentation layer

3) Client side scripting layer

Progressive enhancement is primarily analogous. It is a type of web in which we can change predetermined device sizes and set of screen according to the developer’s requirements.

The Comparison

Responsive web design and adaptive both are capable to view the websites in the mobile phones as well as in the different screen sizes. The structures of the adaptive and responsive web are different from each other. Responsive web design depends upon flexible and fluid grids while the adaptive web design depends upon the predefined screen sizes. The main difference between responsive web and adaptive web is that the responsive web uses more codes and it is applicable by using fluid grid, flexible foundations, and CSS. While the adaptive uses scripting for changing different device sizes and screens and on the basis of break points, adaptive web uses a series of static layouts. Responsive web uses the fluidity to change the length of browser window. Adaptive design is more complex and expensive than responsive design. By using an adaptive design, we can reach a broad mobile audience because the technology that is used in responsive is not supported by outdated mobile versions and technology.

In this new technologically advanced world, most designers use a responsive design because it is not only cheaper and easier, but many customers expect to have the ability to view websites on the go.

Contact JTB Studios today and find out more about responsive and adaptive designs


You made it this far
Let's chat
1300 66 99 58
88 Langridge Street Collingwood 3066

    Hi, my name is

    I'm from

    You can call me on

    and email me at

    I would like to chat about...


    Wow, so nice of you  
    We’ll be in touch shortly to learn more about your project.


    Benchmarque V2

    Education Health & Medical


    Fashion & Beauty Retail


    Education Technology


    Arts & Culture Education


    Manufacturing & Industrial Retail Technology Transport


    Banking & Finance Civic & Public Not-For-Profit