Responsive vs Adaptive Web Design

Jan 24, 2014
Santiago Valle


Unless you have taken the time to design a mobile-specific design for your website, your site will display at full width scaled down to fit inside the device smaller screen. Mobile users will have to zoom in and out in order to read the text and to press the buttons. Some features, like fly out navigation, are virtually impossible to use since there is no mouse. To combat these user-issues that will most likely lead to site abandonment, your site should be responsive or adaptive, depending on your goals.

Comparisons and Distinctions

Adaptive and responsive web design basically do the same things but in different ways. They both present your website differently depending on the device someone is using to access your site. So your page will adapt to a bigger screen for a desktop, a smaller screen if you are browsing on a laptop or even smaller version if you are on your tablet or smartphone.Now we can either adapt the content specifically for mobile or we can respond to the mobile device and display the content in different ways

Adaptive Web Design

Adaptive Design enhances the visitor’s experience with a more focused result that is displayed in one of two ways:

Server-Side Adaptive Web Design

Using user agent and device detection from server side will allow us to have different templates for each device, enabling more customization and also allowing the mobile page to load faster.There are several server–side plugins available for most CMS and eCommerce tools, each contains

- Server-side device detection
- A custom template for each device
- Required to manage multiple templates

Client-Side Adaptive Web Design

Client-side adaptive web design is similar to responsive design as it is based on a set of pre-defined layout sizes using CSS, JavaScript and media queries breakpoints. Client-side adaptive design’s main components:

- Based on CSS3
- Uses media queries
- Changes CSS based on screen size and orientation
- Uses breakpoints

Responsive Web Design

With responsive design your site readjusts the size depending on the dimensions of the device you are using. The content remains the same but the layout of the page changes. This method is easy to implement into your site.One main advantage of responsive is that we have a single layout for all devices and can use CSS media queries to adjust the content on different screen sizes. Components of responsive design:

-  Also based on CSS3
-  Dynamically resizes to fit screen
-  Is relative to screen size through percentages and ems
-  Changes font-size, image-size and number of columns to fit the content
-  Has a flexible and fluid grid layout
-  Flexible images
-  Media Queries to adjust layout with size of viewport

You can see responsive design in action here: http://liquidapsive.com - when you  resize the browser, you’ll see how the layout changes.

Which should you use?

In the end the choice depends on scale. If you have a small website you can probably implement a responsive design fairly quickly, and having two sites to maintain probably doesn’t make much sense.However, if your site is quite large, the focus should be on giving mobile users the key pieces of information and adaptive website might be your best solution.

Latest insights

5 Insights from Sitecore Symposium 2020
Diego Rebosio
How Sitecore Drives E Commerce Growth
Oshyn
Sitecore Implementation 101
Oshyn
Working with Oshyn: A Client's Perspective
John Paul Uva