Future of Web Design 2012

Process.

Process is the word I would use to describe the underlying theme of this year’s Future of Web Design conference in London. Don’t let that fool you though – it was far from dry and staid – the speakers were enthusiastic and engaging, and willing to liberally share their insights.

In this post I will focus on the discussion around responsive web design. There were also great presentations that touched on personal and business processes – Brendan Dawes discussed his notes on design, including (my favourite) the use of punctuation in designed objects; Mark Boulton on a better approach to failure and the importance of the design critique; the Standardistas approach to idea generation and meaningful making; Paul Boag on taking a client-centric approach to web design (and in reality, not so far removed from user-centric web design).

Well designed objects are imbued with good use of punctuation

Brendan Dawes, Future of Web Design, 2012

That is the quick summary – my notes on these are likely to creep into future blog posts.

Responsive web design

Love it or hate it, responsive web design is the design approach du jour. Since Ethan Marcotte coined the term in 2010 we have seen its development from hypothesis to practical application on a number of high profile sites. It can be described as an approach to web design that allows us to create device agnostic websites. Design/build once. View anywhere. Collectively, however, we web designers are still trying to get to grips with how to actually do it…

A Responsive Workflow

In A Responsive Workflow, Steve Fisher describes his take on responsive web design as a form of ‘not quite mobile first’ progressive enhancement. Making content accessible, regardless of device, is paramount. What follows are enhancements aimed at taking advantage of a device’s features – whether that is a smartphone’s ability to geo-locate, or a desktop computer’s 30″ widescreen display.

As Steve talked in detail about his workflow it became clear that we should be looking at an evolution of process, not a revolution. Two areas of challenge stand out: design and testing. The phases of design (UX, interaction and visual) and development have become much more fluid, reinforcing the need to focus on defining content early on, so we can better design a site’s delivery across the multitude of device types. This fragmentation of device types has a further impact – testing has become a very complex operation.

Content

Using content as a cornerstone of a responsive process was an idea also floated by Sarah Parmenter. Base design on real content. Or at the very least on known content structures. This will enable the creation of pattern libraries or style guides, and Sarah suggests we:

Think of the design as puzzle pieces, rather than a finished picture.

Sarah Parmenter, Future of Web Design, 2012

The Smashing Magazine redesign

Vitaly Friedman gave a run-through of the Smashing Magazine responsive redesign. The aim, to bring people back from Instapaper (and alike) by creating a good cross-platform reading experience. By focusing on typography and creating a good measure (average line-length) on all devices, the team found natural breakpoints for media queries in the content, rather than targeting the breakpoints around popular device sizes.

A missed opportunity

Unfortunately I missed Laura Kalbag talk on the subject – a shame as she had so much positive feedback. Having seen Laura present on using responsive web design for client projects at London Web Standards earlier in the year, where she provided excellent insights based on practical experience, I can see why.

My notes from that talk…

  • Understand why you are creating a responsive design: is it the best course of action?
  • Design a system, by breaking down content elements into modules.
  • Use navigation points within the content, as well as between pages.
  • Base breakpoints on the content, using known constraints, and make use of major and minor breakpoints.
  • Mock-ups are only a snapshot of your design system.

A better word

In our rapidly changing environment, making the time to take stock and evaluate our situation is invaluable. Lest the sparkle of an idea – like responsive web design – tarnish, leaving us frustrated and struggling to get to grips with an incomplete (and unusable) understanding.

This year’s Future of Web Design provided a great platform for reflection and the sharing of ideas around working practices.

Process is perhaps not quite the right word to describe the underlying theme for the conference. We can go one better.

Demystification.