Responsive Web Design: A designer's take

We've been designing a number of sites using responsive web design (RWD) techniques and have developed a design process that works well for us. Following David's in-depth article about RWD, I wanted to introduce a few practical points concerning the design process.

1. Solid foundation

Yes, you still do user centred design. And yes, you still do creative workshops to come up with and explore concepts.

For RWD sites, there are two foundation pieces you should have before you start designing a site, that ordinarily you could (potentially) do later.

Real content

In RWD sites, the storytelling mechanism changes depending on devices, but the story it tells has to remain the same. When the layout changes, the site needs to know the relationships between the content blocks so that it can reorder and resize them correctly, so as not to alter the story.

I'm not talking about final copy, but a draft and a near final structure. Without having realistic content, it is very difficult to create an appropriate semantic structure for your content. It's also a waste of time trying to prepare for every eventuality.

Vision / brand

When I say 'brand', it's in the wider sense of the word. It is more about vision and personality than logos and typefaces. 

The design elements (logo, colour, typefaces etc) alone can not express your brand personality. It's how you use them and in what context you present them that does the job. Take a look at the two red boxes below. They both show the same red and the same typeface, but the context alters what it means:


So let's think about...

What is the vision? What is the most important thing this site has to perform? Is it about making users happy? Is it about saving their time? Or is it about sharing?

What is the most important personality of your site? Is it friendly? Is it functional? Or is it challenging?

When the site layout changes on different devices, a clear understanding of the brand's vision and personality will help you to create a consistent experience. 

To give you a very simple example, say you have a large letter box image at the top of your homepage on a desktop screen. What would your mobile screen looks like? If it's a shop, you would probably want to keep the image as large as possible - maybe change the aspect ratio slightly to maintain the impact. If it's a service site, you might want to remove the image entirely and replace with a list of links or copy.

Setting up a brand vision and personality (not necessarily in stone, but something everyone can get behind to begin with) at this stage helps ensure that the whole team understands what you're aiming to achieve, making it easier for individuals to make good user experience decisions along the way.

2. All devices first

There is a popular phrase of the day - 'mobile first'. I tried this and found it quite hard to do to the letter. What I've found myself doing more and more is 'all devices first'.

The problem with 'mobile first' is the simple fact that it's much easier to fill a space when the real estate is very narrow. Yes, it will force you to break down information into pure order, which is great, but there is not much more you can do layout wise. Then when it comes to a 'desktop' screen, your content blocks will tend to be small and lack visual hierarchy, leaving you with quite a hard task to fill this relatively vast space well.

'Desktop first' won't work well either as you'll try to cram in all these wildly different modules into a narrow column in the right order – most of the time it ends up requiring a rethink of desktop layout.

What we do is to look at both (and maybe a tablet size) at the same time, while doing quick hand-drawn sketches. Some pages lend themselves well to mobile, and others to desktop – so we start by using the size that we feel is easiest for that given page.

sketch-example sketch-example

It is important that we sketch by hand. It's quick, fluid and not precious – you can keep redrawing. It doesn't really matter if you can draw well or not, so you can include non-designer team members too. We draw in various details, but it's usually quite abstract for the sake of speed. The example on the right is typical of one of the sketches from our website redesign.

Once the first instance is drawn, we quickly apply the page to other formats. Some are harder to reorder than the others, but if you have the solid foundation of vision and brand personality as a reference point, the more pages you do, the easier it gets. You build up a better set of rules as you go.

3. Build a semantic structure

How can you ensure the semantic structure of the page is maintained while the layout changes?

Now imagine a dictionary. Its page width and number of columns don't alter the meaning of its content. The meaning is well defined by typographic styles. Roman bold for the entry, pronunciation is in square brackets and so on. No matter how you change the container (make the page thinner, or add more columns) the information remains the same as long as the typographic styling is preserved.

RWD requires something similar. When the content can work independently of its layout, it's at its most versatile. And to do so, semantic structure (and the typographic styling used to express this) becomes very important.

With content being prioritised earlier, we tackle this as soon as design process begins.

4. Test early and be agile

Working as an agile team is an advantage when you are dealing with RWD, as your User Interface (UI) developer friends are never too far away. We all know that we can't design everything. There is always something unexpected around the bend (just think of Internet Explorer). But the good news is, if you're working in agile, you are more likely to catch surprises early and use them to improve your design.

Test and experiment with your structure in code early to see if it works as you intend. If you make your design foundation solid and robust, building on top becomes much easier and more flexible.

5. And finally...

Don't forget to involve UI developers when planning each page structure as they can see how the site needs to be built, and most importantly why it has to be so.

Be flexible when coming up against problems or hitting on insights – don't be afraid to change your mind. 

It can be hard to get your head around RWD at times, but it's very satisfying when it all comes together!

Sign up to Badger News