8May2012

Responsive design, yes and no…

The whole ‘responsive design’ debate has been stirred up again by a recent article from usability expert Jakob Nielsen. The response from the industry on the whole was pretty negative. But after I read it, I found myself nodding in agreement at times. It felt unusual.

Before I go any further, I should probably point out that I’m a designer Jim, not a developer. I can code HTML and CSS and just about get away with it, but I don’t here. I’m more interested in design and content implications of responsive websites.

So what’s the big deal?

Multiple platforms

Multiple platforms

When it comes to designing for ‘tinternet’ it’s easy to think of it as just a whole bunch of different desktop computers or fancy phones. Well, sadly it’s not so straight forward anymore. It seems that almost all devices these days are being built to access the web. From mobile phones, tablets, TVs, cars, fridges and washing machines to cereal boxes* and it’s only going to diversify further.

And yes, apple could be about to shake the tree again this year with a new Apple TV, whilst most of us are still contemplating the implications of the iPad’s new retina display. So, with so many different sized displays, herein lies the problem. How do I optimise my design and content? Go for the 2048px or 960px grid system?

*Maybe not cereal boxes, but we’ve all seen minority report by now.

The perfect solution

This is why responsive design is seen by many as the silver bullet. The easiest, most cost effective way to design and implement one solid entity that will work on anything you throw at it. Job done.

As all the figures show, web traffic on mobile devices is rocketing. Hence the growing argument for designing for mobile first, then embellish for tablet, desktop and TV later. It’s a design approach that fits in nicely with the progressive enhancement model. There are even some CMS modules that can handle it all for you.

The end result is lean, well considered and full of fancy CSS and media-queries that make it look and feel rather sexy. Throw in technologies like SVG and Typekit and you could even scale for retina displays without any sweat, (let’s forget about images and IE for a moment and humour me).

OK, so it might take a bit longer to work out the design, content (less please) and structure, and you probably need to build a good HTML prototype first. But what’s not to like? The client gets great value in the long term, you just need to get them onside.

Or maybe not

But is it actually feasible to stretch or re-jig a design optimised for 300px to 2048px wide on the fly and still retain some design coherence? And what if your website has specific calls to actions, complex forms, or huge amounts of corporate information that a CMS is constantly feeding, what happens then? You can’t always maintain clean and lean.

This is where it all starts to get murky. Even though smart phones and tablets can handle complex HTML well, it’s not always a nice experience, responsive or not. Then there’s TV browsing, it can make you feel like Mr Magoo. User goals and interactions are going to be different depending on the platform. So maybe going bespoke for mobile and TV isn’t such a terrible idea after all?

So where does that leave me?

Before we all dive straight into responsive projects, I suggest we take a leaf out of the techies’ book and begin our response to the responsive question with… Well the thing is, it’s actually not that simple.

Yes it can work brilliantly in some instances, but not all. We still need to weigh up the pros and cons and as always make ROI and user needs central to the outcome.

There are plenty more articles to be found and the debate goes on, but here’s my pick of the pro responsive bunch if you want to know more.

X Booth
A list apart
Think Vitamin
Smashing Magazine
.net magazine
Golden grid system
Less Framework

Article by

I am the Head of Design at Heehaw. Over the years I have worked with many household names including WH Smith, BBC and Whyte & Mackay. Whether working on brand strategy, print or digital, finding that big idea still gives me a kick today

3 Comments

Comments

  1. Will says:

    I’ve since seen this post from a chap called Brad Frost. He makes a similar point. http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

  2. Mike Aungier says:

    Good article. Ive been using Twitter’s “Bootstrap2″ which rocks, but too dont recommend responsive css for larger projects, suggesting custom websites instead.

    As you say, it’s not black & white. There’s lots to consider. And dont forget responsive images either ;o)

    Cheers for reminding me about the lessframework. i might actually give it as go next project. is there a LESS option though?

    mike

  3. Will says:

    Cheers Mike.

    Not sure how it’s all going to pan out for TV browsing.

    Have you seen this adaptive images technique, http://adaptive-images.com/? Our dev team used it for a project recently. Don’t know enough about it but it comes recommended.

    Yup, bootstrap is pretty good. High on our list. Difficult to resist the temptation to go custom though, but that’s the designer talking.

Post a comment