How do you deliver content for mobile screens and TV screens in one website? The answer is responsive design.
Jay Bigford from Yoke, the sustainable design agency based here at Spike Island explains why adapting your website design to the needs of mobile users is so important and what this means for your site.
“When Apple launched the iPhone everyone was wowed by its usability and the fact that it could display web pages. Finally you could 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. Now that mobile internet is widespread 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 usability point of view you are adding another level of interaction between clicks, so its not ideal. The answer to this usability 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% every time and still be a breeze to use.
Take a look at Yoke’s website on multiple screens and you will see that it adapts its layout so that it is useable on each device, Nice!”
How do you get started with responsive design?
Here are 5 quick responsive design tips from Jay.
- 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.
- Sounds obvious but design with navigation in mind. How will people react to multiple layouts with multiple navigation designs?
- Allow the layout to prioritise on the most important elements of the site. The information architecture (IA) job becomes about prioritising information flow (see breakingnews.com for a nice example)
- Be patient and open minded during the design process. What you will be working towards will be more flexible a solution than you are probably used to.
- Never assume anything. Always research your audience – maybe they like to pinch and zoom after all
“The same adages apply to responsive as for normal design – keep it simple and think clearly about the purpose of your design and the value it will add and you can’t go wrong.” Jay Bigford, Yoke Design
Thanks very much Jay. That is great advice.
If like us you are planning a website redesign any time soon, you will be well advised to consider making your new site responsive. We’re keen to continue to lead our new site with useful content for our visitors, however it is viewed. For us the challenge is to make the website usable for all without too much compromise for some.
These two sites seem to do it very well (hat tip to Chris Butler at Newfangled for these):
Do let us know if you have any thoughts on the responsive design challenge. Whether you are a designer or a visitor to our website, we’d really welcome your views.