Justin Avery, who curates the Responsive Design Weekly newsletter, asked me four questions as part of his December Interview Series. My answers are below. You can see how other designs and developers answered the same questions by subscribing to the newsletter.
What was the best implementation of responsive web design you saw in 2012?
The best responsive implementation can be found on the BBC News Mobile website. Designed and built very much with a mobile first mentality, it scales to meet different device characteristics beautifully. It’s a fantastic example of progressive enhancement, too. Not just in terms of code; I love how decisions have been made regarding image usage, too. The basic HTML references just a single image, that for the headline story, with more capable devices receiving images for each subsequent story. This highlights some of the misguided thinking around images in a responsive environment. I believe we’re focusing too much on how we can increase the quality and size of images, without first asking if we need those images at all.
Right now, the BBC Mobile site is designed for mobile and tablet devices, but the intention is for it to replace the desktop version in time. With its mobile first, progressively enhanced underpinnings, I think it could become a shining example of responsive design.
What are two responsive frameworks/plug-ins/shims/etc. that you recommend?
I’m not a big proponent of frameworks, but they can be useful when prototyping. I do like to study their features and implementation details though. I learnt a great deal from studying HTML5 Boilerplate for example, especially with its tips around performance and optimisation. Yet I would never use it as a starting point for my own projects. The same is true for Twitter Bootstrap. I’m a huge fan of the modular approach taken with its CSS class names, but in terms of its responsive features, I think its device-centric, pixel-based breakpoints and JS-dependant navigation patterns are problematic to say the least.
What is the one thing with responsive web design you would like to see improved or developed in 2013?
I touched on this a little bit in my recent article for A List Apart, but I’d like to see less focus on technical implementations, and more focus on design. We’re still following print design conventions, just shrinking designs to fit. Device proliferation, and the emergence of responsive web design, has provided us with a fantastic opportunity to rethink how websites should look. One way we can do this is by embracing concepts more accepted within development circles; for example, progressive enhancement should feature throughout the creative process, not just at the end of it. This invariably touches on process of course, and the need for closer collaboration between designer and developer (and everyone else involved in a project). That’s no bad thing.
If you could offer one piece of advice around responsive design, what would it be?
Write about the work you are doing-on your blog or for magazines. Be they online or in print, publishers are always looking for new writers. This is such a huge and overwhelming topic, that it would benefit from more voices. I would encourage people to talk more about where responsive design hasn’t worked too, as much as sharing new approaches. Sometimes, I feel there’s a tendency for an echo-chamber to form around certain concepts; I’d love to see some more considered, yet respectful, push back on these ideas.