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 week… I’ve got to tell you guys, I love birds. I love them. And guess who we have here on the show? We have Mark Jannot from the National Audubon Society, and he is joined by their design partner, Mike Monteiro from Mule Design. Welcome!

Mark:

Thank you. Great to be here.

Mike:

It’s a pleasure to be here.

Karen:

The pleasure is all mine. Why don’t you guys just start off by introducing yourselves and tell us a little bit about what you do, a little bit about your work with Audubon. Mark, why don’t you start?

Mark:

Great. My name is Mark Jannot. I’m the VP of content here at Audubon, and that means that I oversee all of our public facing and internal content and communications, including our website—or what was formerly our websites—and our award-winning magazine, Audubon, and all other such things PR, internal communications included.

Mike:

And my name is Mike Monteiro and I’m the design director at Mule, a small design agency doing great work since 2002, and I oversee the design work.

Karen:

And some spectacular design work it is.

Mark:

Indeed.

I came to Mike hoping that he could make me a site that had different expressions, each of which had been hammered with a hammer and chisel on a different stone tablet.

Karen:

It is a responsively designed website. I hope you guys realize that it’s not just a beautiful site, but we invited you to come on the show to talk about how responsive design fits in with your redesign strategy. Maybe you could start us off by telling us a little bit about how you made the decision to go responsive.

Some people say for them that it was just a no-brainer, and for other people it was a question of how it fit into a larger digital mobile strategy that might include apps or an m-dot site. How did those conversations go for you?

Mike:

I was just going to say, “Duh!”

There wasn’t any real internal pushback of any sort against the notion of having a responsively designed website.

Mark:

I was just going to say, “Well, I came to Mike hoping that he could make me a site that had different expressions, each of which had been hammered with a hammer and chisel on a different stone tablet, but then he said to me that perhaps there was a way to do it where it all worked together.” And then I said, “Duh!”

Mike:

Duh!

Mark:

But more seriously, I will say that I’m surprised it’s a question in a way, in this day and age. Even an organization like Audubon’s, and I don’t mean to insult this organization in any way, but we’ve been around for over 100 years and therefore we predate the glorious internet, and our sites had been around for I think about 100 years as well. [Laughs]

Right in the initial contact, clients are like, “I want a responsive website.” It’s not even something that we have to talk people into anymore.

Even so, there wasn’t any real internal pushback of any sort against the notion of having a responsively designed website. There may have been a lack of an understanding of what that meant exactly, but there certainly was more of an acceptance, more like a clamoring for a site that was optimized for mobile and for desktop. It didn’t take much to go from there to an understanding that responsive design is the way to go.

Mike:

Yeah, I’m finding these days—and I think this has been true for at least the past year—clients bring it up before we do. There’s no way that we’re not going to design a responsive site at this point. But right in the initial contact, clients are like, “I want a responsive website.” It’s not even something that we have to talk people into anymore.

Mark:

And I’ll say, and maybe I’m leaping ahead here, but to the extent that there may have been reflexive concern or skepticism or anything perhaps built around the question of, “Well, how can a site be legitimately built so that it works effectively across all these various platforms and screen sizes?” Mike and Mule did a very good job from the very beginning in addressing that by turning the question around and focusing in on their approach, which is to ensure from the very beginning that the site is designed effectively so that it works really well on the small screen and build up from there, rather than making a cluttered site that works great on a larger screen and then having to chop away from there. That seems to really make sense to people pretty implicitly.

We had a site that was not only not mobile-optimized, it was sort of aggressively mobile-pessimized, or whatever the opposite would be.

Ethan:

Let me follow up with that, because I’m hearing the same thing: there’s a lot of excitement from companies and organizations about responsive design in general. But there are still these terms floating around, like “mobile,” “desktop”—two of my favorite words.

How did the National Audubon Society think about those two words? Do mobile users and desktop users need access to basically the same stuff or are there some interesting nuances that make you revisit what they actually get presented on different devices?

Mark:

We’re a site that is heavily content-driven, and I don’t think that there is much that we would say that we would want to deliver exclusively on one site or the other.

The issue we had—obviously in a world in which more and more people are getting their content from the devices that they hold in their hands—is that, again, it was shooting fish in a barrel. We had a site that was not only not mobile-optimized, it was sort of aggressively mobile-pessimized, or whatever the opposite would be. [Laughs] And so I don’t think that there’s really much that we felt that we needed to deliver exclusively on one side or the other of that equation. Our content tends to work pretty well across that grand divide.

“Are you going to make an app? Are you going to give us an app?” I honestly had no idea in any given case what the person asking me the question thought they meant by that.

Mike:

People just wanted to work on their phones. We don’t hear the phrase “mobile” too much anymore. We hear the phrase “responsive” somewhat, but more often than not we hear people say, “I just want to make sure it works on the phone.”

Mark:

There is an interesting dichotomy that you hear, or maybe a lingering distinction, around mobile and app, or mobile meaning a responsively designed website versus an app that’s a native app, essentially.

One of the first things that I heard pretty much over and over when I got to Audubon roughly two years ago was, “Are you going to make an app? Are you going to give us an app?” I honestly had no idea in any given case what the person asking me the question thought they meant by that, because it became clear to me that they potentially meant any of a dozen different things. Delivering a site that is legitimately and powerfully responsively designed actually satisfied nearly every one of those “things” that they were looking for.

Karen:

I saw a guy talk at a conference once and he had a slide that broke down a pricing model for responsive design, and it was like information architecture is like twelve dollars, and visual design is fifteen dollars, and then making it responsive is $200,000.

Mark:

[Laughs] Wait, is that how you explain those bills you sent me, Monteiro!

Mike:

Yes, I was that jerk.

It’s going to cost you one thousand percent more not to do it.

Karen:

Ethan and I often hear this sense that people have that scoping a responsive website means that it’s going to cost three hundred percent more, because you’re making three different versions of the website, right?

Mike:

It’s going to cost you one thousand percent more not to do it. I mean seriously, you should talk about how much you’re going to make off of that, not how much it’s going to cost you. Because it’s idiotic, in this day and age, not to offer your services across all devices.

Karen:

How much did you make off of that, Mike?

Mark:

Yeah, Mike?

Mike:

Off Audubon? That was a labor of love.

Mark:

[Laughs]

Mike:

Are you familiar with Uncle Scrooge’s money pit?

Mark:

Where he dives into the coins and bills and swims around in it?

Mike:

Right. Well, um, not like that.

It’s not like we got two specs, two proposals, one that said, “Here’s what you get if you just want to continue your luddite desktop ways.”

Mark:

Mike can probably elaborate even further on the reality that undergirds that question in this day and age, and I hope this doesn’t make me seem like a sap of a client or a negotiator, but given that there was no real question about delivering a site that was going to be optimized across all potential devices, and that therefore responsive design is really the only way to go…

It’s not like we got two specs, two proposals, one that said, “Here’s what you get if you just want to continue your luddite desktop ways, and here’s the XX,XXX or whatever that you’ll have to pay to turn it into a responsively designed site.” It just wasn’t that kind of a consideration set.

Mike:

I can’t remember the last time we did a proposal for a site that wasn’t responsive. I don’t think I would do it, because it wouldn’t be a responsible thing to do to a client.

Mark:

Ethan and Karen, do you ever get answers to this question that aren’t of the incredulity level that we’re giving now? Is this still even a question these days? I know that you’re the interviewers, but I’m curious.

Karen:

I was like, “Whoa, you just blew my mind here. You can ask questions?!”

Mark:

[Laughs] I am a journalist.

I would never say that there’s a desktop-only solution to this. It’s kind of like going to the hospital and getting a proposal for an operation without anesthesia—you’re not going to get it.

Karen:

I think what we hear pretty consistently is that the initial responsive design work costs twenty-five percent more, maybe fifty percent more, but that it’s not that responsive design in and of itself inherently costs more or takes more time. There may be some training costs and just process changes that go along with getting a team to work in a new way.

I have heard people say that it can cost quite a bit more, but I think that means that they’re bundling in a lot of other work, like cleaning up their content, changing their CMS, adding in some other capabilities that, again, are not strictly responsive design.

Mike:

See, but when you’re saying that it costs more, then you’re establishing a baseline, which I don’t think is a realistic baseline. I would never say that there’s a desktop-only solution to this. It’s kind of like going to the hospital and getting a proposal for an operation without anesthesia—you’re not going to get it. I would never say that there’s a baseline desktop price plus more for making it responsive. There’s just “the cost.”

Mark:

Mike, how long has that been the case for you?

Mike:

I think the last non-responsive site that we did, and man, I could be wrong because I’m getting pretty old, but I think it was the OSF site, which was a while back. I know that they went back afterwards and retrofitted it about a year after it launched.

Mark:

And that probably cost a heck of a lot more than if they had just done it all at once, I imagine.

Mike:

Oh, absolutely.

Designing for smaller screens has been a gift. It’s been fantastic.

Ethan:

Mike, can you talk about how your design process has changed from working on non-responsive sites into something more device-agnostic? Has the way that Mule partners with its clients changed very much?

Mike:

Yeah. To me, designing for smaller screens has been a gift. It’s been fantastic. I guess we take a mobile-first approach to this stuff. But when you’re designing for a smaller screen, you’re limited to a certain amount of real estate, so you don’t have as many arguments about, “Well, this needs to be there,” because it obviously doesn’t fit.

So, it’s much easier to pare things down to what’s absolutely necessary and deliver simpler screens, simpler pages, simpler whatever you want to call it. Then once you have the argument that “this is the stuff that’s absolutely necessary and the other stuff can go,” then you don’t have the argument about, “Well, the desktop is much bigger.” You just move forward from there.

It certainly worked very effectively as a perspective changer for everyone involved, and as a reminder or a flag planted.

Mark:

Which was frankly a huge relief to us and to my team, and I think it would be to anyone who has faced that battle as long-faced people who are designing websites exclusively for desktop, because it looks like a hell of a lot of real estate and “why can’t you get my content above the fold?” and “why can’t you squeeze into the right rail or into the top nav, or here, there, and everywhere?”

I don’t know if that’s just a rhetorical device for Mule, because I don’t think I remember seeing the mockups for the small screen designs before seeing the mockups for the larger designs. But it certainly worked very effectively as a perspective changer for everyone involved, and as a reminder or a flag planted, saying, “We have to keep this simple and elegant, and ensure that it’s going to flow beautifully from one screen size to another.”

It was impossible to get from the magazine’s site to the organization’s site, which is fairly perverse when you think that we’re trying to actually get people engaged with the organization.

Karen:

Talk to me a little bit about the challenges for implementing a responsive design for a really heavy content-focused site. Did you have to make a lot of changes to what you had, what you were publishing? How it was structured? Did you change your publishing processes, or workflow, or CMS at all?

Mark:

This might be a hard question to answer in any kind of pure sense, because our project wasn’t taking a reasonably well-functioning site and redesigning it to make it responsive or to make it feel more modern and appropriate to where we are now technologically.

It would be hard for me to parse out the production differences and staff design differences that are related to responsive design versus just the fundamental change in the way the site is built anyway.

As I sort of alluded to earlier, we had two sites. One was the organization’s site, Audubon.org, and the other was the magazine’s site, Mag.Audubon.org, and they were very separate. It reflected this separate concept of kind of cleaving editorial or journalist content from organizational content and “never the twain shall meet.” I think it was impossible to get from the magazine’s site to the organization’s site, which is fairly perverse when you think that we’re trying to actually get people engaged with the organization and get them active in our work.

So, it was a sort of tear-down, build-up, recombine. We did rebuild the site on Drupal, which it had been before, but even that was such an ancient Drupal implementation and a fairly poor use of the Drupal CMS. So, it would be hard for me to parse out the production differences and staff design differences that are related to responsive design versus just the fundamental change in the way the site is built anyway.

Mike:

I will be happy to toot Mark’s horn here.

Mark:

Toot toot.

Mike:

Toot. Audubon was an amazing client in that they had started doing all of this restructuring work and looking at their own workflow before they even hired us. You guys were already talking about getting a new digital asset manager, and you were already in the process of hiring new people where you had found holes in the workflow and ways to improve it. So, that was already going on.

We started our design process by going in and talking to the people at Audubon, both the writers and the editors, and I remember we interviewed a couple of people who hadn’t even started yet, and we had to be very hush hush about it.

I was frankly—and I don’t know if even Mike knows this—terrified that we were just kidding ourselves, that this was even possible to do.

Mark:

Yeah, that’s true. Two of our key new hires—Sabine Meyer, who’s our photo director, I believe it was about two weeks before she she started. And the same with Martha Harbison. Sabine was freelancing, but Martha was actually still employed my old stomping grounds, Popular Science, and hadn’t yet announced that she was leaving. So, she sort of came over under the cover of darkness and attended the kickoff meeting and then started a couple weeks later as well.

That was a nice bit of timing. And frankly, it was really well-timed, because however much credit Mike wants to give, that whole process, and realignment, and conceptual, and practical restructuring was really just underway, and having this new design process and all of the discovery that Mule very correctly insists on at the beginning of the process, and all of the stakeholder interviews throughout our very distributed network at Audubon that happened essentially right at the beginning of that process became a hugely important part of the socialization of the concept of changing the design and the structure in the organization so fundamentally. It was also a way for us to stress test whether it was a good idea—or even if it was a good idea, how, practically speaking, to bring it about.

I was frankly—and I don’t know if even Mike knows this—terrified that we were just kidding ourselves, that this was even possible to do and still maintain the very efficient staffing structure, etc. that we would have to maintain, because while we were committed to this transformation, it wasn’t like we were going to throw a zillion dollars at it.

Mike:

But the work that you had done before we got there, and John Mahoney and David Yarnold, the CEO, who had a plan that he had been executing on for years that got them to this point, you guys were primed to do this project right by the time we got there.

Mark:

I will say, just to give my boss the very legitimate credit that he deserves, he brought me in in order to help ensure that we would be able to have this kind of fundamental shift in the organization, and he supported it fundamentally and really actively all the way through. I think that made it tremendously easy for us, as difficult as it may have been. But it made it possible and relatively easy to get it done.

Mike:

So, I have a request for you guys: I would like all of you to quit Audubon en masse and go work at some other screwed up organization and then hire us again there.

Mark:

Will do, Mike. What kind of kickback structure can we work out on that? Maybe we should take this conversation offline.

We did that thing that designers love doing, where they open and close the window. By the way, we call that “Marcotting” over here.

Ethan:

Wow. Well until you guys have that conversation, I’d like to hear a little bit more about design reviews. Mike, how did you actually present the responsive design and process to the Audubon team?

Mike:

We did that thing that designers love doing, where they open and close the window. By the way, we call that “Marcotting” over here.

Ethan:

Huh. That hasn’t hit the east coast yet, I don’t think.

Mike:

Really? I’m going to make sure it hits the east coast. I’m going to tweet about “Marcotting” all day today.

Mark:

Wasn’t it opening and closing the kimono?

Mike:

[Laughs] Jesus… So to answer the question seriously, we were in New York for a couple of reviews, but a lot of the work we did over the phone, videoconferencing because Audubon is pretty well-distributed and once in a while we had to give people out in the different parts of the country a view of what was going on. So, that worked really well.

Sometimes we’ve got a PSD, sometimes we have a working prototype, sometimes we have actual code, sometimes we’re just looking at black and white boxes.

Ethan:

We speak to a lot of agencies that are still shifting away from the PSD sort of projected up on the wall, so I was just wondering how you gather feedback on something that’s a little bit more device-agnostic.

Mike:

Well, we do project the PSD on the wall every once in a while. But presenting is a show. You have to get people excited, you have to talk them into it, you have to talk about what problems you’re trying to solve and how you solve them, and get people “all warmed up and ready to go.” Sometimes we’ve got a PSD, sometimes we have a working prototype, sometimes we have actual code, sometimes we’re just looking at black and white boxes.

We knew that there were periodic points in the process where we would have to expand the audience and kick it up the hierarchy a little bit.

Mark:

The way the process was structured from a review and presentation standpoint worked pretty effectively in that we had very regular meetings—I think it ended up being twice a week. And this is core team meetings, so me, John Mahoney, my digital director who was the real driving force on our end of getting this done and getting it done brilliantly, and our design director, and our various people here. We all developed a very good shared understanding of where we were going and how to get there with the Mule team.

We had a very good camaraderie from the beginning, and we would work together, often on a very granular level, to see something at the beginning of the week, see revisions at the end of the week, move on to the next week, etc. We knew that there were periodic points in the process where we would have to expand the audience and kick it up the hierarchy a little bit.

As long as we were—and this was generally almost 100% the case—in alignment between us and Mule, we felt comfortable working together that we were mutually presenting them to the other stakeholders here at Audubon to get it approved—to make sure it worked, basically, and then get it approved.

Mike:

We were talking to each other so much that by the time we were showing stuff to a larger group, we were the same team. We were on the same page about things.

I can tell you that it worked way more emphatically than I would have—even in my wildest dreams—have hoped.

Karen:

So, how did it work? What kind of measurement, or analytics, or other data are you looking at to tell you whether this responsive design was successful or not?

Mark:

Well, I can tell you that it worked way more emphatically than I would have—even in my wildest dreams—have hoped.

Mike:

God, I wish I had put money on that.

The percentage of mobile to total doubled, from fifteen percent to thirty percent, essentially immediately.

Mark:

[Laughs] I was just looking at the numbers. You have to understand, we’re coming from a base that was pretty meager. I have an old colleague who used to say in relation to ad sales, “You can’t fall off the floor.” So, if you’re at the bottom, you can’t go anywhere but up.

But in the first month after the new site was launched, our mobile traffic sessions doubled in total, from 601,000 to 1.2 million year over year, so apples to apples. Mobile traffic though jumped to over a three hundred percent increase, from 91,000 sessions to almost 380,000. So, the percentage of mobile to total doubled, from fifteen percent to thirty percent, essentially immediately.

So, congratulations Mike. You were right.

Mike:

I’m only happy that I could serve you, Mark.

Mark:

[Laughs] As am I.

It’s a little hard sometimes to convince the organization to go through another discovery process. But Mule convinced us that it was essential, and I can say that it was absolutely essential.

Ethan:

As we come to the end of our time, I’d love to hear from both of you guys. Do you happen to have any advice for other organizations who might be starting a responsive redesign today?

Mike:

Yes: don’t skimp on the research. It does not slow things down, it makes things go faster.

Mark:

I’ll validate that and just say that we’re in the middle of a good creative ferment and it seems like there’s just discovery going on all the time, and so it’s a little hard sometimes to convince the organization to go through another discovery process. But Mule convinced us that it was essential, and I can say that it was absolutely essential.

From what I said earlier, it was not only so that we were sure that we were sharing the same vision, but also Mule helped us through that whole process ensure that this organization, across the entire very distributed network of state offices, centers, chapters, and the national departments all understand what was going on and were rolling together towards the same goal.

Karen:

Guys, I want to say thank you. Mark, thanks so much for taking the time to talk with us about what sounds like a fantastic success story. Mike, thanks for not swearing as much as I thought you were going to. It’s been a real pleasure to have you on the show.

Mike:

I’m a professional, man. Plus, there’s a client here.

Mark:

Oh, yeah. I’m kind of surprised that I wasn’t swearing a hell of a lot more.

Mike:

Journalists don’t swear.

Mark:

I have been drinking copiously throughout this interview.

Mike:

Well, I would hope so.

Mark:

It is three hours later here than it is there, Mike. Anyways, thank you guys.

Mike:

Thank you all very much.

Ethan:

Thanks to everyone for listening to this episode of a responsive web design podcast.

If your company wants to go responsive but you need help getting started, we offer a two-day onsite workshop to help you make it happen. We also offer these workshops to the public, so please go to responsivewebdesign.com and see when we’ll be in a city near you.

If you want even more from us, you can sign up for our newsletter, subscribe to this podcast, and read full transcripts of every podcast episode at responsivewebdesign.com.

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