I went to the Responsive Day Out event this Friday. Rather than write about each speaker I want to try and pull out the major themes of the day.

Web and asset fonts

There were a number of good practical take aways from Richard Rutter, Josh Emerson and Andy Hume talks on web fonts. Josh’s talk had a couple of neat ways of progressively enhancing content with resolution independent icons stored as a web font. I particularly liked the use of a data attribute in the HTML and content attribute in the CSS in his code examples

// CCS
[data-icon]:before{
   content: attr(data-icon);
   font-family: 'Cleardings';
   speak: none;
}

// HTML

@clearleft

});

I also thought the use of ligatures to allow the replacement of words in your text with single icons was good. Take a look at the forecast.is example site Josh put together to illustrate the approaches he talked about.

Part of Andy’s talk on “The Anatomy of Responsive Page Load” covered the method the Guardian mobile site is using to load and cache its custom web fonts. It is a form of progressive enhancement, where only browsers that pass the following tests display the custom font:

• Cuts the mustard (BBC phrase for modern standards support)
• Supports WOFF
• Supports localStorage

The server then sends a base64-encoded font so it can be cached client-side in localStorage for reuse on further page requests.

Patterns of navigation

David Bushell took an in depth look at UI patterns use for navigation. He divided the common patterns found in current responsive design into five :

• Minor break points (gloople.com)
• Multiple tiers (microsoft.com)
• Overlay (sony.com)
• Go off-canvas (dbushell.com)
• Jump to “big footer” (iso.org)

His talk finished with a useful list of considerations you should be focusing on when making responsive design choices about navigation.

For me one of the strongest points David made was all the ways someone can now interact with navigation i.e. mouse, keyboard, touchpad, touchscreen, stylus, voice, movement, remote and games-pads. True device independence is not just about screen size, a point massively reinforced in Anna Debenham’s talk. Her love of game consoles always heartens me and is a good antidote to those who consider the web a web-kit monoculture. Take a look at her console site its a great resource.

Progressive enhancement

Both Andy Hume and Tom Maslen have been involved in building large-scale responsive sites for the Guardian and BBC respectively. Their talks both focused around the practical use of progressive enhancement. Tom laid out the much talked about “Cutting the Mustard” concept from the BBC i.e. dividing user agents by modern functionality support.

The BBC’s core experience of HTML4 is delivered to all browsers, but an enhanced JavaScript experience is loaded onto any browser that supports the following:

• querySelector
• localStorage
• addEventListener

I was impressed with the script loading optimisation the Guardian is using. Somehow the new async and defer properties for a script tag had passed me by.

This allows a script to load directly after the HTML at the same time the CSS is loading. They fallback to use appendChild(script) on browsers without support for these new properties. This support detection has to be done server-side.

Media queries (the future or not)

More than one speaker said that they expected their use of CSS media queries to reduce as we move through the next couple of years. I got the feeling that these comments are a mixture of a response to both an over fixation on this area of CSS, but also a belief that other elements of CSS will play a much larger part in creating fluid layouts in the future.

So it was interesting that Bruce Lawson’s talk about future standards development centered so heavily around new media queries that can target device types like touch and remote. This felt like a mixed message.

Things that where un-said

There are two topics I would really liked to have heard about. These are the two difficult subjects of display advertising and web apps vs responsive design

I thought the approach my friend Jeremy Keith took in sidelining the subjects and the people asking about them was not as productive as maybe getting speakers to hit the subject full on. To be fair these issues were most likely out of the scope of this event, but they will be the anchor around responsive design’s neck and they deserve a honest straight-up engagement.

Death of Photoshop and winging it

Sarah Parmenter started the day by being honest and saying she often feels she is just winging it while creating responsive web designs. Her comfortable and well-homed design processes of the past had been lost in the move to responsive design.

A few of the speakers also made reference to the fall from favor of the Photoshop centered design workflow. With some contempt being levelled at the idea of the ‘deliverable’, a Photoshop layout given to a client as if it were the end point in its own right.

I think both points are rooted in issues of client communication.

Photoshop has not been removed from our toolkit, just its output can no longer be the crutch by which we dumb down the way we communicate complex design problems to our clients.

This new world of thousands of device formats and usage contexts means we have to draw clients more fully into the design process with all the subtle and complex trade offs involved in resolving a responsive design.

I am sure Sarah is not winging it; just like most of us feeling the uncomfortable uncertainty that always comes with change.

Thanks

The event was a thought provoking day of responsive web design. Even if I have not mentioned all the speakers, they all did a great job. Thanks to Jeremy and Clearleft for putting on the event. The day was split into groups of 3 speakers all doing a 20 minutes slot with a small joint Q&A session together. A good format I hope they will use again.

Speaker’s slides

• David Bushell: Responsive Navigation
• Josh Emerson: Asset Fonts
• Andy Hume: The Anatomy of a Responsive Page Load
• Paul Lloyd: The Edge of the Web

Speaker’s notes

• Elliot Jay Stocks: RWD — The War Has Not Yet Been Won

Audio recordings of talks

• Sarah Parmenter: The Responsive Workflow
• David Bushell: Responsive Navigation
• Tom Maslen: Cutting the Mustard
• Jeremy chatting with Sarah, David, and Tom
• Richard Rutter: Responsive Web Fonts
• Josh Emerson: Asset Fonts
• Laura Kalbag: Design Systems
• Elliot Jay Stocks: RWD — The War Has Not Yet Been Won
• Jeremy chatting with Richard, Josh, Laura, and Elliot
• Anna Debenham: Playing with Game Console Browsers
• Andy Hume: The Anatomy of a Responsive Page Load
• Bruce Lawson: What’€™s Next in StandardsLand
• Jeremy chatting with Anna, Andy, and Bruce
• Owen Gregory: Antiphonal Geometry
• Paul Lloyd: The Edge of the Web
• Mark Boulton: In Between
• Jeremy chatting with Owen, Paul, and Mark

Write ups by other people:

• Orde Saunders: Liveblogging Responsive Conf
• Morgan Jones: Notes from Responsive Conf
• Dan Davies: Beefcheeks in Brighton
• Responsive Day Out in Brighton
• Lee Griffin: Responsive Day Out
• Ashley Nolan: Responsively winging it together
• James Young: – Responsive Day Out – food for thought
• David Bushell: A Responsive Day Out
• Jeremy Kieth: Oh, what a Responsive Day Out that was!