Responsive Web Design - Lessons From FOWD
Matt Bailey / +Matt / June 7, 2012

Future Of Web Design

In May myself and a colleague attended the Future Of Web Design (FOWD) conference in London. For me it was an opportunity to stay up-to-date with current developments in the web industry, specifically the challenges involved in Responsive Web Design.1

Responding to 'mobile' usage

As a company we recognise the importance of delivering content to users in a way that is appropriate to the devices they are using.

It is no secret that ‘mobile’ internet use has seen a dramatic rise over the past couple of years and this is only set to increase. I’m sure you’re familiar with the scenario - you are at home watching something on the television and want to check something out online. Do you get up, find your laptop, turn it on, wait for it to boot up, start your web browser and so on; or do you simply reach for your mobile or tablet device and find what you want in a matter of seconds? The answer is obvious. 

The solution is to create a site that ‘responds’ to the screen size/width/resolution of the user’s device, displaying the content in a way that is appropriate, whether that be a single column on a Smart Phone or multiple columns on a widescreen monitor.

Changing the way we think, and work...

The way web designers have traditionally worked has been to open up Photoshop, set up some kind of 960 pixel grid, design a few key pages, submit those designs to the client, then build the site based on those designs (obviously it’s not quite as straightforward as that, but you get the idea). The problem now is that we have to design for an almost infinite number of possible screen sizes. Of course you could pick just a few key widths, but even this creates an enormous amount of work we didn’t have to do before.

Imagine the scenario. You agree to present two design routes to a client, each design route showing three key pages. That’s six visuals straight off the bat. Now let’s say that you need to show how those designs are going to look on an iPhone, an iPad, and a regular desktop monitor. That’s six visuals shown at three separate sizes, making 18 visuals in total. Now imagine the client asks you to change one of the fonts... on all the visuals... You can see how our traditional way of working is completely impractical for the responsive web design era.

As a designer and front-end developer I actually find this challenge incredibly exciting. I’ve seen things change so much over the past 15 years. I’ve seen (and done my fair share of) table based layouts, Flash based sites, the emergence of the web standards ‘movement’, the rise of jQuery, and now Responsive Web Design.

I love that our ‘community’ is built on the foundation of sharing information, techniques, and skills, and it’s through this sharing that new ways of approaching our design processes are coming to the fore. At FOWD I went to Steve Fisher’s workshop on Rock Solid UX Deliverables, and I’m going to sum up some of the things that stood out for me and that we’re going to start implementing in our own thought processes and workflow.

Rock Solid UX Deliverables - Workshop by Steve Fisher from Yellow Pencil

The workshop took place over the course of a whole day, so naturally I can only give you a summary of what was covered. Hopefully it will still give you a useful overview though, and a few tools and things to think about.

There is also a wealth of information online. Here are a couple of great example articles to get you started:

Start with why?

It’s through asking why, that we find the how and the what? 2

The Golden Circle

The Golden Circle

  • Why do we do things?
  • How do we do them?
  • What do we do?

General points

  • The web is not fixed width
  • 85% of mobile usage is in the home (people are often too lazy to turn on their computers)
  • The same content should be delivered to to any device - “Tread very carefully when making assumptions about your users and limiting content as a result” 3
  • Ask your client the right (not leading questions)
  • Look for trends/patterns in design and UX strategy - conventions become conventions because they work - use them...
  • ... but be aware that conventions are constantly changing
  • Test with few people and often
  • Make it obvious (Don’t Make Me Think, by Steve Krug 4)
  • Does it need to be responsive, or just something simple?
  • Does it need to be responsive in IE8 and below?

Personas

Personas

  • Creating personas of our users helps us understand their motivations (the ‘why?’)
  • Design for people’s motivations

Sample process

FOWD Workshop

  • Content strategy (important!)
  • Research (users)
  • Visioning
  • Interaction design
  • Deployment

Content strategy

  • Bring unification from fragmentation. Use tools such as Gather Content 5
  • Content should be chunked out and well structured
  • COPE - Create Once, Publish Everywhere (future friendly)
  • Not mobile first, but rather small screen / low bandwidth first
  • Create a design principles / vision statement for each project

Style Tiles

Style Tiles

  • Style tiles help you to abstract the look and feel from any particular layout 6
  • They keep you out of the interface (layout), making it much easier when using a ‘mobile first’ approach
  • They help inform the design moving forward

Presenting

  • Critique should be a regular part of your process
  • Present your designs as part of a rich media presentation or video, that shows your thought processes, sketches, style tiles, prototype etc.
  • This gives your designs a context and stops people making unhelpful comments.
  • Never show the designs to anyone unless they’ve seen the video

Prototyping

Twitter Bootstrap

  • Prototyping allows you to quickly and cheaply test layout and functionality 7
  • Use real content!

Deploy

  • Having done all the preliminary sketching, wireframing, style tiles and prototype you are now in a position to fully implement your designs

In summary

The reality is that designing for a responsive web is a multi-faceted, fluid process that simply cannot be done justice in an article like this. It is through experimenting and implementing your own processes that you will learn what works for you. You will also find that each project has it’s own challenges and that you will have to adapt your workflow to suit. That, for me though, keeps things interesting...

I’m thrilled to be a part of the web industry at such an exciting time as this, and in another 15 years I can’t even begin to imagine where we will be. But I hope I’ll still be there at the cutting edge, being inspired, learning and pushing myself to continue honing my skills, and probably being put to shame by a new breed of young designers who’ve grown up in a world where super-fast internet and touch interfaces are the norm.