Responsive Interview #6 – Matt Griffin & Ben Callahan

Welcome to week six of the responsive design interview series, and a very Happy New Years to you all! 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 we’re back to the US to talk to Matt Griffin from Bearded and Ben Callahan from Sparkbox.

Lets get started!

Matt Griffin

Matt Griffin is a designer and one of the founders of Bearded. He has a great love for letterpress printing, which he acquired while attending Indiana University in Bloomington, Indiana, where he received a BFA in Graphic Design. Matt is an avid advocate for collaboration in design, and has been published in A List Apart and .net magazine. You can follow Matt @elefontpress.

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

I’ll go with two:

http://lorenzoverzini.com/
Super simple and gorgeous. Details like the interactive logo and blinking eye icon are delightful. Really shows what having a small scope and tight focus can do. Of course, in this particular instance, you also have to be insanely talented.

http://www.polygon.com/
These folks are taking some great risks that really pay off. Sure there are obvious bugs and problems – and my guess is that more will become apparent as their content grows – but the leaps they make in bringing visual impact back to RWD are worth the stumbles. In most disciplines there are innovators and there are masters. The people behind Polygon are the former – bravely breaking new ground so the rest of us can work out the kinks later.

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

Respond.js to help us out with IE support, and our custom RWD grid system for layout. Shameless, but true.

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

Let’s say it all together now: RESPONSIVE IMAGES. OK, now that that’s out of the way: I’d like to see beauty and fun make their way into responsive design. Many of us who are working on RWD have been so preoccupied with technical innovations and major philosophical shifts, that we’re being pretty conservative with aesthetics and interaction. There’s nothing wrong with that, but it does remind me a bit of the early days of CSS layouts. As we all start to get our bearings in this new device-agnostic universe, I’m confident that visual fanciness will work its way into the RWD vocabulary.

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

Design and build for the unknown. Let go of control (you don’t have it), let go of perfection (you won’t get it). Stop designing page layouts and start designing the parts that make up those pages. Then go write rules for how those parts are treated, given different contexts. It is almost certain that you will never see your work on every device, in every browser, on every OS that your users will be using. So let’s stop acting like there’s an ideal situation (say, ahem, for instance – Webkit on your big beautiful Apple display) and plan on the unknown. Plan for imperfection. I’d prefer to have my designs look 80% awesome 90% of the time, rather than 100% awesome, 20% of the time. With the right mindset and approach, I think that’s perfectly attainable – even in the growing chaos of this wild and wonderful webosphere.

Ben Callahan

Ben Callahan is the President of Sparkbox, a team of ten people striving to build sites that are a joy to use regardless of the device you’re browsing from. He’s created a fun responsive retrofitting bookmarklet on GitHub, awesome to begin experimenting with client websites. Ben is also the co-founder of the Build Responsibly Workshop series. You can find more of his writing on his website, and you can get in touch with him @bencallahan.

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

This is a crazy question. 2012 has seen so many responsive launches that it’s almost impossible to say. Instead, I’ll give you a few and highlight why I like these in particular.

dConstruct 2012 Responsive Conference Site
There’s nothing overly groundbreaking about this one, but I wanted to call it out because I think they’ve done something unique with the navigation. A lot of times we tend to ignore factors other than layout as we shift from larger to smaller viewport widths. In the case of the dConstruct navigation, notice that the nav itself is actually much larger—much easier to touch—at smaller resolutions. They’ve taken care to minimize the amount of vertical real estate required for smaller viewport widths by placing the larger nav behind a “Menu” link with the quickly emerging three line pattern indicating navigation. It’s this kind of attention to detail that makes the dConstruct site one of my favourites.

Microsoft Responsive Corporate Site
When I heard that the crew at Paravel was working with Microsoft on this redesign, I was giddy. We (Sparkbox) have a huge amount of respect for those guys and they demonstrated why with the Microsoft project.

This redesign takes the Microsoft brand to a whole new level—and I don’t just mean visually. Don’t get me wrong, I love some of the techniques they used, but my choice to list this site among my favorites is really because of the way it elevates my perception of the organization.

One other tiny element that I really do appreciate… At wider viewport widths, the navigation has fairly sizable drop-downs. The guys at Paravel opted not to hide this content behind a CSS :hover, but instead behind a “click” or “touch” event. We did this on http://dpandl.com, and I really believe this will be something we see much more of in the future. I will say that I was surprised that the navigation has no fallback in cases where JS is not available. This essentially means you can’t navigate the site without JavaScript. Maybe I’m just getting old, but it seems like a simple step to add support with a standard link and just prevent default with JavaScript…

Skinny Ties Responsive E-Commerce Site
Brendan Falkowski handled this redesign with an amazing attention to detail. I love the visual dropdowns, I love the prioritization of content and function at smaller resolutions, I love the overall aesthetic. This is a really beauty and a great step forward for responsive in the e-commerce space. I think all that’s needed now is for a large e-commerce player to jump into RWD. The stats from Skinny Tie’s redesign may just be compelling enough to push some of the big boys in…

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

This isn’t really specific to RWD, but we have found Modernizr to be incredibly useful in our work. It really does simplify the feature detection process. I also use theMedia Query Bookmarklet pretty much everyday. This simple little tool gives you real-time information about the viewport width and height in both pixels and ems. Then there’s Sass, which has completely changed the way we structure and link our responsive stylesheets. Pretty much everything that Scott Jehl writes is useful, most recently we’ve used his Ajax Include Pattern to quickly prototype some pretty awesome stuff. If you’re looking for grids, I highly recommend using a semantic system like The Semantic Grid System, or Susy. And, I hear that the latest version of Bootstrap has some of these kinds of semantic grid helpers as well.

I could go on all day…

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

I think we need to start thinking beyond layout. There are so many other considerations: performance, content and function priority, readability, usability, interaction model, cross-width consistency, etc. Up until now, most sites I see have really just focused on taking a bunch of stuff and making it fit on small screens. There is a lot more to responsive than this. We have to push beyond the three core techniques that Ethan outlined for us, we need to start thinking responsively.

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

Get into the browser. Now.

This might sound a little trite, but I really mean it. You can’t just draw pictures of websites anymore. We work on the web, we need to start working in our medium as early in the process as we can. Yes, it’s difficult. Yes, it’s going to slow you down at first. In the end, it will be worth it.

Wrapping up…

That’s it for this week, a big thanks to Ben and Matt. Next week we have Trent Walton and Jeremy Keith in our second to last interview.

Thanks for subscribing, I hope you had a great News Years and good luck in 2013.