Episode Transcript

Karen:

Hi, this is a Responsive Web Design podcast, where we interview the people who make responsive designs happen. I’m your host, Karen McGrane.

Ethan:

And I’m your other host, Ethan Marcotte.

Karen:

And this is a very special year-end retrospective. How was your year in responsive web design, Ethan?

Ethan:

It was special, as you said, Karen. Not least because we’ve had the support of some incredible sponsors—and in 2016, we’re excited we’ll be kicking off the year with GatherContent as a sponsor in the first quarter.

GatherContent is a wonderful content collaboration platform that helps teams plan, organise and produce all of their web content in one place. We’re excited to have them as a sponsor, as they want to make collaboration easy. GatherContent lets you centralize the editorial process, allowing team members to easily edit and approve content. They offer simple workflows and structured templates, leaving off the mess of mailing tons of Word documents around.

What’s more, GatherContent’s designed a powerful API, allowing you to take your content wherever it’s needed: whether it’s publishing to your CMS, or pulled into an in-browser prototype, or directly into your application. If you’re looking to make your website responsive, you might give GatherContent a look. Check them out today at gathercontent.com. They’re pretty great.

And it was actually a heck of a year for the podcast. I mean, I don’t know, I was looking back over everyone we interviewed for 2015 and it is an intimidating list. You know, we started the year off with Nieman Lab and then pretty much went from there to covering pretty much every government website that’s ever gone responsive, from AIDS.gov onward, to the USDS. And just, yeah, it’s been kind of an intimidating list of folks that have been on here, so this has been kind of amazing.

Karen:

I’ve been really impressed by—I noticed that there’s a lot of big names on this list, there’s Facebook, and Netflix, and the BBC, and Google—but I’m actually even more interested in some of the names that are less familiar but that I think are doing some really interesting things with responsive design. I’ll mention a couple of my favorites, if you don’t mind.

Ethan:

Oh, oh, I don’t mind at all.

Karen:

[laughs] It’s like we can tell, listeners, from the analytics data on our podcast, which episodes you’re listening to and which ones you’re not, and there’s some really good episodes out there that we think you haven’t listened to. One of my personal favorites is the interview that we did with OZY. So, OZY is a… I guess I might even call them a mobile-first publisher. So, they are a relatively new brand and started out focused primarily on the mobile experience, but went responsive. And I thought that that interview just hit all of the marks; I thought, from start to finish, the process that they outlined was just really impressive, and that’s, I think, maybe one of my favorite episodes from this year.

Ethan:

Yeah, me too.

Karen:

Another one that I absolutely loved was the interview that we did with Citrix. So, I thought that one was fascinating because they were talking about an intranet, and I think that’s one of those, like, “Where no person has gone before” responsive design problems that, when you think responsive design, you think, you know, retailer websites, maybe government, certainly publishers… But I don’t know that people necessarily jump to thinking that the intranet has to be responsive, because you’re like, “Well, but everybody’s going to be sitting at their desk, on their desktop computer.” And so for Citrix to outline why they thought it was so important that they go responsive and focus on the content and implement a much more streamlined intranet was, I thought, a fantastic case study.

Ethan:

Yeah, I couldn’t agree more, those are two stellar episodes. Another one I really liked was our chat with Brandon and Sophie from Ushahidi. This was another sort of like deep-cut episode from our archives. But if you’re looking for a really wonderful case study for responsive design, especially for a product that has to be working in developing markets, for audiences that are still favoring SMS means of communication, it’s a really wonderful example. It’s a beautiful product, and just hearing some of their use cases for why they had to go responsive was actually kind of compelling as well.

And then there’s the wonderfully named Moosejaw, and Karen, I know this is a personal favorite of yours. [laughs]

Karen:

[laughs] So, I loved being able to get the team from Moosejaw on because they had a great story of going responsive way back in 2011. So, long before most retailers actually implemented a responsive redesign, they did a retrofit. And then this year, they implemented a complete “soup to nuts, burn it to the ground and start from scratch” responsive redesign, and I thought that was a really interesting story, what the trade-offs are between doing a responsive retrofit versus doing it from scratch.

Their CEO was on the show, and I think that the world would be a much better place if every company had a CEO that started out running IT, then moved over to run marketing, and then eventually became the CEO of the company. That’s like, what I wish for every company that they would have a CEO that had that kind of background.

Ethan:

[laughs] That’s fantastic. And that’s kind of a nice pairing with another one of our episodes we were talking about before we hit the record button, which is the City of Surrey.

Karen:

That was a great one.

Ethan:

Yeah, no, that was a wonderful one. I mean, I know both of us, I don’t think I’m speaking out of turn here, we’re both really big fans of civic design in general and this is a really wonderful example of how a city just kind of realized that most of its population were effectively going mobile, and as a result, they really needed a responsive strategy to help meet them wherever they were.

Karen:

You know who else needed a responsive strategy?

Ethan:

Oh, who was that, Karen?

Karen:

The Toast.

Ethan:

Really? Tell me more about this upstart little publication.

Karen:

[laughs] Let’s talk about The Toast for a while, shall we?

Ethan:

[laughs]

Karen:

So we, ourselves, working with Aaron and Eileen from Webmeadow, and Jeff Eaton from Lullabot, pulled off a redesign for the website The Toast this year. And honestly—I’m not just saying this because you’re on the phone, Ethan—that was one of my most favorite projects that I’ve ever done in my entire life.

Ethan:

Yeah, same. I mean, it was a wonderful client, first and foremost, and it’s one of those redesigns, kind of like working on The Boston Globe back in 2010, that it made me into a reader of the publication even though I wasn’t before, and I’m spending entirely too much time on this new responsive website we made them.

Karen:

Right. Make sure you get enough to eat at holiday parties, that’s my advice.

Ethan:

[laughs] And stay away from owls, sure.

Karen:

[laughs]

Ethan:

Yeah, no, but it was a great project, we learned a lot. We had Jeff and Eileen on the podcast to kind of talk about some of the lessons they learned and some of the things that they learned from an implementation standpoint, from a content strategy standpoint. And yeah, I’m kind of sad the project is over, frankly.

Karen:

Well, there could be more projects like that in the future if people wanted to hire us to do that kind of work…

Ethan:

Wait, is that a thing that could happen?

Karen:

That—that’s… “A word from our sponsor here…”

Ethan:

[laughs]

Karen:

Teams that might be interested might want to check out the retrospective or the write-up that we did of the process. So, we’ve put together a really nice case study—if I do say so myself—of the work that we did, and I think the piece that Eileen wrote on how important the taxonomy was to The Toast is a really interesting point-of-view on how the work that gets done under the hood with the content model and the taxonomy is really crucial to ensuring that the website is browsable and findable and reflects the brand of the product. And I thought Eaton’s write-up of the dark arts that he pulled with WordPress was also a really good look at a platform that most of us don’t work with all that much.

Ethan:

Yeah absolutely, it was the nicest WordPress I’ve ever worked on, and if I ever have to work on another one, I’d love to do it with Jeff Eaton.

Karen:

Right, exactly. I think Jeff is really excited about his future career in WordPressing.

Ethan:

[laughs] So much joy in his voice when he talks about this time. But yeah, no, it was a great project, and Karen, I’m really excited you and I actually have other potential projects lined up in 2016. But if anyone is listening to the podcast or follows us on Twitter and you also have a big responsive redesign that you’re about to undertake, we’d love to hear from you.

Karen:

Yeah. And I’ll also mention that we’ve got a couple projects that we’re not talking about quite yet but we’re very excited about, and one thing I’m excited about for both of those is that they’ll both be on Drupal 8. So, fun times ahead with Drupal’s latest content management platform. I’m excited to try that out.

Ethan:

I’m excited to do a Drupal thing.

Karen:

Yes, yes, it’s equally special in its own special way.

Ethan:

[laughs] Well in terms of special things, I think that this is a tradition we have going now, where every time we do one of these “You & Me” episodes, we just have to talk about books.

Karen:

Books.

Ethan:

Books, yeah.

Karen:

Books. So, when we did this retrospective last year, we were both just getting started writing books. And now, we have finished and published books.

Ethan:

Yeah, those are available for purchase thanks to the internet and capitalism.

Karen:

You can buy them on abookapart.com.

Ethan:

A Book Apart Dot Com, exactly. It’s one of my favorite dot-coms out there right now. But yeah, how are you feeling now that you’ve gotten this thing in the can and it’s done and dusted and in people’s hands?

You should most certainly go out and buy ten, twenty, fifty copies of the book and hand them out to everybody that you know.

Karen:

I am very pleased with how that book turned out. It was… I often describe it as a very different process from writing my first book, Content Strategy for Mobile (which is also available from abookapart.com). The first one really was like a little piece of my soul. It was a point-of-view on content modeling and content structure for multi-platform publishing that I think really encapsulates a lot of the reasons why I care so much about content strategy and information architecture.

And this second book, Going Responsive was really… I might even describe it as actually a book about organizational culture and process that was wrapped up in a story about mobile. It was much more about what changes need to happen in your organization in order to make a successful responsive redesign happen.

I haven’t gotten a lot of questions from people about the book, but the one question that does seem to come up a lot is, “How do I convince my company that they should do this, that they should go responsive?” and my answer to that would be: “Well, you should most certainly go out and buy ten, twenty, fifty copies of the book and hand them out to everybody that you know.”

We’re both digital professionals, but there’s nothing quite like actually seeing a printed copy of your book and holding it in your hands.

Ethan:

[laughs]

Karen:

A Book Apart offers bulk discounts, so don’t let that stop you from buying as many copies of the book as you can.

Ethan:

Right, start a workplace book club, that’ll definitely help unpack some of those big questions. Definitely, definitely.

Karen:

Yeah. How about you? How do you feel about your book?

Ethan:

You know, I’m really excited that it’s out. It was kind of a whirlwind…

Karen:

It’s nice to have it be done, right?

Ethan:

It is, it is. And as we’ve both said on multiple occasions, we’re both digital professionals, but there’s nothing quite like actually seeing a printed copy of your book and holding it in your hands.

Karen:

Your book is so beautiful. Like, getting a copy of that in the mail was a real highlight for me.

Ethan:

Oh, well back at ya, man. The color on Going Responsive is… Jason Santa Maria outdid himself on I think both of these covers, but the blue he chose for yours is regal as hell, let’s put that out there.

Karen:

Very professional, appropriate for the business person in your life.

Ethan:

[laughs] Yeah. But it feels good to have it out there. So, it’s titled Responsive Design: Patterns & Principles, and as I’ve mentioned before, it’s really about designing more modular systems for responsive design.

As we’ve heard from a bunch of our guests, from Capital One on up, thinking about pages when you’re approaching a responsive redesign isn’t really an effective way of thinking about it. It’s really helpful to start a level below that, like look at the individual components that are going to comprise your design and think about how those need to be responsive, and then sort of stitch them together to build a larger system. So it’s looking at specific challenges with some of those different parts of the design, talking about how other people have approached, say, their responsive navigation systems. But it’s also about some loftier, sort of pie-in-the-sky principles that can be applied to other parts of your responsive work as well.

And yeah, so it feels good to have it out, and a bunch of people have been saying nice things on Twitter, which has been really exciting; Susan Robertson was really, really kind to write up some thoughts on her blog, which was really kind of wonderful to see. She does a great job with pulling out quotes—like she did on your book too, I think.

Karen:

Yeah, she did a very nice write-up of my book too that I was quite grateful for. She is lovely.

We need looser frameworks, more nimble frameworks, frameworks that you and your team or your organization actually use to determine and define what constitutes a good responsive design.

Ethan:

She is a wonderful person who also does fantastic front-end work. And yeah, but I just love her review formats. And then there was a gentleman named Steve Barnett who actually did a sketch note review for my book, which I hadn’t seen that before, but that was really nice. So, thanks for that, Steve.

But yeah, other than that, there’s been a lot of sort of nice things being said. There have been some interesting questions that have come out of the book since then. One of the first ones that kind of came out, if anyone here reads A List Apart, there was an excerpt published for both mine and Karen’s book when they came out, and one of the comments that kind of came out of that article, which was about frameworks, talking about how some of our layout frameworks, sort of off-the-shelf CSS frameworks like Bootstrap or Foundation, are great and valuable but not necessarily ideal for production work—this a theme that people took away from the excerpt.

The larger point I was trying to make in that excerpt and kind of in that chapter of the book was really kind of how these frameworks are still very much desktop-first products, they’re still focused on building a twelve or sixteen-column grid and then sort of thinking about how to adapt them for certain sizes of screens. And now that we’re moving further and further beyond the desktop and even beyond mobile, I think we need looser frameworks, more nimble frameworks, frameworks that you and your team or your organization actually use to determine and define what constitutes a good responsive design. So, talking less about layouts and breakpoints and more about aesthetics and quality, I guess.

Karen:

Yeah, I spoke about this a little bit when I talked to Jen Simmons on her fantastic podcast a couple weeks ago.

Ethan:

I still haven’t listened to that, but The Web Ahead, right?

You’re sidestepping the core work that your team needs to do, which is figuring out what is the underlying content model, and how will these patterns be used, and what should we call them?

Karen:

The Web Ahead, yes. You can read the transcript, if you wish to have that done a little faster. And one of the things that really resonates with me when I think about the limitations of frameworks is the idea that, using something like Bootstrap, it comes bundled with all of these assumptions and names and decisions that have already been made, and that those are decisions that actually need to be worked out among the team to figure out what things should be named or how things should be labeled, and that that process itself is really the heart of what you should be doing with a pattern system.

There’s a great A List Apart article on the language of modular design, there’s a quote that I really like about how if you give something a presentational name that will limit its use. Really I think that the process, whether you’re using a front-end framework or any other system that might be designed by somebody else where they’ve come in and said, “Here are the labels that you should use for different patterns,” it’s like you’re sidestepping the core work that your team needs to do, which is figuring out what is the underlying content model, and how will these patterns be used, and what should we call them as our team?

Ethan:

Yeah, I couldn’t agree more. And that article—this is the worst thing about actually printing a book and shipping it, because at some point there’s going to be some amazing resource you want to include that just sort of missed the deadline.

Karen:

Katel is no longer speaking to me because of my desire to add things while the book was on the press.

Ethan:

[laughs] Calling her at three in the morning with new links is probably not my best strategy, but yeah, yeah. But yeah, no, I know that article because I love that article, it was written by Charlotte Jackson, who is a front-end developer at Clearleft. I think it’s called “From Pages to Patterns,” which is kind of about the arc of my book anyway, so nice overlap there.

Karen:

Actually, I’m talking about a different article called “The Language of Modular Design.” A List Apart was on fire this year, right?

Ethan:

Yeah, they really were.

Karen:

So many great articles. Credit to Sara Wachter-Boettcher for some fantastic editorial work there.

In a lot of cases that can actually cause some real confusion. You know, “What is an organism, or what is a molecule?”

Ethan:

I know, yeah, the team did a heck of a job this year. So actually, yeah, Alla’s article that you’re mentioning, it was also another good one. But Charlotte’s article—similar themes actually, because she’s really kind of talking about an exercise that you can use as a team or as an organization to actually define a vocabulary that allows you to identify these different modules or these different pieces of your interface and use that to kind of refine the visual language but also to actually build front-end components.

I think exercises like this are incredibly valuable, because another question that I’ve actually been getting around my book is actually so much of the book is about designing these modules, and I think that there’s this question that comes up is like, “Well, am I supposed to just design a style guide first? Am I just supposed to build all these tiny little elements and then sort of, like, build out a larger system from there?” And I think that’s a very valid approach for a lot of organizations, but there’s an interesting counterpoint there as well.

The big problem that we have in patterns today is that there aren’t enough words to describe components and modules.

I think a lot of organizations will sort of adopt an off-the-shelf metaphor or framework, like atomic design for example, and they’ll sort of begin with that. And in doing so, I think they tend to inherit a lot of those assumptions that you talked about, Karen, from that methodology. And in many cases, that can actually be valuable for an organization, but in a lot of cases that can actually cause some real confusion. You know, “What is an organism, or what is a molecule?” and those aren’t just philosophical questions.

Karen:

The big problem that we have in patterns today is that there aren’t enough words to describe components and modules.

Ethan:

[laughs] Exactly. Let’s spend another twenty minutes on the difference between those things. But yeah, I think that’s why exercises like Charlotte’s, where you actually go through an exercise as an organization to talk about what this element means for us and our team, is actually really powerful and pretty valuable as well.

We are handing content creators this packet of different styles without any real clear understanding of how their content is going to fit into the styles.

Karen:

I’ve talked a little bit this year about how I see some of this focus on design systems and style guides as, in a way, replicating some of the problems that we’ve seen in the past with template design. And in my mind, the root of the problem is that we are handing content creators—we’re handing the people who are responsible for the ongoing care and feeding of the website this packet of different styles without any real clear understanding of how their content is going to fit into the styles that we’ve defined.

We used to have the problem where we’d be like, “Oh, here’s your three-column template with a hero module at the top,” and they’d be like, “But I have this story I want to tell; I have this presentation that I need to communicate the product or the service or the information about my business,” and there was just a huge mismatch between the layouts that we created and what they wanted to communicate. And my concern is that we’re replicating that exact problem, just with smaller pieces. Like, instead of giving them a whole template, like three-column hero template, we’re like, “Oh, well here’s your hero module,” and they still have the same mismatch of intention and layout.

You might say, “Oh, well, but at least that problem is at a smaller scale than at the page level,” but I almost think it’s worse because a style guide like that that is intended to oversee the governance of the entire website, if there’s a mismatch between the content and the design, or if content creators don’t understand how they should be using those modules or what those mean, you can wind up with situations where people are just using things in a way that wasn’t necessarily intended or hacking the system to get it to do what they want it to do. And, as the Capital One team described, you can wind up with situations where, when that content reflows on smaller screen sizes at smaller breakpoints, things don’t render appropriately because people were trying to hack a module that was going to work in a different way to solve their purposes. I think these are big thorny problems that are kind of fun to think about.

Ethan:

Yeah, they absolutely are, and I think that’s a really great point. I mean, this is a really small example, but just to bring things back to The Toast, I mean this is one of the first times that I’d actually been able to see the content modeling process happen in real time, you know, from the beginning of the project. And so when it came time to actually work on the responsive prototype, I was pretty careful to kind of preserve some of the naming conventions that came out of that process into the patterns themselves. So, everyone from The Toast was at least hopefully was going to be at least comfortable with the language that we’re using in the templates because it was already familiar to them, and hopefully more tied to the content they were actually designing.

Karen:

Yeah, I think that one of the nice things about redesigning a blog site is that it is literally the simplest content model in the world. It’s like, there’s one content type, and it’s article. So, I’m very excited to try out some of these new approaches or new ways of talking about this with some more complex patterns in the future.

Ethan:

I share your excitement on that front as well. It’s an exciting time to be working on the web.

Karen:

It really is. I feel like you can imagine a world—I feel like I can sort of see it in my head, and I’m sure you can too—a world where we have content management systems and other publishing platforms that are truly componentized so that we’re not just talking about a style guide as being a tool that helps the work of front-end developers be a little bit easier because they can copy and paste some predefined styles, but rather that it’s something that is so deeply built into the tools that people use to construct and publish the website, that everyone is operating in a more modular, componentized world.

You imagine that when we get there, things are going to work so much better. Like, it’s going to be so much easier to build things, it’s going to be so much easier to maintain the site, going to be so much easier to QA the site. The problem is that we’ve got to get everybody out of their rigid page-focused mindset and start building tools that actually work this way. But it’s going to be great when we get there. We’re going to have a web that works the way the web should work.

Ethan:

I might’ve just stood up and saluted just then, Karen. [laughs] I couldn’t agree more.

Karen:

[laughs]

Ethan:

I mean, from the design side it’s been really amazing to sort of see toolmakers and application designers sort of acknowledge this problem and starting to break the page concept down a little bit more. There’s this one utility called Zeplin that’s kind of like a style guide generator for Sketch documents, and it’s kind of meant to sort of sit between designers and developers as they work a little bit more closely together. So yeah, it’s early days yet but I’m really excited to see where things go over the next few.

Karen:

Yeah, I spend a lot of time touting the benefits of API-first content management systems; I’m on the advisory board of a product called Contentful, and there’s several other products, like Craft CMS,in the marketplace today that are moving away from these huge monolithic systems where the CMS is expected to manage the content, and store the content, and create the pages, and theme the pages, and publish the pages, and make you lunch… and it’s terrible at making lunch, by the way.

Ethan:

[laughs]

Karen:

It’s actually terrible at most of those things, but lunch especially! But the idea that we could have smaller microservices that have APIs between them, and that means that we can solve problems for the content repository and the author experience and the taxonomy, and then not have to throw all of that work away every time you want to redesign the front-end of the website, or every time you want to update the styles or the patterns that the website is based on.

I think that sort of decoupling, like what conceptually that decoupling means, is so interesting—I think particularly as we’re exploring how componentization and pattern libraries can inform not just the front-end styles on the website but actually inform the way that content creators and the owners of the site manage and maintain the substance of the website.

Ethan:

Yeah, it is an exciting time to be alive right now.

Karen:

It is.

Ethan:

And these are just a few of the topics that we cover in our workshop, is that correct?

Karen:

Indeed. Nice segue there.

Ethan:

How was that? Yeah, that was flawless. I don’t think anybody would’ve noticed it if you hadn’t called it out. [laughs]

Karen:

[laughs]

Ethan:

We are very professional podcasters.

Karen:

So we’ve been doing these workshops for two years now, can you believe that?

Ethan:

Oh, you’re kidding me. Wow. Yeah.

Karen:

Yeah, so we have been lucky enough to work with some very large companies to guide them on their path to going responsive and to developing a more pattern-based system for their sites. And if organizations were to want to bring us in to help give them a couple of days of an overview of what to expect through this process, that’s something that they could hire us to do.

Ethan:

I would not be mad about that, no. I mean, they’re incredibly be fun. We’ve worked with organizations both large and small, and we offer one and two-day workshops. It seems like every time we do one, we sort of, like, talk about changes that we want to make to it. The one-day workshop feels like a bit of a wind sprint, but it’s a really great day.

Karen:

A punch in the face of everything you need to know about responsive design.

Ethan:

[laughs] Exactly, exactly. But yeah, it’s been an incredible amount of fun doing these and I look forward to hopefully booking more of them in the future.

Karen:

Yes, and organizations that maybe can’t bring us in for a workshop might wish to consider purchasing our books.

Ethan:

Yeah, it’s kind of like bringing very tiny versions of Karen and I into your workplace. I don’t know where I’m going with this metaphor… But buy the books, and Karen’s is especially grand.

Karen:

It was really fun to spend genuinely years listening to you teach people some of the principles that you then outline in that book, and it’s nice to see how elegantly you captured some of those ideas.

Ethan:

Oh, well thanks, Karen. And likewise. I mean, your organizational and governance sections of the workshop are honestly like my favorites, I learn something new each time. And getting some of those foundational principles into that wonderful blue book, I’m excited to have that on my bookshelf. So, good working with you, Karen.

Karen:

Nice job, yes. And it is such a pleasure working with you that I would like to continue working with you on not just workshops but also actual web design and development projects. So, if only someone would hire us…

Ethan:

I have that wish for us as well. Well, here’s to a good 2016, and really, everyone who’s listening right now, thank you so much for tuning into our podcast. I didn’t expect that we’d be doing a podcast for almost two years and it’s been a really, really wonderful project. So, thanks for tuning in.

Karen:

Yeah, thank you all. 2015 was a great year. I’m looking forward to more in 2016. Thank you, Ethan, it is always a pleasure. You are a very professional podcaster.

Ethan:

[laughs] Not nearly as professional a podcaster as you, Karen.

Karen:

And thanks again to our sponsor, GatherContent. I’m thrilled they’re going to be sponsoring the podcast, because I think it’s a fantastic product that can help make your responsive redesign go more smoothly, by helping you manage the editorial process. Go to gathercontent.com and find out more.

Thanks again for listening, and we’ll be back next week.