Digital definition: "mobile website"

'Mobile compatible', 'mobile optimised', 'responsive web design' and 'adaptive web design' are all terms that have been used interchangeably, and not occasionally incorrectly ;), to describe websites displayed, and used, on mobile devices.

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

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

Mobile optimisation using Adaptive Web Design

Adaptive web design example - Yahoo Australia
Yahoo Australia's homepage 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' '' mobile-optimised version of the site.

With adaptive web design a separate, mobile-optimised, 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

Responsive web design example - APP
APP was a recent Neem Tree project, and we 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. 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-responsive) web design approach:

  • Adaptive requires you to develop and maintain separate website/s
  • With a separate website, you can fine tune and optimise for the devices you are delivering to
  • With adaptive web design you can optimise 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)

We're in agreement with everyone who has heralded 2013 as the year of Responsive Web Design, confident that it will be the preferred approach with even mobile apps on the decision table.

Intrigued by our web and mobile application development services? Let's have a chat about which one would suit your project.

Digital definitions series

This post is part of our digital definitions series, just click the digital definition tag for more.