Responsive Interview with Laura Kalbag and Paul Robert Lloyd
Back in 2012 I asked the same 4 questions to a small number of people that contribute consistently to the community through the way of writing and speaking and building out demo’s for us to all follow. This year I’ve asked them to answer those same questions 3 years down the line… lets see what they have to say.
I will keep the same order as the last time, which means this week we will hear from Laura Kalbag and Paul Robert Lloyd (I’ve reused the old image, so imagine them 3 years older).
Without further ado, welcome back to the interview series.
Laura Kalbag
Laura is a former freelance front end developer who now works as a part of Ind.ie. Laura’s recently been posting about using Flexbox to build a universal video player.
What was the best new implementation of RWD you saw in 2015, and was there a redesign that took your eye?
It might sound daft, but the redesign that I most anticipated in 2015 was fetch.co.uk, the pet shop from Ocado. We’ve come to a point where RWD is the norm, and so when a site doesn’t work on your phone, or when you’ve got your browser set at half the width of your screen, it’s a scrollsome pain. All I wanted to do
was buy dog food on my phone! Fetch kept their beautiful simple design, and just made it work across all my devices.
What are 2 RWD Frameworks/Plugins/Shims/patterns that you always seem to go to?
- Flexbox is starting to change the way I do responsive design. It allows me to dictate sensible micro layouts such as “always align these navigation items to the center, whether they’re broken on to multiple rows or now” and “Whatever the width of the rest of the content, make
sure this element stays stuck to the right.” Combining flexbox with media queries also really helps reduce the amount of CSS. - Some kind of CSS pre-processor. Every now and again I write vanilla CSS with media queries and remember how painful it can be. Nesting makes it easy to see the relationship between the child elements and media queries, and allows us to group elements that need to change at the same viewport width.
The pre-processor itself doesn’t matter. Sometimes I use Sass, sometimes Stylus. Sometimes I use it with an automated build process, and sometimes I use CodeKit.
What is the one thing with sites you would like to see improved/developed in 2016?
Element queries. When I was working on making the Universal Video Player responsive, I had to make a few less-than-ideal design decisions to make it look good at any size, no matter whether it was dropped into a full-width layout, or a narrow column. Element queries would
make modular design far easier, allowing you to dictate design based on the element size rather than the viewport size.
If you could offer 1 piece of advice around building responsively what would it be?
When I wrote my response in 2012, I talked about design systems. My advice this year is an extension of that, but with hindsight. Don’t make your style guide or design system better than your
site.
Style guides and design systems have been heralded as a great way of working with responsive design, as it encourages a modular way of thinking. I agree, they’re brilliant.
But as a community, we can become a little obsessive over our tools, languages and processes. Some designers and developers seem to be more proud of their systems than they are of the sites themselves.
It makes sense. We have more control over our systems, they don’t get broken by unpredictable content, and we can spend hours honing them to perfection. They’ve become the modern equivalents of our Photoshop mockups using Lorem Ipsum. But the real people who use our sites aren’t looking
at our style guides and design systems, they have to experience whether they actually work in the context of the site itself.
Paul Robert Lloyd
Paul is an independent designer, writer and speaker based in Brighton, England. Paul helps responsible organisations create purposeful digital products.
What was the best new implementation of RWD you saw in 2015, and was there a redesign that took your eye?
Looking back at the answer I gave in 2012, it’s worth nothing 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.
What are 2 RWD Frameworks/Plugins/Shims/patterns that you always seem to go to?
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!
What is the one thing with sites you would like to see improved/developed in 2016?
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?
If you could offer 1 piece of advice around building responsively what would it be? (can be strategy, design, code, anything else)
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 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.
I love it when someone ends of a pun (food for thought/ingredients…. come on that’s pretty funny). That’s all for this week, thank you very much Laura and Paul for your contributions once again.
Next week we’ve got Brad Frost as one of the interviewee’s which should be awesome…
A few people asked when if the notebooks would be available for Christmas, but it’s taken me longer than expected to get the site up and configured and the notebooks sorted and wrapped so rather then be busy at the post office in the lead up to Christmas they will be available for purchase, but
they won’t be sent until the new year.
The next interview is hitting your inboxes on Christmas morning, so consider it something to up-wrap on any new devices you might be lucky enough to get.
See you next week!
Justin.
