Responsive Design V's Multiple Websites

With the growing range of devices connecting to the internet and a variety of screen sizes (e.g. mobile, tablet, laptop and desktop) it’s more important than ever to create websites that work well and look great no matter what device they’re being viewed on.

There are two main options for this:

  1. Create Desktop and Mobile versions of the Website
  2. Create a Responsive Website

In the past most websites have been developed based on fixed layouts, and while a common screen width of 1024px has been considered a relatively safe size to use for websites, it doesn’t work well on small mobile screens and can lead to sites looking a little lost on larger desktop screens.  The traditional method for dealing with this has been to create two separate versions, where one experience is optimised for mobile and the other for desktop. This means that two websites have to be maintained, increasing the cost of development and maintenance. It also ignores the multitude of devices that now sit between mobile and the desktop – for example the iPad.

Responsive design is an approach that adapts the layout of a site to enable small and large screen devices to share the same code base and content without the need of separate website properties. 

Through responsive design you only need to develop one codebase for all of your users, no matter what device they use.

Responsive design techniques:

  • Fluid layout allows the layout of page elements to grow or shrink to pre-determined maximum or minimum widths, accommodating a width range in which the browser can adapt the layout.
  • Media queries allow you to specify which style sheet to use when a desired width has been reached or detected.
  • Viewport informs mobile browsers that the site is optimised for mobile viewing and to render the page at the devices width and or height.

In most cases we would advise using a responsive design.

Something else?