How I think about Responsive Web Design

Posted: October 12th, 2011 | Author: Foamcow | Filed under: Web Design | | No Comments »

I have seen talk that Responsive Web Design means you are making “My first website” for use on mobile devices. See this (amongst many other discussions) for an interesting discussion on the topic.

Now, please don’t take my words as gospel. I’m just starting out on the RWD road so I may have this totally skewed but it does seem that many folks consider RWD to be the act of stripping down a site to accommodate low bandwidths and small screens. There is some truth to that but I feel there is a much more important reason to be using RWD.

RWD is about serving relevant content, not about getting rid of cruft. After all, if it’s cruft then why is it on the full-blown site in the first place? You can probably get rid of it from there too. Nay, RWD is about looking at what the user of your site needs at the moment they hit it and addressing that need.

Consider why we make print stylesheets. Very handy things for reformatting your content to make it appropriate for printing on an A4 page. It’s quite common to hide the site’s navigation or expand links to show the URL (if you use IE you won’t appreciate this). After all, what’s the use of a clickable link on a piece of paper?

Take that idea of removing useless stuff over to someone browsing a restaurant’s site on a mobile phone. They may well be checking the place out from the comfort of their own home and couldn’t be bothered walking to the “big” computer in the corner. Fair enough – there’s a case there for avoiding large images – then again they may be using their home WiFi anyway. There’s a case for re-arranging the page layout to fit a narrow screen – iPhones zoom pretty well though and it’s never a bother to pinch and slide. But there’s still a case to change the site in some way to reflect these “limitations”.

But now consider if they are out and about. They are visiting the site on their mobile phone over 3G. We, as designers (in the non graphical sense) should be thinking about their reasons for doing this. It’s a restaurant site. They’re on the street. There is every chance they need to either:

a) find the place because they’re meant to be there and can’t find it
b) call the place to tell someone they’re late, not coming, see if a table is available at short notice
c) see what yummies they can get and whether they need to visit a cash point (another great use for mobile!)

So as the site’s designer we can see what information needs to go front and centre and what actions need to be easy to perform. This visitor is probably less interested in reading about the Chef’s time at “Chez Guavara” where he won a Michelin Star for his “Fèves au lard sur du pain cuit servi avec une riche sauce tomate” than they are about seeing what bus they need to catch to be there for their 8pm date with the blonde girl/guy from the dry cleaners.

That’s what I think RWD is about and how we should be thinking about it. RWD is about considering the user’s needs at a given moment.

This is something, like with standards compliant markup, that we should be doing anyway – but until now we haven’t bothered. RWD in this sense is a good idea, let’s embrace it.