A non-technical explanation of responsive design for ordinary people
Responsive web design (RWD) is the latest thing. Everyone wants it but in my experience few clients understand the basics of it. OK they should not have to but there always comes a point when the client wants something, usually shiny with no purpose, and you will need to explain why this is ‘A Very Bad Thing’. Good luck with that.
Instead you can offer them a ‘RWD solution’ which will both fulfil their desire for acronyms and do the job. It might even be shiny too, but as a by-product, not a core feature.
Oh and of course there is the Responsive versus Adaptive design argument. Some people consider ‘responsive’ to be a subset of ‘adaptive’. I think this is wrong and very confusing. UX ain’t philosophy, although from some of the talks given you might think it is, so let’s ignore adaptive web design for the moment and stick with responsive.
I started looking around for other views on responsive versus adaptive and every other search result seems to offer a different answer. So I won’t bother.
Anyway as I was saying….
The schematic below shows four very simple wireframes that I knocked out in about 45 minutes to show what the deal is with responsive design. However this is just a brush over responsive issues, I urge you to visit the sites at the bottom of the page if you want to fill your head with it.
Responsive design is not rocket science. Essentially a site is designed so that it responds to the device it is being viewed on. This goes further than the browser window getting smaller of course. A flexible grid-based layout which allows the experience to adapt to different screen resolutions, automatically resizeable images, various miracles with CSS including media queries are all part of the responsive deal. And no I am not going into all this here.
Decide what is important and design accordingly
What I do want to illustrate is that a lot of responsive design is about organising your site in terms of semantics and information as opposed to just chucking stuff on the page so it looks pretty and keeps marketing happy.
When the same site is going to be viewed on both a desktop system with a wide monitor by someone chilling out of an evening and on a naff little mobile phone while waiting for the bus you need to decide what is important.
In the example above it is the categories. Of whatever the site happens to be about. Chickens. Cars. Pieces of wood. Squirrels. Doesn’t matter. But you need to decide as to what is really really really really important and design accordingly.
And remember that what might be important for a desktop user may not be as important as the user waiting for the bus.
A good dev is essential for responsive design
As a UX person I always make sure that I am working with a really good developer when doing responsive stuff. If you haven’t got a good dev you are stuffed.
The reason for this is that there is going to be a lot of discussions of different ways of doing the same thing within the constraints of UX requirements and tech restrictions. You can’t just sit down and generate wireframes. You really have to think hard and work through a site (I use the term ‘slicing’) to see what is going to work and what isn’t.
Navigation can be a big problem which will require a lot of work. Nav is of course a reflection of the information architecture (IA) of your site. If your site has a simple structure you may be ok with using the same navigation for most scenarios (apart from true mobile, i.e. phones, which usually need a custom nav).
The Homer Simpson Stubby Finger Problem
Tablet devices are particularly tricky. I read The Guardian on my iPad everyday and while I love the publication (and the app which I read on the tube) there is a problem with the website navigation when viewed on a tablet. Basically there is not enough room between the hyperlink hot spots. So you aim to tap on one thing and end up tapping on two things or the wrong thing.
I call this issue the ‘Homer Simpson Stubby Finger Problem’ which you can see over on YouTube here.
Easy for me to point out the problem but what’s the solution? Navigation on a site like The Guardian is more crucial than most and it would be a non-trivial exercise to redesign a version of the nav specifically for tablets.
If in doubt cheat
You will see in my quick and dirty wireframe above that I have cheated in the tablet example by reducing the number of main menu buttons so they are all nicely space out.
But then sometimes you do have to cheat.
Note: I will put a PDF version of the wireframe on here at some point for download. Honest.
Essential Further Reading on Responsive Web Design
- Take responsive design beyond media queries (Talk by the most capable Mr Brad Frost)
- Media Queries (Responsive design examples)
- Why responsive design has to win out (Smashing Magazine)
- Responsive web design guidelines and tutorials (Smashing Magazine)
- Responsive web design: Layouts and Media Queries
- Responsive Web Design (A List Apart)
- Sassaparilla (uses Sass and Compass)