Responsive Interview with Laura Kalbag & Paul Robert Lloyd

Laura Kalbag & Paul Robert Lloyd

Welcome to the second week of the responsive design interview series. Each week we ask our two guests the same four questions about Responsive Design and listen intently with what they have to say.

This week our two guests hail from England (soon to be my new home), Laura Kalbag and Paul Robert Lloyd.

Lets get started!


Laura Kalbag

Laura is a freelance front end developer who recently went through the very difficult process of redesigning her own website, responsibly responsively too! When Laura isn’t working on client work she’s speaking at events and sharing her wisdom onpodcasts.

What was the best implementation of RWD you saw in 2012 and why?

I love what Paravel have done with the Microsoft.com homepage. It’s made the site simple, straight-forward and beautiful (not what you’d often expect from a Microsoft website!) and also echoes the look and feel of Windows Phone 7 and Windows 8. It’s a fairly standard combination of  3 column to 2 column to 1 column depending on viewport width and this could feel a little simplistic and “default responsive design” if it weren’t for the smart use of SegoeUI as a font which gives the site a sophisticated and subtly branded feel at all widths.

What are 2 RWD Frameworks/Plugins/Shims/etc that you recommend/couldn’t live without?

<meta name=”viewport” content=”initial-scale=1.0, width=device-width” />

I don’t like using frameworks and similar on my sites. I create the HTML and CSS from scratch because:

  1. it ensures I’m using exactly what’s needed and nothing more
  2. my HTML is very readable, semantic and accessible.
  3. my CSS is very readable, minimal and easy to expand upon in the future

I find most frameworks are bloat and developers use them without understanding exactly what the markup is doing. I think the smartest thing to do is to go into those frameworks, find out exactly what parts are useful to those projects and integrate those parts only into your markup in a clean and meaningful way.

What is the one thing with RWD you would like to see improved/developed in 2013?

Like most people, I’d say a decent HTML (probably element) solution for images. I hate loading up massive images on low bandwidths but I feel like there’s no faster solution that would perform well across all devices. Some kind of image solution where the browser can choose the optimal image/image size/image compression based on the viewport size and bandwidth would be ideal.

If you could offer 1 piece of advice around rwd what would it be?

When you’re designing for a responsive site, try not to focus on creating different designs for different viewport sizes as much as the design system as a whole. Think about the elements of your design that will be continual and consistent across any device (such as typography, colour, shape and form) and those that will need to be different across viewport widths (such as layouts and grids.) It’s these design elements that should dictate your approach to responsive design.


Paul Robert Lloyd

You might not know it but you probably have already read some of Pauls stuff.  Remember the .NET responsive week where they took you through 5 detailed steps to building a responsive design? Paul was your teacher. When he’s not writing for magazines he works at Clearleft where he also leads the design for Fontdeck.

What was the best implementation of RWD you saw in 2012 and why?

Far and away, 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’ve been 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 only 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 this site could easily become a shining example of responsive design.

What are 2 RWD Frameworks/Plugins/Shims/etc that you recommend/couldn’t live without?

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 RWD you would like to see improved/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. I believe 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 1 piece of advice around rwd 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). Honestly, 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.


Wrapping up…

That’s it for this week, a big thanks to Laura and Paul for their time. Next week we will have Brad Frost & Andy Clarke wowing us with their awesome intellect.

Thanks for subscribing!

Responsive Design Ebook

A collection of interviews, tips, tricks and some responsive sketch pages in one easy to download file.

Learn from more than 26 leading responsive design experts across more than 80 pages for the price of an expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.

Buy Now for just $6.99

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>