Responsive Inverview with Tim Kadlec & Mat Marquis

Tim Kadlec & Mat Marquis

Welcome to the final week of our interview series, and there are some great guests to go out on as well. For those who have only just joined us let me bring you up to speed – over the past eight weeks we have asked two guests who are well known in the responsive game the same four questions about Responsive Design and listened intently as to what they have to say.

Over the past few weeks I’ve been made to feel all warm and fuzzy with emails from readers to say how much they’re enjoying the newsletter as well as emails from our interviewee’s to say how much they’ve enjoyed the interview series. With that in mind I’m looking to continue the series as a fortnightly option along with the usual newsletter content. If that is something that you would like to see then send me a tweet and mention who you would like to see interviewed.

For the last time in the series, lets turn our attention to Tim Kadlec and Mat Marquis.

Tim Kadlec

Tim is an independent web developer and author of the brilliant book Implementing Responsive Design: Building sites for an anywhere, everywhere web as well as a contributing author to the Web Performance Daybook Volume 2 and in a past life co-founded Breaking Development Conference and weekly podcast.

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

Close one. I really like the new An Event Apart site. Not only is it easy on the eyes, but they really took performance to heart. They use SVG icons where they can, falling back to PNGs if they have to. Images are lazy-loaded as they come into view which makes the initial page load faster. It’s just really a well-built site.

Notre Dame is another standout. They’re one of the more performant responsive sites on small-screens (~300kB). I would love to see them bring the desktop size down as well (3MB is too hefty) but they’re at least giving performance attention. They do this through some creative lazy-loading as well as some clever use of RESS.

They’re also trying to take advantage of the unique capabilities of some devices. For example, if you view their list of Campus Tour Locations they use geolocation to determine if you’re on campus. If you are, they determine which locations are closest, tell you how far you are from them, and offer up walking directions. It’s a subtle, but helpful, way of optimizing the experience based on the user’s context.

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

The matchMedia polyfill is a given, I think. Lightweight, simple, and very useful.

I love the Filament Group’s AjaxInclude pattern. It’s such a simple way to improve the performance of a site. It’s also a really nice way to reduce clutter on small screens while still making that content available to users. While their implementation uses jQuery, it’s not to hard to implement the pattern in vanilla js.

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

Better performance. There are a bunch of beautiful responsive sites being produced, including some from big name companies. But most of them are just plain fat. I was recently going through a bunch of the more highly-publicized responsive launches of the year and checking out how they perform on a small-screen. The results were a little disheartening.

  • 74 requests, 1500kb
  • 114 requests, 1200kb
  • 99 requests, 1298kb
  • 105 requests, 5942kb

When I opened the last example above over a simulated 3G network, it took over a minute and half to load! We are making sure sites display nicely on the wide variety of devices, but we’re forgetting that the speed and quality of the networks in use varies just as much.

These sites don’t have to be this large. We need to make sure to apply the same care and consideration to performance that we do to visual design. Performance is a fundamental component of the user experience—it can’t be an afterthought. As Luke Wroblewski pointed out“Being a Web designer & not considering speed/performance is like being a print designer & not considering how your colors will print.”

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

Think beyond the layout. Screen size and resolution aren’t the only variables. The capabilities of the device, the constraints of the network in use—these things must be considered as well.

The web is an interactive medium. To capitalize on its potential, we have to give these other factors the same kind of attention we give to the visual aesthetics.

Mat Marquis

Mat (@wilto) works at The Filament Group in Boston, a company that designs engaging sites and apps for mobile, tablet, and desktop platforms. He is a designer and a developer who occasionally works independently with big-time clients like The Boston Globe. Mat also regularly writes articles for the A List Apart blog.

Most recently of note Mat kicked off and still chairs the Responsive Images Community Group.

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

I dig Web Platform for a number of reasons—the content, the goals, and so on—but I also think it has the potential to be a really clever showcase for RWD. I mean, they’re going to be shaping massive amounts of content. It’s still early yet, but I’m really looking forward to seeing how it shapes up.

Microsoft has a really sharp new responsive homepage, thanks to the powerhouses atParavelPolygon is fairly heavy in terms of bandwidth usage, but from a strictly presentational viewpoint they’ve done an amazing job.

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

It’s not really RWD-specific, but it only took a few weeks before I was completely incapable of functioning without Ben Alman’s Grunt.js. I’m not a big fan of using pre-rolled CSS frameworks in general, really. Where one of the big objectives of Responsive Web Design is to tailor the layout and breakpoints to suit the site’s content, starting with a prescriptive framework usually means I end up doing a lot of editing and shoehorning after the fact.

In terms of plugins and shims and such, I never leave home without Scott Jehl’sRespond.js — and, perhaps predictably, Picturefill. In terms of building a site from a progressively enhanced and extensible baseline, I always start with some combination of scripts from Filament’s SouthStreet toolkit.

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

Hah, number one on my list to Santa is no big secret—I want to see some native `picture` implementations. The average website today is more than a megabyte, and more than 60% of that is in images. That’s pretty gross to begin with, and it’s only getting worse as more and more developers scramble to build “Retina ready” sites.

The trouble is that we tend to look at this stuff from our own privileged contexts: tons of bandwidth and ultra-high-resolution screens hot off the assembly lines. Building websites for our own familiar, comfortable context means excluding the tens of millions of users in developing countries that only know the web by way of feature phones or slightly better; users paying for every single kilobyte they consume, who already have to keep tabs on which sites to avoid day-to-day because of the actual economic cost of visiting them.

Irresponsible asset delivery is practically invisible to us when we’re careless about it, but stands to harm the experience of millions of users on the web. So, if you’re ever wondering why I make so much noise about this stuff: it’s to keep this issue front of mind for everyone. Myself included.

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

Man, rethink everything all the time. I feel like we all kind of fall into a rut of doing things because it’s “how we do things.” Like, without giving it a hell of a lot of thought, I’d been using spritesheets in my CSS a-la-1999 up until a few months ago. Out of nowhere, it kinda hits all of us in the office that spritesheets are rediculous, and we live in the future. A “there’s gotta be a better way” moment, y’know? That led us to a badass little project named Grunticon, that takes a directory of SVGs and produces a data-URI’d SVG stylesheet, one for data-URI’d pngs, and a non-data-URI’d sheet linking to generated pngs for old IE. It then loads the most appropriate stylesheet based on the presence of SVG/data-URI support—so, all the benefits of sprited backgrounds (in fact, one less request), but using scalable graphics in any browser that supports them. It’s awesome, but it never would have happened if we didn’t stop and re-think something we’d all just kind of always done.

I have “there’s gotta be a better way” scrawled across the whiteboard in front of my desk for that exact reason. There’s always a better way.

Wrapping up…

That’s it for this week… and for the series. A big thanks to Tim and Mat for this week and again to every one of our 16 interviewee’s over the past 8 weeks. If you missed any of the interviews you can re-read them in the interview series section of the website.

Thanks for subscribing, and see you all next week back to our regular program.

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>