Article

Response Day Out Conference

I went to the Responsive Day Out event

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:

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 :

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

Speaker’s notes

Audio recordings of talks

Write ups by other people:

  • Events
  • design
  • progressive enhancement
  • responsive design
  • web fonts
Mentions:

Thanks for the write-up, Glenn.

On the subject of advertising, I thought we did tackle that reasonably well (although briefly) during the Q&A, particularly from Elliot.

As for “web apps”, my pushback was serious: come up with a definition of the term that we can all agree on, and then we can discuss it. But until then, I don’t see what value there is in creating an artificial divide (that nobody can agree on) between some websites and others. Why do we need that distinction? (serious question)

Also, Paul and Mark did address the question in the Q&A, even if it wasn’t as in-depth as you would’ve liked. The whole day was very quick-fire so no one topic was getting dwelled on for particularly long.

 – on