Mobile Websites: Adaptive versus Responsive

Mobile compatible, mobile optimized, responsive web design and adaptive web design are all terms that have been used interchangeably, and often incorrectly, to describe websites displayed, and used, on mobile devices.

If you're a business or organization interested in making your website look and behave just as spiffy on a mini-tablet as on your widescreen monitor, there are a few routes you could take to this destination.

The two we discuss here are: (1) adaptive web design and (2) responsive web design.

Mobile optimization using Adaptive Web Design

Yahoo's homepage in Australia is a great example of adaptive web design. The site detects what the user is using to access the site and switches to the "em-dot" m.yahoo.com.au mobile-optimized version of the site.

With adaptive web design a separate, mobile-optimized, version of your website is served up once access by a mobile device (phone, tablet or mini-tablet) is detected.

Mobile compatible using Responsive Web Design

The website App, designed partially by a Web company called Neem Tree, is an example of responsive web design. Neem Tree applied responsive web design techniques to ensure the site responsively adjusted to a layout best suited to whichever device the user was viewing the site on: desk/laptop, tablet in both landscape and portrait modes and also smartphone in both landscape and portrait modes. For example, in the image above observe how the layout has compressed the full-view's horizontal navigation menu into a drop-down for the mobile-view.

With responsive web design, a separate/dedicated mobile or tablet version of the site isn't necessary. Instead, the site uses HTML5's new features to present multiple layouts of the same site, depending on the width of the viewing device.

Deciding between adaptive vs responsive web design

When deciding whether to take a an adaptive or responsive (or hybrid adaptive-hybrid) web design approach:

• Adaptive requires you to develop and maintain separate websites either by URL or by separate HTML/CSS code
• With a separate website/HTML, you can fine tune and optimize how your site displays on a particular device
• With adaptive web design you can optimize image sizes i.e. low resolution for low-bandwidths
• Responsive web design relies on HTML5, CSS3 and Javascript, and therefore works best in relatively modern web browsers
• Responsive web design is suitable for delivery across an increasingly fragmented mobile device market (we noted over 150 devices used to access a client's small e-commerce site)

While there is some debate to whether responsive web design is suitable for every business case, there is widespread agreement that the trend in 2013 is in responsive web design's favor. Increasingly, web design companies and site owners see responsive web design as the preferred approach even when mobile apps are also on the decision table.

Editor's Note: This article first appeared on the website for Neem Tree and has been used and slightly modified here with permission. Neem Tree is a Web development and Drupal consulting company.