Episode Transcript

Ethan:

Hi, this is a responsive web design podcast where we interview the people who make responsive designs happen. I’m your host Ethan Marcotte.

Karen:

And I’m your other host, Karen McGrane.

Ethan:

And this week we are super excited to speak with Megan Garvey and Emily Smith from the Los Angeles Times. Megan, Emily, thank you so much for being on the show.

Emily:

Yeah, we’re happy to be here.

Ethan:

Great, why don’t you guys tell us a little bit about what you’ve been working on responsive-wise. And, what your roles are with it.

Emily:

This is Emily Smith and my role is the head of digital product and audience development. And in that capacity, I have been in partnership with the newsroom working on the LA Times responsive site. We’ve been at it for a couple of years, and we’re currently in that second phase of optimization and fine-tuning to make sure that we’ve got it right. Megan?

Megan:

I’m deputy managing editor in the newsroom and I oversee editorial for online. And then I was basically one of the main point people for editorial. We sorted through what the technical requirements were and how we wanted to be able to tell stories on our new site.

Ethan:

That sounds great. But first, we are really excited to have Karen here with a few words from our sponsor.

Karen:

Our sponsor Macaw has a really fantastic product that you can use to create responsive layouts, and it outputs incredibly clean code. And, I think this is a compelling proposition, because—I gotta tell you—not everybody gets to have Ethan Marcotte make responsive designs for you. So, if I wasn’t working with Ethan, I would need a tool that would help me create these kinds of responsive prototypes, that would let me build fluid layouts, and work with a canvas that’s not unlike a visual editor that you might use for images. But what this does is it helps you create these layouts and these mockups, and then it produces incredibly clean HTML and CSS that you can use. It’s a fantastic product and I think you should check it out, especially because for this month they are offering an extra special discount to our listeners of this podcast. So if you go to Macaw.co and use the code RWD you will get $80 off the product. $80! That is the highest discount they have ever offered for this fantastic product. So you should go check it out today at Macaw.co.

Ethan:

Tell me a little bit more, you mentioned you’ve been working on the responsive redesign for a couple of years now. Can you tell me a little bit about how that process started?

When we knew we wanted to sort of re-imagine LA Times for this new era, we realized pretty early on that that meant that we didn’t want to be producing these different streams of content for different devices. We wanted to create one great LATimes.com and make sure that it worked, no matter how you were viewing it.

Megan:

I think we knew that the industry had really shifted and we could see that readers were going to devices, whether they were iPads or mobile phones. And we had a system in place, we called it our touch site, that was more optimized for those readers than our main desktop site. We were seeing quite a bit of success in terms of engagement and readers on that. Emily can probably talk a little bit about that. So, when we knew we wanted to sort of re-imagine LA Times for this new era, we realized pretty early on that that meant that we didn’t want to be producing these different streams of content for different devices. We wanted to create one great LATimes.com and make sure that it worked, no matter how you were viewing it.

Emily:

Yeah, we were supporting three different sites. We had a WAP site, a touch site and a desktop site. The success of the touch site was very inspirational for us in terms of charting the direction for how we would build this new platform. And I do remember that there was a little bit of time where we debated whether we were ready to go fully responsive and get ourselves ready for that day where we could sunset WAP and touch and just be one platform. I had a little bit of concern there, I remember primarily from the ad sales side. I wasn’t yet convinced that we could deliver on a lot of the rich media campaigns that we were making our top dollar in delivering. And, we’re all getting there together as an industry. There’s certainly a lot more solutions today than were there two years ago. I don’t think any of us regret the decision. It certainly was one that we didn’t take lightly.

Karen:

Can you talk a little bit about the conversations that you had convincing people to go responsive? I’m particularly interested in the ad-sales question and really how you monetize the responsive design and how that’s different.

We had to, in the ad-sales case, look at the kinds of problems that our advertisers were facing and different ways that responsive could help solve them. I know now that one of the great wins is that we can, through one ad tag, deliver a campaign across all devices for a client. That’s a great efficiency for our organization and it’s a great win for our advertiser.

Emily:

Yeah, I think Megan and I both have the role of being persuasive to the various departments here and at the LA Times and across Tribune. It’s certainly not the type of place where somebody at the top makes the decision and everybody just does that. So we took that very seriously. And we did have a lot of conversations with all stakeholders. We identified key stakeholders in every department that were going to be instrumental in getting this done. Frankly, I think you’re going to find various levels of expertise and understanding what this kind of stuff is. We had to, in the ad-sales case, look at the kinds of problems that our advertisers were facing and different ways that responsive could help solve them. I know now that one of the great wins is that we can, through one ad tag, deliver a campaign across all devices for a client. That’s a great efficiency for our organization and it’s a great win for our advertiser because we don’t have to manage multiple campaigns, tracking different audience segments on these different sites. Those kinds of arguments tend to be very quickly won because they’re better for the company and they’re better for our customers.

Ethan:

That’s fantastic. This might be related to the ad question but I know a lot of clients and organizations that I work with struggle to figure out the needs of the mobile user and the needs of the desktop user. I’d be interested to hear about, when you were thinking about starting this responsive design with some established properties for mobile and touch and desktop, was it difficult to bring all those things together?

Megan:

I think that was definitely a concern people had because we were going with fully responsive and not adaptive. I think the questions—and we don’t fully have the answer to this yet—but one of the questions was “are readers on mobile devices looking for fundamentally different things than a reader on a desktop or even an iPad might be looking for?” By going all-in on one stream of editorial judgment, were we possibly missing opportunities for the different devices? I don’t think we’ve fully answered that, but I do know this: our devices and our apps, the touch site and then the stuff feeding our apps, were limited. They were sort of like, contained buckets of whatever number of stories someone had chosen to put into these relatively limited collections. If you were using our touch site on your phone or your iPad, you didn’t have access through that to the full content of the LA Times.

Producing it once and giving access to everything that we have, not only whatever’s happened today but the whole breadth of our database, just seemed like it was a good idea.

I think if you look at what people are reading at any given time there’ll be some hot stories with lots of readers on them, but the bulk of the traffic to our site is actually spread out among thousands of pieces of content, often. That to me was an indication that we couldn’t really predict…if the sum of it is three people on a story then who cares? But you add that up across 3,000 stories and you start to get into numbers that do matter. You want that audience. By producing it once and giving access to everything that we have, not only whatever’s happened today but the whole breadth of our database, just seemed like it was a good idea. The idea that people only want to be spoon-fed only a few stories? There are people who believe that and I don’t know that I’m right, but my experience shows me that I don’t necessarily know what somebody else wants. By opening it up to the wider content that was available just made sense to me.

Emily:

And I’d add too that when you look at a landing page or a homepage or a section front say for business or travel, of course you’re going to limit the amount of content that you promote because you are targeting a very specific audience who’s going to that page and wants some editorial curation to know what’s important that day. But to be on mobile is partly to be a part of search because mobile users are searching. They’re using Google and other vehicles to find your content. So that is where the article page is the entry point. And it is important for us to catch that long tail of people who are looking for content that may not have been published today and they need all of it there. And we need to do our best, at that first entry page, to engage with them and get them to come and visit and view even more of our content deeper in.

Karen:

One of the things that people always comment on comparing the online reading experience for news with print is that the discovery experience is so different. When you’re reading a print edition you wind up stumbling across stories that you might not have otherwise have read, and online you tend to be more focused. Did that change the way you thought about prioritizing the content or the landing pages or the stories or what you put on article pages for the responsive platform?

Megan:

I actually like the serendipity of the printed paper. Which I have to confess, I don’t read all that often anymore.

Emily:

Megan!

Megan:

I know.

Ethan:

Oh no!

Megan:

Don’t turn me in. I do get it though, it does land in my driveway. I think that one of the successes for me is, I think that the new LA Times.com has a lot more sort of that discovery angle to it. Whether it’s through—we call it the transporter—the sort of four images of the bottom of each article or section that can drive you to more content, either something more from that specific stream or allow you to choose. I think our visual browse, if you are flipping—we think of it as up on the screen—you’re sort of able to essentially slide through different offerings. I think that we are offering more of that browsing experience that you get in print. Where then that photograph or the headline or a pull quote catches your eye and you read it. Something that you might not have known you were interested in. I think that when Emily was talking about the article as an entry point, we really were trying to make those essentially into kind of mini landing pages. So that even though you ended up on a story about them capturing the suspected ringleader in the Benghazi embassy attack, perhaps you then see something else there that catches your eye because the story has been built out. Or you come down on the page and you say “oh, I’m interested in more world coverage from the LA Times.” Or you see our left nav on a desktop or certain size browsers or the pull down on your phone. And you’re encouraged to then look for something else on our site.

Ethan:

That sounds great. I’d be interested in hearing a little, I mean, I know you guys have been working on this for a couple of years. But I’d be interested to hear a little about the design process. As you started working on something that was truly multi-device, how did you actually begin to work on that from a design standpoint?

Megan:

We worked with a company out of New York and San Francisco called Code and Theory. And we’d had half a dozen more different big firms in to talk to us.

Emily:

Yeah, we had quite an exhaustive bidding process trying to pick the right partner.

Megan:

They came in and they showed us what their vision for our future was. And really for all of us, Code and Theory really stood out as being much bolder and more innovative. A lot of people were giving us sort of us, just slightly, you know… what we looked like at the time just slightly polished up. And Code and Theory came in with something that felt—it didn’t feel disconnected from us but it was certainly very distinctive. For us, part of what appealed to us was they were showing us something that while it was responsive, was not immediately obviously so. There was sort of a level of sophistication to the design where you were not losing editorial hierarchy or pretty things in order to get your site to reorder. Some of the very early sites, out of necessity probably, were somewhat austere in terms of how you could display.

So we didn’t feel that it was enough to just have that new simplified layout. We had to be creating new paths for our users to go down to discover new stuff. We needed to clean up those pages in really elegant ways so that we can better showcase our advertisers.

Emily:

I think a lot still are. I do think that it’s one of the things that I feel most proud of at the launch of the LA Times is that we were able to stick to our guns in terms of launching this whole ecosystem. Which includes the transporter units that Megan described, the visual browse at the top. We have side panels that expose related content and user generated comments. We could absolutely have gone with a much simplified layout that we have seen many other organizations do as a first step to get responsive. I think that it’s easy to convince yourself of, even financially, that that’s the most prudent course. Because you get live and then you start iterating and you start growing it and you get better at it and you start introducing more interesting features along the way. But, going responsive was not our objective, purely. We used responsive design as our mandate in order to improve engagement across, for our users, no matter what device they were on. So we didn’t feel that it was enough to just have that new simplified layout. We had to be creating new paths for our users to go down to discover new stuff. We needed to clean up those pages in really elegant ways so that we can better showcase our advertisers. None of that could have happened if we just rolled out a V1. I mean we do consider this V1 but I do think the reason it took so long is because we insisted that we solve for those engagement issues in ways that we didn’t see anyone else doing at the time.

Megan:

And I would say on Karen’s question earlier about the focus online, I wanted to talk a little bit more about something Emily referenced in terms of advertisers. Obviously I’m in the newsroom so I’m thinking about it in terms of content. But, when Code and Theory came in, one of the things they showed us and we all kind of laughed—I think you’d probably recognize it as well—was sort of a typical article page. It had this long right rail of all sorts of random stuff, and stuff on the left and the headline. They called it anywebsite.com. It was our website and almost everybody else’s website. One of the goals on the article page, because we know that is where at any given time the vast majority of our readers are on one of our articles, that we really tried to bring a clarity to that reading experience. Instead of throwing everything and the kitchen sink at readers, when Emily’s talking about the panels, we don’t have all the relateds exposed. We have one exposed, if you open it up you have a very nice experience, you can pick from something else, but they’re not all in your face. So that you can read the story without being interrupted by things that are irrelevant to that particular story. But then we have these embedded items so things that are directly related to the story—a video, or a photo gallery, an individual photo, a quote, full coverage or whatever that’s really specifically related to that story, something else you might want as a reader—that’s within that stream of the reading experience. That’s a huge difference from where we were before.

Emily:

And that was very difficult to get your head around responsively. Because all these multimedia assets, that flow in between the content in the text, look great on a desktop-size browser but are very tricky to handle on like a Kindle Fire size or your smartphone size.

But the truth is that a site like ours, we’re producing hundreds and hundreds of pieces of new content every day. From stories, from photo galleries, to video. When you’re testing in this small environment it’s difficult to really see every version of things that you’re going to have to deal with.

Megan:

And we’re still addressing some of that. Some of the display, like on desktop, is great. Then you get down to phone and you’re like “oh, this doesn’t make as much sense.” We’re almost losing people. It’s funny because we do all the QA and the user acceptance testing. But the truth is that a site like ours, we’re producing hundreds and hundreds of pieces of new content every day. From stories, from photo galleries, to video. When you’re testing in this small environment it’s difficult to really see every version of things that you’re going to have to deal with. Of course, when we open up the floodgates and every piece of content is coming through this new system, you start to notice things that you didn’t notice in a really contained testing environment. I think that’s probably true for anyone going through this process. Other newspapers, I’m pretty confident, have had a similar experience. You’re like “oh, wait a minute, no! That’s not what I meant, exactly.”

We did make a lot of changes to the CMS, our content management system, to support the new site. Which is driven 100 percent by editorial flow.

Karen:

Can you talk a little bit about the editorial process? Or, how did the newsroom intersect with the design and development process?

Megan:

Yeah, I’m happy to talk about that. We had a number of people who played a pretty active role in the process, including myself and a couple of others. We were part of regular meetings every week. We traveled to New York to consult with Code and Theory in person. Code and Theory came here. Then once the final designs were handed off and we were heavily into the technical period, editorial remained in constant contact with both the product team, which is part of Emily’s universe, and the technical team, which was out of our Chicago offices.

Emily:

Daily.

Megan:

Yeah, daily. We worked across the hall from each other. And we had weekly huddles to go over what were our priorities, what were the concerns? A lot of things got headed off that way. Because it was like, if you just say… at one point they were talking about our blogs. They were going to use our story gallery content item for that. And I’m like “Whoa! Whoa! No! We can’t do that!” Because there’s no way to feed that in our system. So it’s stuff like that where if you use it daily you would have a better understanding. I think that was pretty crucial.

Emily:

And we did make a lot of changes to the CMS, our content management system.

Megan:

We did.

Emily:

To support the new site. Which is driven 100 percent by editorial flow.

There was no real hygiene or discipline to the infrastructure that was feeding our web site, which leads to confusion and clutter. So we actually did, from the editorial side, rebuild all of our collections, rethink all of our organization. So that was going on while the tech work was being done, we were really rethinking everything about our website.

Megan:

So, the issues like, we have this thing called a “share lines” which you guys have probably seen. That’s just a quotable, sharable part of the story that we are putting in front of people to act as both sort of a quick take on the story and also to encourage people to share our content, which is so important. It’s not just about getting people to read, it’s about getting people to ask other people to read. That’s just crucial to building an audience and the engagement that Emily was talking about. But we didn’t have a way to do those in our system. That had to be added in. And then of course you have to train the whole newsroom, we have a really big newsroom, right? And we also had sort of a database that was frankly a big fat mess. You know, collections that had been used for years. My favorite was something called Spring Ring Festival II, that was a collection used by our entertainment team for everything from the Oscars to coverage of arts festivals.

So there was no real hygiene or discipline to the infrastructure that was feeding our web site, which leads to confusion and clutter. So we actually did, from the editorial side, rebuild all of our collections, rethink all of our organization. So that was going on while the tech work was being done, we were really rethinking everything about our website. And the one thing I’m proud of is we did that work in advance of relaunch and when we relaunched, we essentially did it seamlessly. So the switch was flipped and everything was already being done the way it was supposed to be. We had organized our sections like that so… It was funny—one of the best moments is, we were talking to our world foreign copy editors, who are a pretty meticulous group, and all they wanted to know is “well, what do I have to do differently, and how do I do that, and where does that go?” and they were getting really anxious. And one of our producers was able to say “you don’t do anything differently, you do exactly what you’re doing and it’ll work.” And so for us, for the newsroom, when this huge change happens overnight it’s like a different universe, and yet we had established those workflows well in advance so it wasn’t like we were asking people to do all this new stuff and have a new look and be lost because we had already organized it in a way that it would work.

Ethan:

That’s fantastic. Something you guys both touched on which is your expectations for the responsive design shifting a little bit once it gets used, when producers get their hands on it, when they’re actually producing live content with it. Is it something that’s come up since launch? Just interested to kind of hear if that’s been a thing you guys have dealt with, and if so, how you’ve managed that process.

Megan:

I mean we have our lists of things that to be tweaked. There’s like, from the highest priority to like, “wish list sometime in the future would be nice if it would happen” things. And that’s again, just a really close conversation. Even before we relaunched we started to have conversations about things that would be nice to have. We did aim high for relaunch, but there are some concepts and ideas that we still want to go back to that we did sort of set aside in order to get to the first launch.

Emily:

Take neighborhoods as an example. So the newsroom, you talk about early preparation, they were geo-coding our content behind the scenes, not quite a year in advance…

Megan:

But yeah, more than a year in some cases. Of course you have to crack the whip, right? It’s hard to get people to do something that they can’t see.

Emily:

So the newsroom was preparing all of our content to be discoverable by users based on the neighborhood that they live, work, or are interested in. And we had a segment of our site, pre-launch, pre-relaunch, that had some various neighborhood information. Schools, stats, some crime data and so forth. But we wanted all sorts of news to be discoverable and we wanted special segments of news like food, restaurant reviews, and farmers markets, and other content, to be sorted based on neighborhood. So we have this really robust neighborhood section now as part of our relaunch that is stunning, it looks beautiful, it’s full, so that wherever you live you can just endlessly find all of this stuff near you that you that you might wanna go out and discover on your own. And we just had to get that ready. It took a lot to get that going.

Megan:

That’s literally like a seven year-long process.

Emily:

And it’s not done, right?

Megan:

It predates even the idea of responsive design.

Ethan:

Sure.

Megan:

But, it was done in anticipation of some day being able to organize the content in a way we can and Emily’s right. So now we have to think about, we can’t expect people necessarily to just find those pages. How do we promote those pages? And, that’s the thing, how do we deliver that out? Whether it’s on our own article level or through social media. So, there’s more to that coming.

Mobile, I think, changes the way, the importance of that kind of content. So, we know that if you’re looking at us on your phone, you know you are probably more likely to be looking for something near you. If you’re out and about, especially.

Emily:

Absolutely, and that’s another one where mobile, I think, changes the way, the importance of that kind of content. So, we know that if you’re looking at us on your phone, you know you are probably more likely to be looking for something near you. If you’re out and about, especially. You can day-program that. In the evening, you know, maybe you’re looking for restaurants. Maybe you’re looking for entertainment. And, so we had to cut that back in terms of what we displayed to users in order to get this thing launched and out the door. But, there’s tons of features around neighborhoods and location that we have lined up in the queue that we want to start working on next. We really do feel like we’ve just gotten started.

Karen:

Can we talk a little bit about how you showed these responsive designs to the organization? How did you socialize it with all of the different groups that had to buy in? And, how was that process different; how did you show them where their “thing” was going to be on different screens or breakpoints?

In a big organization like ours you necessarily have to win hearts and minds. We set up this steering committee across all departments. And, every time, once a month or so, we had a new series of layouts and designs ready to be shown we called everybody together. We had them all sit in a big horseshoe; it looked ridiculous.

Emily:

Yeah, that could be a very long answer but I’ll give you my short version first. I think that in a big organization like ours you necessarily have to win hearts and minds. And, so we, like I said, we set up this steering committee across all departments. And, every time, once a month or so, we had a new series of layouts and designs ready to be shown we called everybody together. We had them all sit in a big horseshoe; it looked ridiculous. There probably sometimes 30 people in that room. We spent an hour and a half or so going through each layout. And, we would sometimes show up to four breakpoints for each layout. So, we would show that smartphone size, Kindle Fire size, larger tablet and full desktop, to give people the full range of how the display would change. So, this was the opportunity for sales, for marketing, for PR, and tech, to weigh in and voice any concerns. They then had a week maybe? They had a period of time to take it out to their teams, socialize it, we would go with them if needed, do more demos, and then bring back any of their problems or recommendations within their review period. So, we did that for like four or five months. And then at the end we kind of said “okay now leave us alone, we’re going to go build it.”

Ethan:

Wow, that’s fantastic. Well I guess related to that, measurement and analytics aren’t the sexiest topics, but, this redesign’s out there, it’s looking great. How are you guys measuring if it’s successful? How are you feeling about it in general?

I was reporting to them the handful of new advertisers that we could never win on our old site but, that have, in some cases, made six-figure ad buys with us post-launch because we have such a better environment for their campaigns.

Emily:

There are many ways that we are looking for this to improve our business. I would say at the surface, first, we want to make sure our users are liking it, that they are coming back. We are measuring frequency, we are measuring engagement through page views, through video views. We want to make sure that our advertising clients are happy customers. And, it’s thrilling for us. In fact, I was just visiting the developers, they’re based in Chicago. I was reporting to them the handful of new advertisers that we could never win on our old site but, that have, in some cases, made six-figure ad buys with us post-launch because we have such a better environment for their campaigns. So, certainly, it’s not just total sales. It’s the kind of clients and it’s the number of repeat clients that we get who want to advertise with us as well. Load time, another really big one for both of us I would say. How quickly that content is getting to our users.

Megan:

I think to there’s something to be said for just the site being enjoyable to read. And, in terms of internal morale, I think people feel good. They feel proud of the site. They feel like it underscores that we are a forward-thinking news organization that’s always evolving like many others. But, we want to be bold and innovative and I think that having something that reflects that matters a lot. Because we’re asking people to work incredibly hard, and to think differently about how they work, and to think differently about how they do journalism. So it really helps to not then be putting that into a format that is unappealing or feels old fashioned.

In terms of internal morale, I think people feel good. They feel proud of the site. They feel like it underscores that we are a forward-thinking news organization that’s always evolving. We want to be bold and innovative and I think that having something that reflects that matters a lot. Because we’re asking people to work incredibly hard, and to think differently about how they work, and to think differently about how they do journalism.

Emily:

Well you also created new vehicles to showcase the writers on the site, which I hope helps them to connect with their readers and to get more visibility.

Megan:

Yeah, so our previous site gave us really poor options for featuring any of our more personality people so whether it’s like a Bill Plaschke, a nationally known sports columnist, or Steve Lopez, I think is one of the best metro columnists in the country, I could go on and on, but I won’t. Their pages looked terrible. They had these pixelated weird line drawings and they looked like they were decapitated and the columnist page, it was really embarrassing, honestly. And so for these guys to say, “hey, jump online, interact more with your readers,” and they’re looking at their page and they’re saying “well I can’t even, how do they know I even wrote this, and it doesn’t even look like a column.” So having a format where it’s clear that…

And the other thing we got is people would say L.A. Times is all opinion and it’s like “yeah, this is opinion, it’s a column!” But people wouldn’t realize it because frankly, it looked the same, there’s a real sameness to our site. It’s not a joke, but to illustrate it, a story about the war in Syria looked exactly the same as a Ministry of Gossip story. You couldn’t delineate it any way. I think that design is content. You react to something based on—are you presenting it as lighthearted or serious? Are you presenting it as opinion or straight news? And those are things that we really could not do in the old system. So now I think we are seeing more participation from our columnists, like Steve Lopez yesterday wrote, the mayor of Los Angeles, Eric Garcetti, a lot of people think fairly strategically dropped an f-bomb in the middle of the Kings parade celebration. But Steve wrote a column in the moment and we were able to put it on his column template, and so it was very clear that it was Steve who was saying these things, and I think that’s a step forward. I think we want these people out there talking much more dynamically with our readers because what makes us unique, in part, are the voices, the people we’ve hired to speak and share their thoughts and opinions about things.

Ethan:

That’s fantastic. And we really appreciate you guys taking some time to make us part of the conversation. Megan, Emily, really appreciate you guys talking about the LA Times responsive redesign, and thanks for your time.

Emily:

Thank you.

Megan:

Thanks Ethan, thanks Karen.

Karen:

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

Ethan:

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’re also planning to offer these workshops to the public, so please go to responsivewebdesign.com and let us know that you’re interested.

Karen:

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.

Ethan:

Thanks again to our sponsor, Macaw. As a reminder, if you visit Macaw.co and use the code “RWD”, you’ll get $80 off their wonderful responsive design software. So check it out, and thanks again for listening—we’ll be back next week.