Skip to content

Responsive design – have we come full circle?

Old content alert!

Thanks very much for visiting my blog. Always happy to have people read my stuff but just thought I should point out this post is years old. If it's about technical stuff there is a possibility that it is no longer relevant, if it's a bug report/fix I'm hoping that it should now have been fixed.

Of course if this is what you're looking for and it does work then great, just don't say I didn't warn you...

Responsive Day Out, or #responsiveconf (or #beefcheeks) was a one day conference held down in Brighton and organised by Jeremy Keith. The talks were fast and furious (20 minutes each) and followed by a seated discussion on sofa’s with Jeremy fielding questions from the audience. It was cheap at cheerful (tickets being great value at £50) with a good after-party that didn’t turn into carnage allowed many extended discussions. The excitement around the subject was, as I’m very old and can remember this kind of stuff rather similar to the early @media’s revolving around web standards, and on a week were the Web Standards Project shut itself down I was left wondering; have our best practises actually changed?

While summarising rather the big things that I took away from @media’s past were:

  • progressive enhancement – this is the true way to build sites,
  • content is king,
  • performance matters,
  • ensure that you’re site is useable via devices other than the mouse

and after reading my notes from the 12 talks during the day, give or take a few of the reasons behind them being important issues this is what I’m guessing many people took away from Responsive Day Out, a conference happening a good 4/5 years since @media was at it’s peak epicness.

Progressive enhancement

From some top tips from Richard Rutter on avoiding text-gliches when loading in webFonts, to tips on making sure that your users “time to content” is as quick as possible, to advice on how to make sure that your work is viewable on as many devices as possible by starting off with HTML and then layering on your CSS/JS to was clear that any developer at the conference not doing progressive enhancement will hopefully start thinking about and practising it now.

One thing I liked was this code snippet:


if('querySelector' in document
&& 'localStorage' in window
&& 'addEventListener' in window) {
CODE!!
}

from Tom Maslam – this is what the BBC responsive dev team use to define if a browser is ‘modern enough’ to get the full mobile experience.

I’ve said a few times that I was never sure when progressive enhancement stopped being the top way to build sites but if it gets back into fashion again then that can’t be anything but a good thing.

The focus on content, “content is king”

Most of the design talks centred around ensuring that the content that you start with is suitable and consumable on small screen devices. Content out design (all content first then build a site around that) was touched on and a talk about responsive navigation patterns by first time speaker David Bushell started off with him saying that if you don’t know your content/IA then you may as well just pick any one of the options that he was about to present.

Performance matters

Following on nicely from both the content is king and progressive enhancement streams the thing touched on during pretty much all the development talks was performance, and the need that to ensure that low-bandwidth users don’t get pissed off and leave we have to strive to keep our pages as light weight as possible, or at least give the impression of it being so.

From JS loading strategies, to a couple of tips on caching and image optimisation (*cough cough* – http://www.thecssdiv.co.uk/2013/02/images-why-the-right-format-matters/) the performance cost of a fast loading site was hammered home. I also found it funny that people were talking about a ‘performance budget’ for sites – meaning to keep things fast and under a specific page weight trade-offs would be made. I remember some developers I used to work with in my very first web-job talking about page weight being important during the dial-up days, and here we are again :)

Multi-device usage

Wrapped up in a couple of talks were the need to design/develop your sites for usage with a wide range of input types. I didn’t twig things during the first time I saw Anna Debenham’s talk on console browsers the gist of that talk is that while we can’t guarantee the code support we also can’t the input device, meaning adding in support for keyboard events like :focus and not relying on :hover are potentially as important to responsive development as coding for touch and swipe events are.

I also liked the sound-bite “code for one universal event” (again from David Bushell), doing should also be helped with pointer events which got a mention in Bruce Lawson’s talk. While we were clearly talking about device and console users support the fact that multi-input support is being talked about again I am sure will help with pushing some of the old accessibility practises that seem recently forgotten to the fore again.

Summary

That responsive design is scary or that we’re winging it was repeated a number of times through-out the conference and while from a design perspective I can imagine that from a dev perspective it feels that as long as we continue to stick to our tried and trusted techniques we’ll at least start off on a very good path that’s easy to move around on while new best practises are being discovered.

Full coverage from Responsive Day Out should be up soon on lanyrd, the sessions were recorded so hopefully they’ll be released soon – there is some good stuff in there.