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.
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!
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