Everyone’s talking about responsive design, but what does it mean?

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

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 properties, where one experience is optimised for mobile and the other for desktop - however 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, on the other hand, is an approach that web designers and developers take to adapt 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.

When implementing a responsive design designers and developers use a number of techniques:

• Fluid layout allows the layout of page elements to grow or shrink to pre-determined maximum or minimum widths, therefore 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 reach 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.

By combining these elements it’s now possible to deliver optimised experiences for end users without multiple web properties and within a single codebase.

While the development of HTML5 has brought these techniques to the fore, they’ve been around in their own right much longer. Fluid layouts have been used for many years, Media Queries are specified in the CSS3 specification, and viewport is supported by many existing mobile browsers. And for older browsers that do not support media queries natively there are JavaScript libraries available to provide that support, for example the Media Queries jQuery plugin (that deals with max/min width, and is still in development) or CSS3-mediaqueries-js (that aims to add media query support to non-supporting browsers).

Want to see a great example of responsive design in action? Load http://bostonglobe.com/ on a desktop browser then start shrinking the size of your browser window to replicate viewing the site on a smaller device - you’ll see the site adapt as the browser window gets smaller. Alternatively just load the site on your mobile or tablet device to see how it adapts!