Adaptive vs Responsive Design

Tags: , , ,


Google outlines in its quality guidelines for building mobile-optimized websites. The 3 configurations which they recommend are:

  1. Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.
  2. Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device.
  3. Sites that have separate mobile and desktop URLs.

1. Responsive Design

Responsive design (RSW) is typically your best bet, because it is always changing to accommodate adjustments made by the user and will work well on any device. The website is hosted in one place and users see the exact same information regardless of device they are using with a few adjustments made by CSS. Because the user experience (UX) is fairly consistent across devices and because it is easier for users to share and link to information, Google has recommended responsive design as the optimal method for building websites.

Designers create just one site with fluid grids so that it will look great no matter what size of screen it appears on. Imagine rotating your smartphone so the screen is horizontal. You can still use the site just as easily as when you hold the phone vertically and will see the same information regardless.

2. Adaptive Design  (Dynamic Serving)

Adaptive design, or dynamic serving, involves creating a number of separate layouts for the website, with the designer tailoring each version to the size and type of device being used. Although the site is hosted in the same place, the server responds with different HTML (and CSS) on the same URL depending on the user agent requesting the page. In basic terms, the developer builds one site for desktop computers, one for tablets and one for mobile phones and the server presents the appropriate site to the user depending on which device they are using. This strategy is often used for sites with advanced functionality or where users require a much different experience on different devices. Many shopping sites such as Amazon employ this strategy such as

3. Dedicated Mobile Sites  (Separate URLs)

Alternatively, some organizations prefer to develop completely separate mobile websites such as using an m. or mobi. sub domain. Typically this strategy is implemented because mobile users require a very different experience than desktop users, or as a temporary solution while a website is being rebuilt using the methods mentioned above. While this strategy has been proven successful for some websites, such as the New York Times which manages a separate desktop and trimmed down mobile site, for others it causes problems.

While they have their use, it’s important to remember that separate mobile sites typically sacrifice content and navigational complexity, so you will likely be giving your users a “dumbed down” experience. While there are always exceptions, typically this is more of a short term solution. For websites with complex design, an abundance of pages/content, and/or advanced functionality required this may not be an optimal long term situation. There are also hurdles when it comes to SEO and domain authority which requires implementing strategies such as canonical links and other measures for SEO purposes. Because this can become quite cumbersome, it is important to work with a professional when employing this strategy.

Conclusion

In summation, adaptive design and responsive design will both be acceptable to Google (for now). However, responsive design is the better solution for most organizations, as it streamlines the search engine strategy, give a consistent user experience, and is a more flexible long-term strategy.