ByJay Bigford
12/07/2011
2 min read

The multiscreen world and responsive design

How do you cater for mobile screens and TV screens in one design? The answer is responsive design.

When Apple launched the iPhone everyone was wowed by its useability and the fact that it could display web pages and you were now able to navigate them without chucking your phone out of the window in frustration. Great. However, the way that apple solved the problem of navigating web pages on a small screen was to introduce the pinch and zoom touch gesture which allowed zooming into a web page to make it easier to view and click around.

However ingenious this was, it was essentially a short term fix, a patch it up and make it do solution until website design adapted to the new technology. Most web pages traditionally aren’t designed or built to be viewed on a small screen, so the hardware/software had to the best job with the tools it had. Now that mobile internet is widespread, thanks in part to Apple’s solution, designers are waking up to the fact that mobile design cannot be ignored and that all platforms should be catered for right from the start. Throw into the mix internet TVs which have started to appear on our shelves and you have a screen size that goes from a 3 inch mobile screen up to your standard 32 inch flat screen TV! Blimey, that’s a big difference.

pinch ipod
The pinch and zoom method sort of works but from a useability point of view you are adding another level of interaction between clicks, so its not ideal. The answer to this useability issue is to include responsive design into your site. What this usually means is providing different layouts for different screen resolutions. Rather than a one stop shop for all screens responsive design gives a tailored solution for each layout/screen with the aim of creating something that can be viewed at 100% everytime and still be a breeze to use.

Take a look at our site on multiple screens and you will see that it adapts its layout so that it is useable on each device, Nice!

UPDATE MAY 2012!

Many people have commented asking for more direction to get started with responsive design. Here are 5 quick tips that we always start with:

1. Think clearly about user behaviour on the device you are designing for. People may have very different objectives using your site out and about on a mobile compared to seated at a desktop.

2. Sounds obvious but design with navigation in mind – how will people react to multiple layouts with multiple navigation designs.

3.  Allow the layout to prioritise on the most important elements of the site – the IA job becomes about prioritising information flow – see breakingnews.com for a good example how the content strips down to the main flow on smaller resolutions.

4.  Think and design in percentages / ems – don’t be afraid to let go of fixed widths, it is liberating.

5.  Never assume anything – always research your audience – maybe they like to pinch and zoom after all 😉

An amazing round up of tips, tools and discussion on responsive design can be found here at .net