Responsive Answers Revisited
Justin Avery, who curates Responsive Design Weekly, asked me to revisit the four questions I answered as part of an interview series in 2013. My answers are below.
Justin Avery: What was the best new implementation of responsive web design you saw in 2015, and was there a redesign that took your eye?
Paul Lloyd: Looking back at the answer I gave in 2012, it’s worth noting that this year saw BBC News finally launch their fully responsive website, which builds upon the mobile site I mentioned three years ago. The reasons for the lengthy development timeline are many fold, not least a new requirement that means the code base now underpins BBC World Service’s 30 different language sites, too.
Having been involved in the responsive redesign of the Guardian website, I have nothing but the highest respect for teams, like those at the BBC and the Guardian, who are able to shepherd responsive projects through large organisations and get them in front of users. We can pick over particular implementations and talk about design trends, but we should also remember that much of the hard work doesn’t take place in a code editor or graphics application, it happens during conversations with other members of our team and in meetings with stakeholders. That’s where the most interesting and enduring lessons lie.
JA: What are two responsive frameworks/plugins/shims/patterns that you always seem to go to?
PL: My opinion hasn’t changed much from the answer I gave in 2012 (in short: I try not to rely too much on frameworks). However, that’s not to say I don’t have my favourite tools and ideas, so I will name two of those instead.
Fabricator helps you build modular UI toolkits and style guides, and I’ve used it a number of times this year. Not only is it a powerful and highly customisable tool but its creator, Luke Askew, is incredibly responsive to feedback and suggestions, meaning it keeps getting better and better.
The technology that’s had the biggest impact on my work has been the BEM methodology (in particular the flavour described by Harry Roberts), as has the associated discussion around using modular, object-orientated approaches for CSS. What I like best about BEM is that it’s simply a set of conventions, with no dependancies on any particular technology or software. More of this sort of thinking, please!
JA: What is the one thing with sites you would like to see improved/developed in 2016?
PL: I tried using display: flex on a <fieldset> the other day, and apparently you can’t do that as it’s a replaced element: “an element whose representation is outside the scope of CSS”. Now, there are plenty of interesting and exciting specifications on the horizon (including Web Components, which may help us get round such issues), but some days I think: can we not just get the simple stuff fixed first?
JA: If you could offer one piece of advice around building responsively what would it be?
PL: I don’t have a piece of advice, but I will offer an observation, one that I’ve been pondering for a while…
Ethan’s responsive recipe contained three simple ingredients: fluid grids, flexible images and media-queries, the later of which ushered in phrases like “breakpoints” and “tweakpoints”. Five years on, I feel it’s time to reassess those ingredients, and consider whether broader attributes can make a website ‘responsive’.
You don’t need to look too closely at the newest CSS specs – viewport relative units, flexbox, grid layout – to notice that these often ask the browser make layout decisions for us, we just provide a set of hints. These new properties (alongside older ones like max/min width and height) mean we can create layouts that truly adapt to their content and context.
It doesn’t seem outside the realm of possibility that we’ll soon be creating responsive layouts that contain no media queries. As our reliance on media queries lessens, perhaps so will our desire for container queries? Food for thought.