May 28, 2014

Adaptive vs responsive design: what’s the difference?

Written By Martin Sandhu


As we have progressed away from using just our computer screens to browse the web, and have moved to smaller screens on tablets and smartphones, so too have web designs needed to adapt. The result is two forms of web design that allow users to view websites clearly no matter what size screen they are using: adaptive design and responsive design.

But what are these, and is one better than the other?


Adaptive and Responsive Design Overview

Both adaptive and responsive web design essentially produce the same result as far as the user is concerned: they both display the website correctly depending on the size of the browser that is being used. Users who visit a website on a mobile device will therefore see the mobile version irrespective of whether it has been designed using adaptive or responsive design.

Responsive design uses CSS media queries to apply different design rules based on the size of screen being used to view the website. The page is sent to the browser, and the browser modifies the design depending on the size of the window. If you visit a website that was built using responsive design, you can change the design in real time simply by adjusting the size of the browser window.

Adaptive design, on the other hand, uses predefined layouts. Numerous layouts for the website are created, and the server detects the device that is being used and then loads the correct style sheet automatically based on this.


Why Use Adaptive Design?

Adaptive design is often the more complicated and more costly option because multiple layouts are required, all of which must be maintained and updated (compared to simply updating one version as in responsive design.).

However, it also allows you to reach a wider mobile audience. Responsive design uses CSS media queries, and not all mobile phones are capable of displaying such websites accurately. If you need the site to work for all viewers for any mobile device, adaptive is the better option – but you will need the team and the budget required.

Adaptive design is also capable of presenting different experiences based on the intent of the customer. This allows you to design various versions of the websites for different devices based on what the visitors are most likely to do. For example, when visiting an e-store, someone may be more likely to perform a different task when using their mobile compared to when using their computer, and adaptive design makes it easier to design with this user intent in mind.


Why Use Responsive?

Many designers prefer responsive design because it is simpler and cheaper to create one version of a website. Although not everyone will be able to see the website because older mobile phones may not display them correctly, this is not seen as a problem in many markets. The people who do not have the right technology to display responsive designs tend to use the internet very little, and going to the effort of an adaptive design just to target them is often not worth it.

Responsive design is a good option if there is not a big difference in user intent depending on mobile or desktop usage, which is true of many websites, especially those based on providing information.

Base Your Choice on Your Goals

Responsive web design is increasingly becoming the design method of choice, but it may not always be the right choice for your website. Discuss your options with your web designer, and ultimately base your decision on your goals, resources and the needs of your audience to ensure your website creates the optimum experience for visitors.