An Interview with Tim Kadlec on Responsive Design
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Mat Marquis: As you know, I have little to no idea how websites work. Can you explain what "responsive web design" is all about?
Tim Kadlec: Responsive web design is a technique introduced by Ethan Marcotte in 2010, which allows you to build device-agnostic websites. Using three existing tools (media queries, fluid grids, and scalable images), you can create sites that display beautifully at a variety of different resolutions.
Mat: So you'd use it to build a site that works equally well on mobile, tablet, desktop, and so on?
Tim: You would, but it's much more than that. The reality is that while certain devices tend to hog all the attention—tablets, phones, desktops—we can't predict what people will be using to visit our sites. We have no idea. I think it's dangerous to focus too much on the specific types of devices.
At its simplest definition, responsive design is a set of tools that let you create sites for all these different devices and more. But on a higher level, responsive design is a profound shift in the way we build from the Web. It's acknowledging the incredible ability for the Web to be accessed by anyone, anywhere, on any number of devices.
Mat: If you're not targeting specific devices and screen sizes, how do you go about determining your final breakpoints?
Tim: Let the content—not the device—dictate the breakpoints. Letting devices dictate breakpoints won't hold up for long. Stephen Hay has an awesome quote for this, which I'll edit for our younger readers: "Start with the small screen first, then expand until it looks like *crap*. Time to insert a breakpoint!"
That's really it. Find the stretch marks in your design, wherever they may be, and when you feel it needs some altering, insert a breakpoint. It sounds unscientific, and perhaps it is, but it makes a lot more sense than trying to use today's popular devices to dictate breakpoints for a site that will have to withstand tomorrow's popular device as well.
Mat: There's a lot of concern that responsive web design means bogging down your code with a bunch of styles and assets that may not apply to the user's context. How do you deal with that, if you do?
Tim: It's a legitimate concern. An awful lot of hefty responsive sites are out there. And while people are optimizing the display of their sites on smaller screens, they aren't giving the same attention to performance. Guy Podjarny of Akamai tested 347 responsive sites and found that 86% of them weigh about the same on a mobile device as they do on the desktop. So even though these small screen sites, typically, look like they're slimmed down a little, they're not performing like it.
One of the major issues is the use of display:none to hide non-critical images and content for smaller screens. Those images won't display, but they'll still be downloaded in the background, resulting in unnecessary bloat.
Similar issues come up with background images. Unless you're careful, you could potentially be downloading multiple background images for the same element, even though only one will be used.
Serving the same-sized images to all displays, instead of resizing them to be appropriate for that layout, is also a major issue. There's no need to serve up an image at 600 pixels to a device that's 320 pixels wide. Retina displays further complicate that issue. I've seen people suggest that you should just always serve up the higher-resolution retina image and call it a day, but that's a horrible idea. That's a lot of heft to throw at a large number of devices that don't stand to gain even the slightest value from it.
Going further, there's this great suite of tools from this company called Filament Group—not sure if you're familiar with them.
Mat: Those Boston guys, yeah? The unbearably talented and inordinately attractive group of developers? I've heard of them, sure.
Tim: Filament Group released SouthStreet, which is this suite of handy responsive tools they've been using. A lot of the scripts included in SouthStreet really help to improve performance. Things like QuickConcat, which concatenates files to save HTTP requests; or AjaxInclude, which lets you pull in chunks of content only when needed, can significantly improve the performance of sites. Definitely worth checking out.
Mat: Where do you stand on responsive web design versus "m-dot" sites?
Tim: It's easy to get dogmatic about this issue, but the reality is that sometimes you're better served by building a separate mobile site—and nothing is wrong with that. But that decision should be made and executed very carefully.
It's also important to remember that responsive design and separate sites aren't mutually exclusive. Companies like the BBC and People.com have built separate sites that take advantage of responsive techniques to extend their reach. Even if you build a standalone mobile site, you should still take advantage of the flexibility offered by responsive design.
All that being said, building separate sites isn't a particularly scalable or future-friendly approach. If you're going to build a separate site, be sure you have a good reason for doing so.
Mat: Very diplomatic.
Tim: Thanks.
Mat: The usual reasoning behind a separate mobile site is to reduce the amount of information presented to "mobile" users—things they might not really need.
Tim: Right. And that's where I'll get a little less diplomatic. A lot of people like to talk about the need for different experiences and content based on this "mobile context." There's this assumption that because someone is using a phone, he or she is suddenly morphing into a task-based user who is interested only in a subset of the content offered on a site. But we really don't have any way of knowing this. People use their phones on the go, at the dentist, at home on the couch. They use them for quick tasks and for casual browsing. Instead of a single mobile context, there are many.
I don't want a crippled experience when I'm using my phone. The content should be the same, and the experience optimized but familiar. The site should be easy to use, but not "dumbed down."
If people have to click on a "full site" or "desktop version," you've failed them. They'll have access to the content they want, but the experience won't be very enjoyable at all.
It boils down to this: We can't make fundamental decisions about what content to display based on a series of assumptions.
Mat: Well said. One final question, and I'm sure it's something that all your readers have been wondering: How do you manage to get your hair so luxuriously soft?
Tim: I'm really glad you noticed, Mat. It's a combination of things:
- First, egg yolk instead of shampoo.
- Second, I found a really good, old-fashioned barber nearby. I don't want to give away who it is, though; because, at the moment, I can basically just walk right in without ever having to wait.
Also—the egg yolk thing isn't real. But if anyone wants to try it, please post pictures.