Responsive vs Adaptive Web Design

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:

1. 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

2. 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 em's
• 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

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.