Author Talk: Tim Kadlec on Implementing Responsive Design (Podcast Transcript)
This interview is a transcription of the podcast, Tim Kadlec on Implementing Responsive Design.
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Nancy Aldrich-Ruenzel: Welcome to Author Talk. I’m here today with author and web expert Tim Kadlec. He is the author of a brand new book called “Implementing Responsive Design,” and he’s here to tell us more about it. Tim, welcome and congratulations.
Tim Kadlec: Well, thanks Nancy. I’m happy to be here.
Nancy: So, new devices and platforms are coming out it seems daily. The browsers are changing at a fast clip, and getting our websites to look good on all devices and browsers seems impossible anymore, but then we learn something about this thing called responsive design. Can you tell us exactly what responsive web design is and maybe why it’s changed the way we need to think about designing for the web?
Tim: Sure. So, responsive web design, it’s a technique that was introduced by Ethan Marcotte in 2010, and the whole premise is that it lets you build device-agnostic sites. So you use three existing tools--media queries, fluid grids, and fluid images--and you combine them all under this graphic term responsive web design. And using them, you’re able to create sites that display very nicely at a variety of different resolutions. So with this one site you can add a site that displays just as nicely on a phone, as it does on a tablet, as it does on a computer. And, larger than that, I think it’s a huge shift in the way that we approach building for the web because it’s us acknowledging the fluid nature of the web. It’s always been there, but we were kind of ignoring the specifics with layouts.
Nancy: So it’s not just CSS anymore; we’ve got to think differently. So is it a technique or is it a combination of techniques?
Tim: Well, I think it’s a technique, but I think it’s also…a different approach than what we’re used to. Over the…there were always a few people who would argue for using fluid layouts over fixed width layouts. But it was always a fairly unpopular cry. And until the iPhone came along and people started using their mobile devices quite heavily to browse the Internet,…it was arguable how much we actually needed to create sites that adapted to these different layouts. But now that people are using their iPhones and iPads and their Androids and all sorts of different devices to access the web, the fluid nature of the web, which has always been there, we’re finally kind of having to come face to face and acknowledge it. It’s changing a lot. It’s changing the way that we design, the way we think about it, the way we build, I mean it’s a fundamental shift in this entire medium.
Nancy: So, who did you write the book for?
Tim: So, actually there was one other book out at the time that was written by Ethan, and it was a shorter book, and he crammed it full of a lot of information. But I felt like there was a lot more discussion that needed to be had, because over the time since he had discussed the technique at first, a lot of different best practices had emerged and a lot of things had been learned--you know, hard earned lessons. And so the book was intended to be for someone who is …either not that experienced with responsive web design, or they are and they want to kind of take their knowledge to the next level and see how it affects all the other aspects of…how they’re interacting with things such as content or design of workflow and see some advanced techniques. So the first three chapters kind of layout the basics: that’s that media query fluid grid in fluid images. And then it built on from there to see how does this effect everything else, and also some additional techniques you can use to make closer-to-bulletproof sites (I don’t know if you can ever claim to have a bulletproof site on a web with this many different devices, but closer).
Nancy: So, in thinking about the job functions, it sounds like it could be anyone from a web designer or web developer to content strategists even.
Tim: Yeah, I think that there’s something for everybody to take away. There is a fair amount of code throughout the book, but as I say in the introduction, I don’t think it’s necessary to necessarily follow along and do all the codes to get the value out of it. A lot of the chapters and a lot of the really important concepts that are discussed can be understood and are very applicable to designers or, like you said, content strategists. I think it’s a topic that appeals to a very wide range of people.
Nancy: And how did you go about writing it? Did the process go smoothly, and what did you learn at the end of writing the book?
Tim: Writing a book is hard (laughter). I think it went fairly smoothly. You know, there’s always lessons learned along the way. I would say that it was fun, it was a lot of fun. There was a lot of research that went into it; a lot of email exchanges and phone calls with other people, trying to get an idea for how they were approaching it and really trying to get the nitty gritty of what was going on and how people are tackling this. Writing a book is time consuming, but...I’m pretty happy with the way it turned out. I think in the end it turned out very nicely and I hope that everybody else agrees when they read it.
Nancy: Well we certainly agree, but we’re certainly biased as well (laughter). But really, didn’t a lot of the book come out of the conversations that you had in the community, because it’s a fairly vibrant community of designers talking about responsive design these days, and I’m sure you’ve had many, many conversations with a lot of different folks in the field.
Tim: Oh absolutely. I know that people kind of gloss over the acknowledgements typically in a book, but I tried to point that out there. You know, if anybody ever tells you that writing a book is a solitary act, then they weren’t writing the same kind of book I was, because it absolutely was not. It was so many conversations, so much helpful feedback along the way, and it really pre-dated that. Through Breaking Development, the mobile web conference that we do, I had met a lot of people, had some fascinating discussions there, and that had kind of prompted a lot of the thinking that went into this. I view the book a little bit more of a synthesis of some of the incredible thinking that is taking place around responsive design, more so than it is anything that was a bottled up secret. It was more trying to take that awesome conversation and, like I said, the hard-learned lessons that people kind of already figured out and put them all together in one place so that people would have a guide on how to tackle this.
Nancy: Right, right. Well you certainly are spending a lot of time with the industry leaders. You present at conferences like Web Visions and you also curate Breaking Development. For folks who aren’t familiar with that, maybe you can tell us a little about what that is. I know it’s a leading conference here in the U.S.
Tim: Sure. So actually, so I curate and I’m the co-founder of Breaking Development. It’s a conference that’s focused on web design and development for beyond the desktops, with a strong emphasis on mobile web and stuff like that. We don’t talk about anything native. It’s nothing against native at all; in fact native absolutely has its place. It’s just, I think, the web side of things was under-discussed and I think it’s also to me, at least personally, a little more interesting. So, it’s a biannual conference. We’ve got one coming up in late September, here in Dallas, and then one again in April, in Orlando, with two days of 12 people coming in and giving presentations dealing with this stuff. You know, we try to keep the faces fresh and the topics are always fresh. And then we follow that up with a day of workshops, and it’s been a lot of fun and I think the attendees have a lot of fun. We have them in these big, huge resort-like hotels and stuff, so they’re kind of like a biodome. I think one person explained it as a cross between Jurassic Park and Disneyland. Hopefully, that’s not terrifying. It’s actually quite fun. My favorite part about it is the conversations that take place. I mean, we are hanging out with everybody until 2 or 3 in the morning, sitting around campfires, just talking about the kind of problems we’re facing and how we’re trying to solve that. It’s incredibly exhilarating.
Nancy: Well I’m sure when you started out writing this you were thinking, “Well what I want my readers to learn is x, y and z.” So tell folks what you think they’ll be able to do after they read your book, and maybe you could give us a real world example of that.
Tim: Sure. So…the book kind of builds up from the very beginning. Like I said, the first three chapters [cover] the basics…in case they were coming into the book with no prior experience. By the end of the first three chapters, everybody’s going to be on a similar page and then can explore from there how a Responsive approach affects the planning stages. So, like looking at analytics to determine what devices you need to try and target and test on. How to build a test bed. Into the design workflow, so are we making a mistake using static mockups. Are we designing in the browser or Photoshop and what do we do there? You know, that kind of thing, wire-framing. And once you’ve gone through there then we start looking at content, because content is a huge piece of this. How do you combine it, like service site detections, more robust solutions and ultimately it kind of concludes with a little bit more broader thinking of responsive design, more of a concept. Like, how do we apply this kind of mindset of building for a web that can go anywhere to create richer, more immersive experiences. And so I think that by the time everybody’s done, you’ll absolutely be able to build a responsive design from scratch, but you’ll hopefully, also, be armed with the information you need to be able to…start to readjust, find a workflow that works for you guys with your company for this particular kind of project. So yeah, like I said, I think the goal is that by the end of the book you’d be very comfortable building your own responsive sites and also incorporating that kind of practice into your teams.
Nancy: That’s great. So it’s kind of a two-pronged approach then. One is, you’ve got what you need to design the site, but you’ve also got what you need to re-architect the workflow for the way in which you create your website altogether. So is it going to be easier for people who are creating fresh or those who are kind of reengineering an existing website?
Tim: You know, I think it is, especially if you’re going to build from the mobile first concept--that is, build them for the mobile device first and kind of build up. I think it’s easier going fresh, but we do talk about changing from a fixed width pixel layout-based site and using pixels for fonts and everything like that, and we do talk about how to convert that to more fluid units, so ems for type and percentages and stuff like that for the lists. So there is some value there, absolutely, if you’re going to have to incorporate these responsive approaches into an existing site. And there’s actually…a bunch of sidebars by brilliant, brilliant people, but one of the sidebars is specifically about kind of taking those baby steps. The BBC took this baby step of combining the separate site with the responsive approach and sort of building on top of that, so ultimately it’s their end goal to be responsive all the way across. But again, it’s taking baby steps and applying that to an existing solution.
Nancy: So you don’t have to do it all at once. You can start to just chip away at it.
Tim: I mean, if time allows, then absolutely. But otherwise, yeah, just start chipping away.
Nancy: Great, good. Well, listen Tim, thank you for your time today and congratulations on your new book.
Tim: Thanks, Nancy.