I help organisations deliver successful digital products.

Responsive Day Out

It’s been a few days since Friday’s Responsive Day Out, enough time for my thoughts to marinate while reflecting on a jam-packed day at Brighton’s Corn Exchange.

The organiser warned in advanced – and repeated in the day’s opening introductions – that this gathering would be a rather lo-fi affair compared to Clearleft‘s regular dConstruct and Ampersand conferences. Considering the modest £50 ticket price, it would have been hard to quibble had things felt less slick than usual, but in truth there was little to separate it from a more high profile event. Lanyards were replaced with stickers, and there was no free wifi (always ropey at tech conferences anyway), but registration was fast, the excellent coffee was still free, and the on-stage production quality felt up to scratch.

Any caveats were perhaps intended to manage expectations about the quality of the talks considering speakers would be donating their time and effort for free and at short notice, with the event coming together in a relatively short space of time. As Jeremy Keith notes in his own assessment of the day, there was no need for concern – all the speakers had clearly put a lot of effort into their presentations.

The format for the day was quick-fire twenty minute presentations followed by chats with the speakers on stage, and finishing with a few questions from the audience before each break. With the day focused around web design’s hottest topic, there was diversity in the audience’s knowledge, experience, and scepticism towards the subject. Some talk content would inevitably be familiar, but a high number of shorter sessions meant those already au fait with a presenter’s theme only had a short wait for the next speaker.

Winging it

Sarah Parmenter‘s opening talk set the tone for the day, discussing how our fixed-width misdemeanors gave us comfort as we attempted to control an innately flexible medium, so it’s okay to be a bit freaked out by the new challenges of designing for a (naturally) fluid canvas. To make the transition less painful, we need to pull together as we tackle the numerous challenges presented by this ongoing sea change in our industry.

Sarah admitted she is a latecomer to the practical application of RWD. Her business previously focused around native development, and as such, many in the audience were likely to be familiar with the workflow she now advocates at You Know Who. The important takeaway from Sarah’s talk wasn’t the steps her team go through to deliver responsive websites (who knows what the de rigueur workflow will be in six months), but that it’s okay to admit we don’t have all the answers yet. We’ll get there quicker by sharing our mistakes, sharing our experiments, and sharing the evidence of our successes – an important message reiterated by several speakers throughout that day.

Rethinking navigation

While Sarah revisited workflow, David Bushell explored the fiddly field of responsive navigation. A number of new navigation patterns have developed over the last few years, and David shared the popular options while demonstrating how he improved the layout of menus on his own projects at various breakpoints.

I particularly like David’s use of off-canvas techniques (such as the example seen on his personal site) and the suggestion that we revisit the concept of a site index or page of contents for online wayfinding. David questioned the need for traditional navigation at all, encouraging us to explore alternative ways of finding our way around a website. He also advocates anyone struggling to sell RWD to attempt some undercover development; sneaking flexible goodness and media queries into a project under the radar. A great tactic for experimenting with new techniques, very often it’s easier to ask for forgiveness rather than permission when taking your first responsive steps.

Getting practical

Following the first break of the day we were treated to a couple of practical talks from Clearleft’s Richard Rutter and Josh Emerson. Richard shared some useful tips for approaching the performance of webfonts (particularly on smaller screens), with Josh following up on how the technology can be used to render resolution independent icons. I particularly enjoyed Josh’s talk as the subject area was something near the top of my to-do list, too often falling back on CSS sprites when I knew there were better techniques I needed to explore. Josh succeeded in demystified the creation and use of asset fonts, as well as being one of the most relaxed and endearing speakers on the bill. I was shocked to learn it was his first ever conference talk, so look forward to seeing him on future lineups.

The pre-lunch session ended with Elliot Jay Stocks challenging some of the criticisms levied at RWD. Like many of us, he’s found himself fighting the corner of flexible layouts with clients and peers alike. I feel quite lucky that the majority of clients I’ve worked with have embraced the new techniques, albeit questioning why we didn’t do it this way all along. Others have needed convincing, feeling uncomfortable moving away from the type of deliverables-based workflow they had become accustomed to. I’ll have the audio from Elliot’s talk bookmarked ready for the next time I need to put a sceptic’s mind at ease.

The web beyond webkit

Anna Debenham kicked off post-lunch proceedings with an excellent assessment of the current console browser landscape. A real eye-opener, not only did it highlight what a powerful technique we’re able to employ to ensure console users are not overlooked, but that we take for granted the common methods of input online.

Console browsers bring with them a host of quirks, as do the often cumbersome controllers used to navigate largely woeful on-screen keyboards. She has put considerable effort into documenting console browser specifications for developers, publishing an expansive online resource for those eager to understand how to design for these devices.

Fighting the flab, and emerging standards

I was hoping the subject of performance would pop up in a few of the day’s talks. Although not exclusively an RWD concern, website speed has been brought into sharp focus again as bandwidth considerations head back near the top of a web developers list of concerns. Andy Hume tackled the subject using examples from his ongoing work at The Guardian, sharing a few quick wins as well as how he measures whether browsers cut the mustard enough to be served particular enhancements (also explored earlier in the day by the BBC’s Tom Maslen).

Like Josh’s talk, Bruce Lawson‘s presentation on some upcoming web standards was a welcome introduction to a number of technologies I was eager to explore. Bruce has the enviable knack of being able to explain front-end technologies with clarity and humour, putting his audience at ease with potentially daunting additions to our growing set of standards. At the 2010 Future of Web Design conference I watched Bruce live-code a version of his own blog’s homepage using the latest HTML5 semantic elements, and was immediately given the confidence to embrace this new standard. Three years on, and he demonstrated how flexbox could become a useful competitor to the media query in our responsive development toolkit.

Chords, control, and the web aesthetic

The final session started with the most abstract presentation of the day, Owen Gregory‘s facinating examination of how ratios calculated from the structure of musical chords can be seen in common device screen sizes, and used as a meter for design on the web. I remember reading Owen’s 24 Ways article on the subject in 2011, and can admit that most of the concept went over my head at the time. It was a great to hear Owen expand on the theme at Responsive Day Out, in what was certainly the most dConstruct-like talk of the day. I’d fail to do it justice here, so luckily the audio is available on Huffduffer along with the rest of the day’s talks.

Following Owen was Paul Lloyd, another member of the Clearleft team on the bill who drew parallels between the challenges we face on the web with the designers of early on-screen graphics and animation for television. Restricted by their technology, TV designers of the 60’s and 70’s were charged with creating engaging and memorable visuals for a format hamstrung by low resolution, a limited palette, and variations in equipment capabilities. By embracing the format’s restrictions, an aesthetic emerged which was uniquely suitable for the characteristics of the canvas, as seen in some of the examples Paul collated for his talk.

Echoing the message from his A List Apart article, Paul argues that we should develop visuals which are sympathetic to our medium in the same vein as the early pioneers of television graphics. Building on some of Andy Hume’s topics from earlier in the day, Paul questioned the need (or suitability) of photographic, non-content imagery online, asserting that the bitmapped nature of these elements is at odds with the resolution independence we can achieve with a web dominated by type. When we must use photography (particularly likenesses of Alan Partridge) optimisation is paramount, and future formats have the potential to finally deliver the responsive images solutions we so desperately desire.

Clarifiying the New Canon

The day’s final speaker was Mark Boulton, who clarified misunderstandings about his New Canon and Content-Out approaches to responsive web design. Having seen Mark discuss the subject at last year’s Reasons to be Appy conference, it was good to hear his evolving thoughts on the subject.

He raised a particularly interesting point in relation to styleguides, one of the design assets I’ve been using a lot more over the last couple of years. A tool mentioned in several workflow discussions throughout the day, Mark aired the concern that by designing styleguides at an early stage in the RWD workflow, we run the risk of abstracting our designs too quickly, increasing the risk of disjointed proximity and contrast between elements on screen. It’s a valid concern, and one I’ve tried to mitigate while adjusting my own design process, and hope to write-up some thoughts on soon.

Mark brought proceeding to an end by reiterating Sarah’s message from the morning; embracing RWD can be painful (even for designers of Mark’s ilk) but we need to go through the pain barrier to start producing our best work.

Common themes from the day

Tools: we’re forming a more balanced outlook towards graphic editors after some initial backlash over their suitability in RWD, and they are still a valid way of experimenting with design direction along with the browser.

Dinosaurs will die: we need to adapt quickly, and expect to go through a pain barrier while embracing the inherent lack of control when working with a fluid medium. Don’t get left behind.

Question conventions: processes and tools are under the microscope, why not many of the other conventions in layout and navigation we’ve become familiar with?

Performance: ditch the bloat. Everything old is new again, including the need to optimise heavily for limited bandwidth. Better loading times don’t just benefit those on mobile network connections, and page speed is intrinsic to a positive user experience.

Device and input diversity: our medium extends beyond the desktop, tablet, or smartphone. Our interaction with the web is broader than click or tap, and consoles are just another part of a landscape which will continue to grow.

Sharing: we can all learn more by exploring our successes, failures, and experiments in the open. Consider publishing your ideas beyond 140 characters more regularly, or volunteer to speak about your experiences at events; these are both things I personally aim to do more of this year.

UX Brighton goes for a spin

From responsive to reactive: harnessing context on the web