Content in the multiscreen world: responsive website design

Sonja Jefferson

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.

  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 information architecture (IA) job becomes about prioritising information flow (see breakingnews.com for a nice example)
  4. 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.
  5. 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.

SHARE THIS
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

4 Comments

  1. Sonja,

    Just some thoughts…

    The best responsive sites on the web right now (e.g. bostonglobe.com) are those that have reduced their design to a level of minimalism that many designers aren’t likely to be that excited about. But they’ve done this out of necessity, because in order to possibly manage all the variables that would need to adjust around the dimensions of the user’s viewport, you’ve got to reduce the visual details. In other words, the simpler the design, the easier it is to adjust it for a variety of contexts. If you’re into minimalism, this won’t be that painful. But if you’re interested in creating mood with the visual design of your site, this is going to be a challenge. Yoke’s site is a good example of this — where the header illustration creates a lot of mood, even though the layout itself is pretty basic.

    Responsive design, despite all the evangelism around it right now, is itself just a response to today’s technological factors — specifically, the many devices we use to access the web, and the lack of consistency among them. But today’s situation isn’t really sustainable. Either the variety of devices will change (this is already happening — 50% of the smartphone market is dominated by Apple alone, and only Apple and Samsung made money last quarter on devices), the screens themselves will become more homogeneous (rumor has it that iPhone 5 will have a larger screen like most of the Android phones) or the techniques will change. I think it’s going to be a little of all.

    One other point. Jakob Nielsen came out against responsive and pointed out that design tends to do better when it can focus on the specific user factors unique to user context. In other words, designing for every context means very little design. This was very controversial and all the responsive proponents were irate. But, I think Nielsen is basically right. What he describes about generalizing design is what we’re seeing today, and it’s a matter of time before user frustration catches up with developers’ and designers’ desires to follow a one-size-fits-all process.

    So, all of that is to say that you might go ahead and re-do your site now with responsive techniques, but that will probably require taking a more minimal aesthetic approach and being prepared to do this again in a few years. We’re taking this approach too, and consequently, our upcoming redesign is going to be pretty austere. We’re also experimenting with responsive design for our clients, but frankly, we don’t have a solidified process around this and are working to carve one out. The challenge is not tripling the work (and the budget), or on the other end of the spectrum, underestimating the work and delivering something inadequate. This stuff is all still very much in process.

    – Chris

    Reply
  2. Thanks very much Chris. Great comment that makes sense of the complexity around responsive design.

    It’s very interesting from a content perspective. This challenges us to think again about how people are reading our content.

    This short article from CX Partners is worth a read: http://www.cxpartners.co.uk/cxblog/reading-and-responsive-design/. Giles Colborne says:

    “It’s worth bearing in mind that you’d only fit about 25% as many words on a 5 inch screen as you can on a 10 inch screen. Extrapolating those figures, as the screen size falls from tablet to iPhone the amount of content people read could fall as low as 12% moving from desktop to phone. That says something about how far into your content the critical stuff should come if you’re creating content for the web.”

    Stating your message clearly upfront and keeping things concise become more important than ever.

    Reply
  3. Hey Sonja,

    really nice article!
    I also like responsive webdesign. When surfing the web on my iPhone, I really get annoyed of pinch to zoom … It’s a really bad web experience for me.

    Did you find any surveys that prove pinch to zoom to be such a bad usability for surfing the web? I think I am not the only one having bad experiences with it on my iPhone (web! It feels awesome in Google Maps especially on the iPad).

    But responsive design also has its drawbacks. The most relevant for me: Surfing the web on different devices – with different designs – feels strange. If you are using more than two devices (maybe desktop, iPad and iPhone), visiting websites can be unfamiliar as some texts / elements are hidden in one design, but not in the others. It just confuses me sometimes!

    Reply
  4. I know what you mean Stefan and thanks for the comment.

    As Chris Butler alludes to, I’m not sure that the final solution has landed as yet – every solution has its drawbacks, but responsive seems like the best compromise for now.

    This post from Jakob Nielsen caused a storm – http://www.useit.com/alertbox/mobile-vs-full-sites.html. Any views very welcome.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *