Responsive Day Out

It’s been a couple of weeks since the Responsive Day Out conference: time enough to begin reflecting on the ideas shared by those speaking.

The importance of progressive enhancement surfaced time and again throughout the day. It must stake a good claim to the title of unofficial conference theme. Progressive enhancement, our process and design systems were the key topics for me and this post concentrates on these. There is much I will have missed in an effort to keep this write-up (reasonably) short—the talks are all available online, so when you’re done here go check them out!

Progressive enhancement

Many of the speakers touched on progressive enhancement. Tom Maslen (from the BBC) talked about it extensively. It is important. Is it more important than ever? Faced with a landscape of ever-increasing device diversity, I would say so.

By creating a baseline design we can improve the reach of our websites. Adding features based on detectable (browser) capabilities allows us to implement newer technologies for those with the tools to make use of them. This is a more inclusive approach to building websites. Aaron Gustafson has written an excellent book on the subject of progressive enhancement.

Progressive enhancement in practice

In his talk Tom tells us to stop thinking about device support. He urges us to think about browser support instead. At the BBC they work towards graded browser support, and there are different expectations for each grade: no support, basic support and full feature-support.

For the BBC News mobile/responsive site—it’s a responsive site, but it’s only delivered to mobiles—they start with a really simple web page constructed using basic HTML and CSS2. Feature detection is then used to determine whether to deliver the JavaScript and additional CSS required for the enhanced experience.

The BBC weather widget is an example of feature detection in practice. It starts life as a simple link to the BBC weather website. If the browser passes the enhanced experience test, this simple link gets upgraded to the full weather widget, featuring a localised forecast.

More progressive enhancement

Andy Hume talked about using delayed loading of assets more widely, to improve page load times, in his talk on Responsive Performance.

Richard Rutter demonstrated how Google’s web font loader can be used to enhance the appearance of text, by ensuring fall-back (system) fonts are shown while web fonts are being downloaded.

Anna Debenham’s look at the browsers found on games consoles was a timely reminder of the need to provide that baseline experience: 1 in 5 kids use the browser on their games console, and for some this is the only means of internet access.

Paul Robert Lloyd suggested that “meaning is our baseline, design is an enhancement”. I can see the logic, but it is simplistic. Decoration is certainly an enhancement. Design—particularly in the digital realm—provides the cues that help us interpret meaning and it facilitates utility.

Mark Boulton sees an opportunity for progressively enhancing at breakpoints. At (a few) macro breakpoints we see changes to layout and features, with (many more) micro breakpoints being used for tweaking the design.

A design process

David Bushell’s admission that he just went for it with responsive design—sneaking it into client projects—is probably a familiar one. Having a go is the best way to get started. “Winging it” was Sarah Parmenter’s chosen phrase. There comes a point though when winging it is no longer enough.

Sarah described how the process she is working towards has 5 stages:

  1. Content & structure
  2. UX & wireframes
  3. Design elements & atmosphere
  4. Optimisations (e.g. using icon fonts)
  5. Code

She has clients sign-off on content hierarchy, rather than wireframes or design—getting content upfront is no longer desirable, it’s essential. Gone too are mock-ups. In their place are pattern libraries: more than a style guide, they describe where and why elements are used.

Finally, the advice from Elliot Jay Stocks was that responsive design does not need to take extra time (once your process is nailed down.) Some parts of the process will inevitably take longer, but this will be balanced by reductions elsewhere.

Design systems

I think that design systems have an important part to play in the future of web design, and Laura Kalbag covered this and more in her talk on the subject.

Laura noted that many people are using multiple devices to access the same website—an observation supported by Google’s The New Multi-screen World report. We all have expectations about a brand’s appearance and personality, and this doesn’t change (much) as we interact with that brand’s different outputs. The same goes with the website. A responsive website must be more than good across the different breakpoints. It must be consistent.

To do this we have to think of our design as a system, rather than a series of independent canvases. My own view is that each element (be it navigation, body copy, quotes, lists of links) should be considered through the lens of shifting layout. How will it react or reflow to these changes? What is its relationship to other elements and to the design as a whole?

If a design system encourages change, how best to maintain consistency? Laura suggests using typography, shape and colour. A simple example is to use the same base unit for all typographic elements. With a base unit of 5px a paragraph could appear at 15px, 20px and 25px across three different breakpoints. Maintaining the typeface used for that paragraph at each breakpoint works wonders for consistency too.

Owen Gregory’s look at antiphonal geometry touches on this idea too. Rather than use a consistent base unit, he talks about using ratios (linked to music) to define different aspects of the design: how font size relates to line height; headings to paragraphs; content to frame*. Further starting points for ratios include the rule of thirds, the golden ratio and the Fibonacci sequence.

*Owen tells us that most (all?) current devices conform to just 5 aspect ratios, so in theory we could design to devices using the new viewport height and viewport width units of measurement.

See/hear

Video of the talks from Responsive Day Out are being released over at Besquare. If you can’t wait for them all to arrive, the audio is also available via Huffduffer.

Each talk was only 15-20 minutes long. I recommend that you watch them. All of them.