Category Archives: User Experience

Responsive Web Design basics for non UX people

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 example
Responsive Design example

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

Same structure, different representation

Good Information Architecture (IA) work is about choosing the right representation for the project and intended audience. Creating an illustration to explain an issue to a development team is very different to illustrating that same problem for a marketing manager.

The three schematics below show a standard hierarchical representation of a website and then two isometric views of the same information structure. Obviously the standard site map is easier and faster to create but the isometric views provide much more information.

Standard Hierarchical View

ID-Map-640
 

Isometric View #1

ID-Isometric-01-640
 

Isometric View #2

ID_Isometric-02-640
 
 

Annual Report – iPad

 

Annual-Report-iPad

This was a very simple job for a City company who wanted their Annual Report on an iPad. The content had already been converted and a basic shell application was going to be used to display the content.

All they needed from me was a simple way to scroll through subject categories and the subjects within each category.

While it is always fun to try and come up with something innovative for an interface the fact is that the client didn’t want it. And they pay the bill.

The approach shown above is straightforward – swipe up and down to browse through categories (more artwork would be added to the Category boxes to be on brand) and then swipe left or right go through the sub-sections.

While some UX professionals might sniff at something so basic the reality is that users love this sort of thing. Tablet apps are still a novelty. Oh and they are shiny too!