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, why, I am just about gobsmacked with excitement, because Josh Benton of the Nieman Lab is here to talk to us. Hey, Josh.

Josh:

Hey.

We basically are a combination newsroom/think tank and our aim is to try and figure out the future of news, help out those people who are trying to figure out how to make news sustainable, since obviously it’s been disrupted quite a bit by the web and digital technology.

Karen:

So, why don’t we start this off, maybe you can just introduce yourself and tell us a little bit about Nieman Lab and what you’ve been working on.

Josh:

My name is Josh Benton. I run something called—the long name is the Nieman Journalism Lab at Harvard University. Basically, I came from newspapers. I was a newspaper reporter, columnist, foreign correspondent. But I also came from the web development world. I got to college just in time for the early days of the web and paid for all my pizza in college by building, in retrospect, very bad table-laden websites. In 2008, I came to Harvard and started the Nieman Lab. We basically are a combination newsroom/think tank and our aim is to try and figure out the future of news, the future of journalism. We have a small team of reporters and we do our best to try and help out those people who are trying to figure out how to make news sustainable, since obviously it’s been disrupted quite a bit by the web and digital technology.

I’ll be honest, I read Ethan’s original piece and got the book and decided pretty early on this was something that we wanted to do.

Karen:

Well, I can speak for myself when I say I am also fascinated by those subjects. But before we get started, let me say a few words about our sponsor, Campaign Monitor. If you’re like most people, you open your email on your mobile device. If you know anything about responsive design, you know that making emails look great on all of the different devices and screen sizes that people might want to use, is really hard. Fortunately, there’s Campaign Monitor. They have a great new email builder called Canvas, that lets you make responsive emails in a snap. There’s an easy to use, drag-and-drop email crearotr, and so everything just works! Your images are sized correctly, your typography is the right size. Now, you can even try out the Campaign Monitor Canvas without having a Campaign Monitor account. Just go to campaignmonitor.com/templates and try out their fantastic tool that enables you to create emails that work right, for everyone.

Another thing that I’m really fascinated by is, as you might guess, responsive design. You just launched a new responsive design for Nieman Lab and I’d love to hear about, how did you make the decision to do that? Did you have to convince anybody else that that was the right way to go?

Josh:

We did our last redesign in 2011 and it had some positive characteristics I guess, but it started to feel pretty old, pretty quickly, primarily because it wasn’t really good on mobile. I should preface everything by saying that I am the director of the lab, so I’m sort of in charge of the editorial, but I’m also the coder and designer. So as soon as I did the last redesign, I started to think I needed to do something to create a better mobile experience. It took a little bit longer than I was anticipating because parts of this redesign started a year and a half ago.

But it wasn’t really a matter of needing to convince anybody. It seemed pretty obvious that we needed to do something. We’re kind of an unusual site. On one hand, we have a very tech-savvy audience because so many of our readers are people who work in the digital media world. But on the other hand, we are, in a certain sense, an industry vertical. We’re a site that a lot of people go to while they’re sitting at their desks in a browser on an iMac or a big screen computer. So, our share of mobile has never been as high as you would see, for example, on a lot of prominent news sites. We were consistently around twenty-three percent smartphone, another eight to ten percent tablet. During the day, in working hours on the east coast, it would be ninety-eight percent on desktop computers, so it perhaps was not quite as pressing as it was on some other sites, but it was still very pressing. It seemed like the right way to go. I’ll be honest, I read Ethan’s original piece and got the book and decided pretty early on this was something that we wanted to do.

Homepages tend to be the ones that cause the biggest responsive questions, at least for me. You do have more modules, more boxes, more things to shift around, more ways to consider.

Ethan:

Thank you and I’m so sorry you read that. I’d be interested, Josh, when you guys were thinking about this first responsive design, and you’re looking at these stats for different devices, did discussions of what mobile users and desktop users would need, did that ever come into the equation? Did you think about those as separate needs, separate audiences?

Josh:

On the homepage in particular… We’re unusual in a lot of ways as a website, so we get very little homepage traffic as a share of our overall traffic. We have 167,000 followers on Twitter and large numbers on other social platforms, so we are very unusually socially distributed for a news site—not unusually socially distributed for a lot of other kinds of websites. I think the last time I checked, only six percent of the visits to our site start on the homepage. That’s not the behavior that people go towards. But nonetheless, I think homepages tend to be the ones that cause the biggest responsive questions, at least for me. You do have more modules, more boxes, more things to shift around, more ways to consider. On the large screen, you may want to be showing a better panoply of what you have to offer and who you are. Bob Cohn at Atlantic Media had a great piece he wrote a couple years ago in Folio where he said they were seeing the same thing, the percentage of homepage traffic was declining as a share of their total traffic, social was becoming more important, the side door was becoming more important. He said in that context, he felt that the homepage was less important as a place for traffic triage, “You go here, you go here, you go there,” and more important as a way to say who you are as a brand to the public. I’ve always thought that made sense.

With mobile, our mobile homepage, the mobile view—it’s not a mobile homepage because it’s responsive—but our mobile view is basically the most recent story, next recent story, next most recent story, and that’s pretty much it. I have plans to complicate it a little bit but it is just… What is the context in which you’d be on your phone and be saying “I want to go see what Nieman Lab has?” Well, you want to see what the most recent thing is. You’re probably someone who comes to our site semi-regularly, so that made sense.

On the desktop, there’s a little bit more variety and, more importantly, a lot more space for big art to give a better visual representation of what we are and what we try to be. But it’s a different use case, I think.

All the time and energy that went into building these front pages that were political institutions, where every section of the news organization wanted to make sure they had their little fiefdom, their little piece of turf they could call their own, those all get transformed when you get down to 375 pixels wide.

Karen:

Let me follow up on that and talk about—maybe this is relevant to you or just relevant to the industry as a whole—I have talked to several publishers about their strategies for wanting to treat mobile and desktop differently. So, to daypart content based on the time of day that people are most likely to be using different devices, or to be able to deliver different content or different experiences to people on mobile or desktop because they believe that people want different information based on device. Do you have a point of view on that and how responsive fits into that, or doesn’t fit into that strategy?

Josh:

I hope that we’ve gotten past the point that—I know you described it in your book and the last time that we were on a podcast together, we talked about the idea that the mobile user is happy with a tiny subset of all possibilities. I hope at least that that’s not something that people are thinking as much as I suspect they probably still are. But I do think it’s fair that someone looking at a website on their phone—and this is particular to news sites—The New York Times, for example, produces hundreds of pieces of content every day. And if you look at their homepage, you can sort of see, for good and for ill, that they’re trying to expose you to a lot of it, as big a share as they reasonably can at any given time somewhere on that page.

On the mobile page, that’s just not practical. I think it makes sense that you would have a different view on it. I was interested in the Vox.com redesign of their homepage a couple weeks ago. Whereas—I believe this is true—every time you go to it on the mobile view, the latest news module is at the top. It looks a little bit out of place the way that they’re presenting I think, but it is essentially saying that on desktop, you’re going to have a sweep visually of stuff to choose from, but if you’re going on mobile, you’re probably going to want the latest stuff. So everything else is there, it’s all accessible, but it probably makes sense to raise that in priority, since that might be more likely what someone is trying to find.

But I think mobile news presentation for news organizations is… I mean, news organizations have a lot of challenges these days, most of them involve paying the bills to keep the lights on. But I think that high on that list is “How do you present your news in a mobile environment?” because a lot of sites are mobile majority now. At least, a lot of sites are mobile majority on weekends and evenings, a smaller number are mobile majority 24/7. And they’re all moving in that direction. All the time and energy that went into building these front pages that were political institutions, where every section of the news organization wanted to make sure they had their little fiefdom, their little piece of turf they could call their own, all the arguments about what gets put where, those all get transformed when you get down to 375 pixels wide.

The code name for this redesign, what was used internally is “simple.” I think the goal was to keep it simple because we had the opportunity to keep it simple because we didn’t have to clod it up with ad units and the like.

Ethan:

Josh, you mentioned the last redesign back in 2011, I’d be curious, when you guys were thinking about this responsive redesign, how much of that design framework that you guys had from the previous version got preserved? What are those characteristics that you felt were successful. What made the cut when you went responsive, if anything?

Josh:

There are certain elements of the DNA that carried over. Like, for example, we had a 600-pixel main story well on article pages and we maintain that, both because I think 600 pixels is a perfectly fine width for a full-width story well, but also because we had lots of art that was already sized to that dimension. So going wider than that would have raised issues. It was a perfectly fine choice but I think it was a choice that was semi-made for us by multiple years of creating 600 pixel-wide art.

Let me back up. We are so blessed. We are a news site that doesn’t have to worry about advertising. That’s a glorious combination from a design perspective. I think we were always slightly on the simpler end of looks for news sites, so I think I wanted to push in on that. The code name for this redesign, what was used internally is “simple.” I think the goal was to keep it simple because we had the opportunity to keep it simple because we didn’t have to clod it up with ad units and the like. We tried to keep clean typography.

On the article page level, the main thing we wanted to change was to give a lot more variability in article page layout. We now have lots of different ways to present art and stories, which is probably the main editorial benefit on that end. We also kept a lot of the color scheme, both for familiarity and also because it’s Harvard colors and we’re sort of obliged to do that. I think it would be recognizable if you saw the two sites next to each other but the hope was that the new one is going to look more modern, a little bit sleeker, and obviously work in lots of different viewport widths.

You still see a lot of places that just decide “Well, we’re going to show ads on desktop and not show them on mobile because we can’t figure out how to show them there.” I don’t know what the solution is. If I knew, I’d probably be making more money.

Karen:

Can I follow up and ask you to opine, perhaps, on responsive advertising in general? It may not apply directly to your site, but from what you understand of the news industry and the way that ad sales works on the web, what are we going to do about the responsive ad problem?

Josh:

Was it Monotype that just did a webinar a few days ago as we’re recording this, that was showing off a lot of new HTML5 responsive ad unit demos that maintain the IAB-standard sizes but did so in a responsive way that took advantage of a variety of mobile APIs. There was stuff that looked pretty cool in there. It’s mostly opining, because I don’t really have great insight into the conversations that happen on the ad sales side, but I know from talking to a lot of people at The Globe, the challenges that were involved in their design some years ago with getting ads on board, I’ve heard a variety of horror stories in the years since.

I’ve certainly resized browsers more in the last year or so than I had in the previous 37 years of my life.

It seems like you have a new generation of online news sites that are willing to break outside of the classic IAB ad units, I suspect in part because they want to get past some of these responsive issues, in part because I suspect that if they’re selling their own ads, they’re not using ad networks primarily. They’re thinking they need to create higher value ads and those end up being bigger and those end up being custom size. That sort of thing can work when you have brands that have good back-end shops, where you have your own content studio that can produce that kind of work.

One thing I keep coming back to in my job is that it’s very easy when you talk about online news, to talk about the New York Times and the Wall Street Journal and CNN.com and Vox and Quartz and these other sorts of large entities. But the majority of America’s journalists work for local outlets. And those local outlets have local advertisers. In a lot of cases, you don’t have the technical wherewithal on either side of that equation, on the publisher’s side or on the advertiser’s side, to do this sort of thing. You still see a lot of places that just decide “Well, we’re going to show ads on desktop and not show them on mobile because we can’t figure out how to show them there.” I don’t know what the solution is. If I knew, I’d probably be making more money.

Ethan:

Well, just to bring things off the advertising side for a second, Josh, I’d be interested to hear more about if your personal design process has changed very much since you’ve been doing more responsive multi-device work. Can you talk a little bit about that?

It’s amazing how frustrating it is that images and text, one gets shorter and one gets taller when you resize your browser. It’s amazing how that one small fundamental question complicates a lot of designs.

Josh:

I’ve certainly resized browsers more in the last year or so than I had in the previous 37 years of my life. It’s almost cliché now to talk about the ways in which responsive encourages certain kinds of designs and the degrees to which that is true, or true of people with only a limited design sense. I suspect I’m one of those people with limited design sense, so.

There were certain frameworks—I don’t mean frameworks in the technical sense, just sort of visual frameworks of how you lay out an article page that seem to make sense to me. It’s amazing how frustrating it is that images and text, one gets shorter and one gets taller when you resize your browser. It’s amazing how that one small fundamental question complicates a lot of designs.

In terms of process, I don’t know if I have a process really, but it’s still iterative, it’s still trying things out, it’s still “Let’s see how an image would fit there, how text would flow there.” I do think being cognizant of the fact that you’re going to have to display it at different dimensions does make you have an extra pause and an extra thought about any sort of element. That’s certainly led to… maybe not being quite as tossed off. Having a new feature does have those extra steps of thinking “Alright, is this going to make sense on the phone? Is it not going to make sense on a tablet?” But I think in general, it’s probably similar.

I’m just relieved that the new site is out there because it’s sort of a fresh start and it means that there are a lot of small backend things that we can do fresh and do live now.

Karen:

Can I ask about your editorial process and how that might have changed? So, did you have to make changes to your content management system or your publishing tools? Did you have to communicate that to the rest of your team on how they were going to work differently?

Josh:

We use WordPress and I did use the redesign as an opportunity to add a variety of other backend customizations there. Basically with the idea that now that we have the opportunity to vary article layout from piece to piece pretty easily, that we could sort of build on that. So, this was the time when I decided we could have eight different pull quote styles and to write the shortcode in WordPress to enable that to be done pretty easily. Drop cap styles, that sort of thing.

We did have to create new guidelines for art. Again, our art used to be locked into that 600-pixel story well. The main well for most stories is now 700-pixels and we have a 990 view and a 1400-pixel image well. So, we had to sort of say “We shouldn’t make those too tall, because even though they’re very wide, they will take up an entire laptop screen quite easily.” So, we had to sort of just talk through how we wanted to think about art there.

It was an opportunity to just rethink the limits that we had previously had in the old design, both because it was locked in as, every article looked kind of the same, and because it was locked in as every article pretty much only looks okay on the desktop. But not a huge amount of variety, I would say, in new implements there. It was a great excuse… I have a really bizarro way of doing this redesign in WordPress. I don’t want to recommend it to anybody at all, but basically a long time ago I just built a little tiny piece of code that looks for a URL parameter on any WordPress page, and if there is a certain URL parameter, it goes to an alternate template. So, I was building all the new templates live on the site at the same time that we were running the site. There were certain elements where you could have things that were in the template that were different, but you couldn’t have things in the backend that were different because the backend will apply to both the real live site and the new site.

I’m just relieved that the new site is out there because it’s sort of a fresh start and it means that there are a lot of small backend things that we can do fresh and do live now, as opposed to piling everything into “Well, we’ll be able to launch this feature when the redesign launches.” It can all be done more rapid fire now.

Ninety-plus percent of our traffic goes to article pages and we only had one real kind of article page before. So that meant that we had a limited number of pages and templates to worry about.

Ethan:

Following on from that, when you guys are looking ahead to your next hypothetical responsive redesign, is there anything you’d do differently the next time? Anything about the process this time around that you were like “Maybe we can learn a lesson from this or tackle it a little bit differently the next time?”

Josh:

I hope it will go faster, more quickly next time. That’s the main thing I’d probably want to take away from it. Again, we’re in a weird position. We’re a very small shop and I kind of do it all, so there’s an ad hoc nature to the process that is sort of built in. I don’t know how much that would change. In an ideal world, I think it probably would be good to have actual developers working on it other than me. If you got to that point, then you’d need a more organized process for doing it. Since it was mostly done in my spare time while I was juggling other things, I suspect the rolling ad hoc nature of it is probably pretty well-ingrained in the process.

Compared to a lot of other sites, we have a pretty easy job to do. Ninety-plus percent of our traffic goes to article pages and we only had one real kind of article page before. So that meant that we had a limited number of pages and templates to worry about. There were lots of other things, but that was the primary driver. If we were a corporate site that had many nooks and crannies, and had database representations, and lots of complicated layouts, it would be a lot harder. In a sense, we’re lucky on that front.

One of the glorious things about my job is there’s a part of my brain that is an editor, a part that’s a writer, and a part that’s a designer and a developer, and what I love about this job is it lets me please all those parts of my brain, which is not something you get a lot of opportunities to do.

Karen:

Do you have to get buy-in from anybody else at Nieman Lab to go live with this? Do you have to have a review and approval process or do you just run the place like a benevolent despot and this redesign is what it is?

Josh:

I do have a boss, Ann Marie Lipinski runs the Nieman Foundation, which Nieman Lab is a part of. So I did show it to her and she said “That looks good.” I should say that while I was redesigning Nieman Lab, the Nieman Foundation has other sites. We have a sister magazine called Nieman Reports and a site about narrative journalism, called Nieman Storyboard and the Nieman Foundation site itself. So, in parallel to my redoing Nieman Lab, the foundation hired Upstatement to redo the other three sites. Part of the launch timing was tied to getting our site out at the same time the other three sites were going out. Upstatement was working on the others at the same time, so in a sense, that process was much more involved.

For the most part, I just sort of built things and was my own code review and if something turned out embarrassing, I’m sure there would be a discussion about it. But for the most part, one of the glorious things about my job is there’s a part of my brain that is an editor, a part that’s a writer, and a part that’s a designer and a developer, and what I love about this job is it lets me please all those parts of my brain, which is not something you get a lot of opportunities to do.

I’ll be honest, I haven’t looked at the site in Windows. If there’s anything weird in Windows, Opera, or anything, I apologize to those users. Our user base is pretty focused on a fairly narrow set of devices. The majority of our traffic comes from Apple devices, whether that’s Macs or iOS.

Ethan:

I’m not sure if a QA hat would be an especially pleasing thing, but did you find yourself doing extra QA or testing when you were working on this responsive design? You mentioned browser resizing, but I’d be curious to hear if any of those wonderful, weird mobile devices ever entered your radar at any point.

Josh:

I don’t think this qualifies as a weird mobile device, but I did break down and buy a Moto G for getting outside of the Apple universe.

Ethan:

That’s weird-esque, I think.

Josh:

It was $50 off contract, how can you not buy an Android phone for that? So, little things like I was using a Unicode character for the hamburger menu on mobile views and I noticed that Chrome/Android didn’t like that, so I switched to Font Awesome for that, which has its own pluses and minuses but was easy, which is something I was looking for.

I haven’t seen a Windows computer in a long time, I live in a very cloistered world, but I assume it looks fine there. I’m a bad example for your listeners. Listen to all the other podcasts in this series, they have much better workflows.

Basically, almost all of my development took place in Chrome on a Mac, I would do browser testing across that. I’ll be honest, I haven’t looked at the site in Windows. If there’s anything weird in Windows, Opera, or anything, I apologize to those users. Our user base is pretty focused on a fairly narrow set of devices. The majority of our traffic comes from Apple devices, whether that’s Macs or iOS. Our iOS traffic is eight times the size of our Android traffic. I’m just looking right now. So, forty-seven percent Chrome, twenty-one percent Safari, thirteen percent Firefox, nine percent Safari in-app, five percent IE, and I think under one percent sub-IE9, one percent Android browser, .3 percent Opera Mini. Sorry, Opera Mini users, I have no idea what my site looks like in your browser. So yeah, there was a certain amount of that, but, it was not the sort of thing where if I were being hired as a developer to build someone else’s website, I would certainly do more of that.

One thing that made me feel pretty good about that is that we have so many followers on Twitter, I have a decent number there. I have found that when there are problems with the site, I get told about them, which I’m very grateful for. I will confess, there wasn’t a ton of that sort of cross-platform stuff, other than making sure that it worked in the latest Android Chrome, that it worked fine in Chrome, Safari, and Firefox. I haven’t seen a Windows computer in a long time, I live in a very cloistered world, but I assume it looks fine there. I’m a bad example for your listeners. Listen to all the other podcasts in this series, they have much better workflows.

I did notice that our percentage smartphone from the days since the redesign has gone up by about two to three points. We are seeing a bigger bump on mobile access to the homepage, which was probably the page that was the most unwieldy under the old design.

Karen:

One last question, how do you know if this redesign is working? Do you track your metrics around mobile use or desktop use? Or are you getting more people coming to the site? Did it work? Is it good?

Josh:

We launched on September 11th, September 9th, somewhere around there, so it hasn’t been that long. I did notice that our percentage smartphone from the days since the redesign has gone up by about two to three points. How much that is a result of the redesign, how much of that is just the ongoing march of mobile technology, it’s hard to differentiate. But I thought that was pretty good. We are seeing a bigger bump on mobile access to the homepage, which was probably the page that was the most unwieldy under the old design. The article pages were not responsive, but they were laid out in such a way that one quick double tap gave you a perfectly readable view, but we wanted to get rid of that double tap.

Beyond that, I’m happy from the flexibility it provides internally. Our traffic is very story-driven. If we have a big hit story, we get tons of traffic. If we don’t, then we get a more normal level. So we haven’t seen any particular bump in any direction. I monitor all the feedback on Twitter and it’s all been positive.

I feel a lot more comfortable looking at the site on mobile and I know some other people have said the same thing. Since that is, after all, the future, I feel pretty good about that.

It’s interesting to see when there are features that you think you can kill and then you realize that at least some people use them. On the old site, some years ago, I built a little button on the sidebar that just said “Zen Mode” and when you would click on it, all it would do is apply a stylesheet, which took advantage of the fact that all the article pages kind of looked the same, and just stripped away everything and essentially looked like—you can think of it as an Instapaper or a Pocket view, you can think of it as turning every web page into Medium—just the sort of, by now, web classic, nice, attractive, big text, everything else taken away, sort of centered of a white background. Because it was just loading another stylesheet that didn’t have any analytics tracking ability, I was never really sure if anyone was using it but I did get a few people saying “Why did you get rid of ‘Zen Mode’?” and I said “My hope is that the new site is zen enough that you don’t need an additional mode to add zen.” But I may go put something like that in again, just to please those users.

There are parts of the site that I’m happier with than others. I think on the front page in particular, we’re still going to keep iterating. I view it as a success so far. It’s hard to turn that into metrics. We’re not selling goods, there’s not a cart where we can see how often it gets emptied to add that measurement. As I said, our traffic is really driven by the news of the day and how much it connects with people and how much it blows up on Twitter. But I think that the site has been good so far. I feel a lot more comfortable looking at the site on mobile and I know some other people have said the same thing. Since that is, after all, the future, I feel pretty good about that.

Ethan:

Well Josh, we both feel pretty good that you spent a little time with us. Thank you so much for taking a few minutes to chat and we can’t wait to see where the Nieman Lab site goes next.

Josh:

Thank you both for writing books that helped inform this process.

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, Campaign Monitor, and we’ll be back next week.