Responsive Interview with Dave Rupert & Chris Coyier

Dave Rupert & Chris Coyier

Welcome to the first week of the responsive design interview series. Each week we ask our two guests the same four questions about Responsive Design and are showered with brilliance.

This week we’ve got the two hosts of the Shop Talk Show, Dave Rupert and Chris Coyier. As this hits your inbox they will be both chilling out in Hawaii and speaking at a conference or two and running a workshop as well.

Lets get started!


Dave Rupert

Dave is a front end developer who works at Paravel Inc. He is the co host for Shop talk show and writes some very kickass jQuery plugins to help us along with our responsive design builds including fitvid.js and fitext.js.

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

Good question! There’s obviously a lot to choose from but the biggest standout for me is the dConstruct 2012 site by ClearLeft.

They managed to create a rich design with an almost asymmetrical feel all while being mobile first, totally optimized, as well as big and bold. In a single word, it’s “clever”. Every time I see it or see it referenced I marvel at how they put that (small but effective) site together. Worth reading is Jeremy Keith’s article on the optimizations behind the dConstruct site – It really shows the thought that went into making every kilobyte count.

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

Not to toot my own horn here, but I choose FitVids. More specifically, building FitVids taught me a lot about Intrinsic Ratios with CSS and I’ve been playing with those whenever possible. I think understanding how these CSS ratios work unlocks a world of possibilities.

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

I have a long list of things I want to see developed but the list of things I want to see written is even larger. I’d love to see front end designers and developers blogging more about problems they faced and how they solved them. I want more real problems, not hypothetical ones. Don’t say you solved responsive images with 1 line of jQuery without putting that into production on a real website.

We, myself included, need to better document our way through RWD. It’s awkward and complex at times, sharing a reduced test case (on CodePen.io or something similar) can only help teach each other.

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

So this may be a bit of a hot topic, but my advice would be to learn Web Performance Optimization and Progressive Enhancement BEFORE you delve into Responsive Web Design.  There’s been a lot of criticism lately how RWD leads to bloated pages and terabytes of downloads per page, web performance and progressive enhancement teach you how to NOT do those things.

The mark of a great front end developer is someone who understands things like page speed performance.  I could not emphasize how cool it would be if you learned that stuff, then came back and tuned your responsive design.


Chris Coyier

You will probably know Chris from the awesomeness that is CSS Tricks.  He recently screencast the entire redesign of version 10 of CSS Tricks, a pretty damn fine example of responsive design itself. Chris is also behind CodePen which is like Dribbble for web folk that design in the browser.

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

http://www.unitedpixelworkers.com/ is a pretty great example. It’s an eCommerce site, so they have a lot of “stuff” they need to get onto any given page. RWD is a much easier task on sites like simple blogs where it’s just a column or two of text. They had to deal with titles and descriptions, photos (large and small) with interactivity, charts, inventories, pricing, grids, forms, navigation, a shopping cart – really quite a bit to tackle. They handled it all nicely. It looks great at any size, including “super huge” which is somewhat neglected in RWD.

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

Media queries are a huge part of RWD. Thus, being able to use them in CSS really efficiently is a big deal. Sass helps tremendously with that, particularly nesting and naming them as I’ve described here. I like the idea of having media queries control more than just design breakpoints though. I like Enquire.js for using them in JavaScript too. It’s a fairly simple library that runs callbacks when media queries become matched or unmatched. That means you could ajax in additional (or different) content for different screen sizes. But media queries can match on more things than screen size. I can’t wait until we have reliable native bandwidth testing, which I think is likely.

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

I’d like the idea of RWD to keep growing and expanding until it circles back around into “web design.” Where it’s not a special thing anymore, it’s just how we do things. I’d say you have a good year or two at most with this newsletter =).

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

Remember that working on websites is solving problems. RWD is a tool for solving certain problems, but isn’t in itself a solution.

For example, problem: a website that sells t-shirts has poor conversion rates on small screens. Analysis shows that checkout process is extra confusing because of off-screen and too-small buttons. Solution: change layout of page to make those things more obvious and easy to use. Tool to get there: RWD.

That’s different than, say, Memo From Boss: Hey, I heard RWD is the future, let’s have meetings and start implementing it right away. That’s treating RWD like a solution in itself.


Wrapping up…

That’s it for this week, a big thanks to Chris and Dave for being a part of the series. Next week we will have Paul Robert Lloyd & Laura Kalbag sharing their ideas with us.

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 $3.99

8 Responses to “Responsive Interview with Dave Rupert & Chris Coyier”

  1. Tom

    Brilliant! Chris and Dave are always brilliant on the Shop Talk Show, it seems they’ve continued the same thing here as well.

  2. Mike

    Dave Rupert & Chris Coyier two of the best! everytime I search for something related to web design et all Chris seems to appear everywhere! which is good as I find great value in his pages

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=""> <strike> <strong>