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 we are stuffing ourselves with delight. We are here today with Brian Halweil and Lauren Wilson from the Edible publications for New York. Welcome!

Lauren:

Hi!

Brian:

Hey, thanks for having us.

Ethan:

But before we get started, I’d like to take a moment to thank our sponsor, Media Temple. They’re an LA-based provider of web and cloud hosting solutions that caters to web developers and designers like you and I, as well as to creative agencies and large enterprises. Now, they’ve been around since 1998, so there’s a pretty good chance you’ve heard of them. I mean, heck, one of my earliest sites was hosted on Media Temple. They offer 24/7, award-winning support, that’s based right here in the U.S., available online or over the phone. And Media Temple has one of the highest customer loyalty rates in the industry. They’re incredibly proud of their focus on the digital design community and offer a whole suite of products that are just tailored to its needs. If this all sounds good to you, you can use the code RESPONSIVE when you sign up, and if you do that, you’ll get 33% off the first three months of shared or Wordpress hosting. That’s available at mediatemple.net. Once again, from Karen and I, we’d like to thank Media Temple for sponsoring the podcast. Thanks so much.

Karen:

We are so excited that you all are here. I am personally very excited to talk to you because I think I spoke to you a couple of years ago about your redesign plans, and you have really done some amazing work with the site. It’s beautiful, it’s responsive, so I’m excited to talk to you about that today. Maybe you could first start off just by introducing yourselves and tell us a little bit about the work that you do with the Edible publications in the New York area.

Brian:

This is Brian, I’m the editor-in-chief of the four Edible publications that we put out in the New York area: Edible Manhattan, Edible Brooklyn, Edible Long Island for Nassau County, New York, and Edible East End for Suffolk County, New York. And we are part of the national network of Edible magazines, which includes about ninety publications coast to coast, and all of us share the mission of chronicling and celebrating our local food and drink community, that’s our editorial focus. And my background is in environmental journalism and then segueing into food journalism as a way to get readers to see food as an entry point, a gateway topic if you will, into global environmental issues, personal health, and how we interact with our community and our landscape.

Lauren:

This is Lauren, and I’m the digital editor of Edible Manhattan and Edible Brooklyn, and I’ve been with Edible for about two years. The way I describe my job usually is that for anything that those two publications do on the internet, I’m responsible for. So, that includes coordinating with programmers and executing the different priorities and managing those that we’ve had for our website, managing social media, and also editorial for our website.

We had no doubt, once we understood what responsive design meant, once we started to hear people talk about mobile-first, we knew that was for us. But that didn’t mean it was easy.

Karen:

Well, tell us a little bit about the redesign process that you’ve been working on for a couple of years now and probably are still poking at a little bit. When you started planning this redesign, was there a question for you about whether responsive design was the right way to go?

Brian:

Well, once we learned what responsive design was, there was no question whatsoever. But it’s probably useful to backtrack and give a sense of how deep in the dark ages we were. That lunch that we had with you, Karen, in New York was a milestone, it was the very beginning of our journey to where we are now. In all honesty, I was starting from a place of fear, extreme fear that we were becoming irrelevant as a print-first publication. Our analytics were showing us that seemingly overnight more and more of our readers were accessing our content on tablets and phones, our advertising dollars were beginning to shift from print to digital really rapidly, and when we looked at our websites or any of our digital products on phones, on small screens, they looked horrible and they didn’t work right.

We realized that we needed to move really quickly, to rethink not just our web design, which was the most superficial manifestation, but our entire editorial workflow, and then ultimately how our whole company functions.

The quick example that I will give is when we started this journey, we were spending about nine out of ten of our editorial dollars on print, and we saw that as one example of how our priorities weren’t straight if we were serious about keeping up with digital media. We’re now a lot closer to fifty/fifty, five out of ten dollars being spent on print and the other half being spent on digital, but that migration over two years included a lot of staffing change, a lot of workflow change, not just the manifestation of website redesign. So to answer your question, we had no doubt, once we understood what responsive design meant, once we started to hear people talk about mobile-first, we knew that was for us. But that didn’t mean it was easy.

Lauren:

Yeah, agreed. And actually, Karen, it’s funny, Brian actually, right after I was hired, sent me a copy of your book, kind of like, “This is the vision that we have for the future of our web presence,” and it was pretty obvious to me, given the argument you make there, that that was the way to go for many different reasons. So, since a couple years back, this has definitely been a top priority of ours and kind of a guiding light to any decisions we make about the website in the future.

We haven’t made a big distinction between desktop and mobile users. We are assuming that all of our users are likely to be on mobile at least for some of the time that they’re accessing our content.

Ethan:

I’d love to hear a little bit more about that transition to mobile and tablet-based readers, specifically how that might have influenced the responsive design. I’m asking because a lot of our guests and a lot of our clients tend to realize that—well, I guess there’s a bunch of debates there depending on who you’re talking to, some of them might actually see mobile and desktop users as needing different content or different information and trying to do different things, whereas others might actually say that they all effectively need access to the same information. Where did the Edible publications in New York actually fall in on that when you were first going responsive?

Brian:

When we started seeing the big uptick of readers accessing our content on mobile and tablets, we started seeing it at about thirty percent of our readers accessing on mobile and tablets, and now it, on a daily basis, could be as high as sixty or seventy percent depending on the time of day. Because we’re serving up primarily text and photos and video, we haven’t made a big distinction between desktop and mobile users. We are assuming that all of our users are likely to be on mobile at least for some of the time that they’re accessing our content and we really have taken a mobile-first approach in that sense. And while the desktop view is naturally going to have larger images and larger font and perhaps a sidebar on some of our page and content types, we are comfortable with everyone getting the mobile view experience and we don’t think that the desktop user has a different need than our typical mobile user.

Lauren:

Yeah, and I would add that I really think that, in looking at our analytics and that people were gravitating more toward experiencing our site on tablets and mobile, it really made us hone in on the three main types of content that we offer on our site.

In our print edition, we really serve up these longform beautiful stories, and we have some listings and we might plug an event. On the website we really see that we have three main areas that always end up at the most popular parts of the site and are three distinct types of content. So, we have the stories that we put up, both from our bimonthly magazine, so once every two months, and then we have stories that go up every day, so that’s just regular editorial; another type of content is our guide, which recently had a big facelift; and then we also have our events. Those components of the website existed before it was responsive, but we kind of honed in on building those out and deciding what those were going to look like and how we wanted to curate them and updating them more regularly as we made the responsive shift.

Our first phase goal was to get all of our websites responsive—that is, for all of the basic story content to be responsive, to look beautiful, to be legible and readable on all screen sizes.

Karen:

Let me ask about your planning and scoping process for a redesign of this magnitude. So, as you were trying to get your arms around the work that needed to get done, how did you think about how you planned out that project? And in particular, how did you think about whether the responsive aspects of the project might take you longer than you expected?

Brian:

It’s a very good question. We went into this assuming, like with any building project, that it would take twice as long and cost twice as much as the best contractor’s estimate. An early first step that we had to take was assembling this brain trust, this dream team of people who maybe we knew through acquaintances or maybe we cold-reached out to on Twitter and asking their advice, because we were operating in sort of a digital knowledge scarce situation and we didn’t have the resources to hire a big team or a big digital firm to do this work for us. So, when we conveyed to this brain trust our interest in being responsive in everything that we did online, we got pointed towards some WordPress programmers—we’re on WordPress—some programmers and designers who could work within our budget. And being in New York, we were pointed towards a number of firms that were well out of our budget but they were still extremely helpful to us in helping us kind of narrow the project and get the budget down even though we didn’t ultimately go with them.

Our first phase goal was to get all of our websites responsive—that is, for all of the basic story content to be responsive, to look beautiful, to be legible and readable on all screen sizes, and that did not include any of the features that we’ve added, making our guide responsive, our event calendar responsive, or any of the other digital products that we ended up rolling out.

We had also had the dream of combining all four of our websites onto a multi-site platform in WordPress that would allow one of our editors to login and access any of these four different territories, and we saw that as just a brilliant, scalable idea that could actually expand if we expanded our Edible titles or if we looped in any of the other Edibles around the country. Almost the back-end that you’d imagine Eater or Curbed or any of these publishing platforms that have different geographic locations in different territories, following that sort of model. We found that not only was that super complicated, it was well outside of our budget, so we had to take that off the table.

The process was, from very early on, not only honing the content and goals we had with what we wanted to share with our audience, but really prioritizing what we wanted to achieve in each phase of this responsive redesign, because we simply didn’t have the time or resources to do it all at once.

It has been expensive, but it’s been worth the investment and we’ve found that the cost drops rapidly over time, because it forced us to clean up our data, it put us in a place where we were more nimble for each generation of technology, it allowed us to respond to advertisers and other revenue opportunities that we would not have been able to respond to if we hadn’t moved down this path. So the ROI has gone up over time while the incremental cost has continued to drop. In a nutshell, it has been necessary in order for us to be future-friendly.

Lauren:

Yes, I mean we definitely tried to be aware of as much as we could at the get-go and reach out to the people that we knew were experts in this area or could speak to our weaknesses and help us better understand those. I will say, after having gone through it, it’s surprising how much we didn’t know we didn’t know at the beginning, but at the same time, I think what partly and largely made this a success actually is having those generous mentors and being willing to reach out to them and engage with them.

Brian:

And Karen, one other quick follow-up: that lunch that we had with you where I was so inspired and excited, I don’t know if you recall I knocked over a martini glass and it shattered all over the table…

Lauren:

[laughs]

We had to bootstrap a lot of this content cleanup work because the programming work was already over-budget and was taking too long.

Brian:

…Coming out of that meeting, we had a powwow with our programmer at the time and he said, “Two months from now, we should be up and running. We’ll have our first live version of this responsive site.” I mean, it literally took eight to twelve months to get to that point. We went way over-budget, took four times as much time as we thought worst case scenario, but we learned a ton in that period and we got really smart about changing our workflow and cleaning up our data.

Among the different innovations that we came up with internally over that time, is we started throwing these “content parties,” where we would do a call on social media out to our hardcore writers that wanted to show up in a coworking space and we fed them dinner and we trained them on going into the back-end of our website. We’d have twenty to thirty people in the room for three or four hours and we would literally go through thousands of story posts, thousands of event listings, thousands of old guide listings and clean it all up for $400 of takeout food—sometimes even less than that because we found restaurants that wanted to support us in this effort. So we had to bootstrap a lot of this content cleanup work because the programming work was already over-budget and was taking too long, and because we had to wait for that responsive redesign to happen, we decided, “Okay, there are some other things workflow-wise that we can set into motion immediately that will make us a more digital-first operation” even before we launched the new website.

Lauren:

Yeah, it takes a village, as you said earlier, Karen.

We really had to start questioning when we were thinking about these longer stories for print, does that have any implications for when that story will exist online?

Karen:

[laughs] It sure does. Yeah, I wanted to follow up on that and maybe just ask you a little bit more broadly to talk about the content changes that you might have made to the site. Like, did you change your publishing platform, what other processes did you have to go through to fix the content that was already there, how did that change your publishing workflow for the future, maybe?

Lauren:

If you don’t mind, Brian, I think I can comment on a couple things here. But another thing that Brian and I took away from our initial meeting, Karen, was really thinking about digital-first when we were commissioning stories. I mean, yes, I’d already started just doing daily editorial for the website that would only live on the website and never see print. But, you know, we really had to start questioning when we were thinking about these longer stories for print, does that have any implications for when that story will exist online? So, I would say that, more than ever before, we really started honing in on our analytics and what stories were performing well there, and trying to figure out ways to imagine those that would still provide this really rich, beautiful, immersive print experience but did the exact same thing online and that it didn’t necessarily have to compromise one or the other. One of those is really thinking about how we represent photos on our website, that’s a really huge part of our print brand. I had mentioned Edible to someone, they’re like, “Oh, it’s so pretty!” And beforehand, we have these very talented photographs going out, taking thirty shots at a time and only maybe five of those were getting in print, so we had to think about, well, what do we do with those online? Does it just end up in a story? How do we promote that on Instagram? Do we promote it on another platform? How do we harness those visual assets? So, I think that was one takeaway that we had, is really starting to think about that from the beginning.

Brian:

And our style sheets changed completely. I mean, we began requiring photographers to put all sorts of metadata into their images before they shared it with our photo editor, and as a result, the caption was already written, some geolocation information was there, and we could quickly put together a photo gallery to use the two dozen great images as opposed to the single image that might make it into a really short print story. And there was pushback and there were questions and concerns, “Photographers won’t do this,” but we realize, no, everyone is going to start requiring this. We started hearing that all sorts of other publications were requiring the same thing, so we weren’t asking too much, and now all of a sudden it’s just accepted and it’s just part of the routine.

Lauren:

Yeah, it even affected our workflow so much, thinking about digital-first, that we transitioned—like when we were going through this redesign, as if that weren’t a child in and of itself, we were also transitioning all of our systems to Google products. We all work remotely and we were trying to collaborate on new Google Docs to execute things, really getting people to harness what we could do on the drive in that way, and switching over their inboxes to really start to streamline just getting things up in a digital way first and then assembling those in a print fashion as well and keeping that part of who we are.

We prioritize digital experience when we hire on both the editorial and the sales side, and we feel like a stronger company as a result, and we don’t feel as behind as we did a few years ago.

Brian:

From the bigger organizational standpoint, it kind of touched everything. Pretty early on in this process, we had an all-staff meeting and we got everyone’s agreement that, as a company, we are open to technology and we embrace technology, and that’s what we want to be going forward, and so everything that we do began to shift.

We eliminated the print program that we were producing at all of our events, which was a hassle and was always a last minute thing, and like any print product, there’s a concern about typos and the item becoming outdated quickly. And we basically stopped doing that and we contracted with a programmer that we couldn’t afford for a web redesign but we could afford for a small digital product, and he created a mobile website that we repurpose for every event as a type of e-program that gets emailed to all the event attendees that gets emailed a few days before the event. We’re seeing more sharing, more digital engagement for all the event attendees and vendors and sponsors. So it saved us money, we don’t have to print a program anymore, and it led to more engagement.

We transitioned our entire sales team to Salesforce instead of the fairly outdated and analog sales platform we were using; we started using Slack internally; we committed to UberConference for all of our meetings; we use all Google for business products… We kind of can’t imagine this—we prioritize digital experience when we hire on both the editorial and the sales side, and we feel like a stronger company as a result, and we don’t feel as behind as we did a few years ago.

Ethan:

Well that’s really exciting to hear. One thing I’d like to hear a little bit more about is when you actually started talking about the visual design for this new responsive site, how did you structure that process? Were you partnering with a designer to look at mockups in Photoshop or were you doing a lot of prototyping and sketching? Just tell me a little bit more about how you actually started talking about the visuals for this new site.

Lauren:

Initially, because again, our budget was not huge, we really tried to see what was available out there as far as templates for WordPress and see which ones we thought were closest to kind of our brand that we’ve cultivated in print, and then we sought to personalize those. In personalizing them, it really got to be different wireframes at different responsive sizes. But throughout this process, we’ve worked with different programmers at different phases and they’ve had their own style, but that was how we started.

We used Photoshop and wireframes and tools that are not the best way to be truly mobile-first, but that’s what our designer, both our print designer and our web designers, were still using.

Brian:

I think because early on in our brain trust it included people who were hardcore advocates of mobile-first, like Brad Frost, we felt we had to demand that from everyone we worked with. And even a programmer or design team that we hired who said, “Oh yes, of course, we’re totally mobile-first, we get that,” they would send us Photoshop mockups of the desktop version and they wouldn’t share anything live, and nothing mobile, and they’d say, “No, we’re going to work with the desktop-first and then we’ll go do the different breakpoints.” So we got really frustrated because we felt like we saw this simplified mobile-first way to think about things and we couldn’t really find the programmers or designers that would be willing to work with it.

At the same time, a lot of the hurdles we were creating for ourselves. I mean we looped in our print designer, a very talented person who gets our aesthetic for the magazine, and it was a tough learning curve for her to be able to weigh in on how our website was going to look on different screens. So we had to come up with some common principles, like realizing white space is our friend and we should not cram—just like in our magazine, we really enjoy lots of white space and we don’t try to cram every page full of content, we had to agree on that same principle for every manifestation of our web content.

But I would love to tell you that we did everything in Pattern Lab or some other sort of open source tool that’s totally mobile-first, but we used Photoshop and wireframes and tools that I was reading are not the best way to be truly mobile-first, but that’s what our designer, both our print designer and our web designers, were still using and had access to. And even in these most recent iterations of our redesign, which is totally ongoing and I’ve just accepted this is always going to have to be a line item in our budget and staff time, there’s still a huge dependence on Photoshop and mocking up desktop-first and then eventually getting to mobile. We are still looking for that ideal programmer who will totally show us a mobile-first live iteration rather than doing something in Photoshop and then coding it out as a second step.

What we can say definitively is we’ve seen about a doubling of traffic on our site since this redesign, so let’s say over the last year and a half.

Karen:

Let me ask just broadly, how do you know if this redesign is working for you? So, how do you measure success, or what changes do you see in the data that you’re getting that might show whether the website is working or what you might change in the future?

Lauren:

I think some metrics that we try to hone in on for that is, yes, just page use in general, which is kind of basic, but also the time spent on the site, and the bounce rate, how people are sharing it online, whether or not people are complaining to us about the user experience. Those, to me, are very basic forms of success. What would you add to that, Brian?

We can confidently send links to advertising prospects, who I’m finding, as often as not, are looking at our links on their phone as opposed to a big desktop screen.

Brian:

So, I think what we can say definitively is we’ve seen about a doubling of traffic on our site since this redesign, so let’s say over the last year and a half. We were hoping for much more and we felt that, as our users were more frequently on mobile and tablet, that we’d see an even bigger bump. But we’ve seen about a doubling of traffic and the potential for bigger bumps in traffic.

Our previous site was really not set up to handle big bursts of traffic and this redesign included being on a better server, having more open source tools for managing traffic flow. We used to have regular site crashes and slowdowns, and we just don’t see that anymore as we’re on a WordPress-only server platform. I would say all of our other metrics have increased dramatically, that is, gone in the right direction. Page views per user are up, time on site is up, bounce rate is down.

But that all aside, for me, the big measures of success have to do with internal pride with our website and our digital presence. I mean it used to be something that we were not that proud of and a little bit embarrassed about, and every editorial meeting we’d spend a little bit of time just kind of bashing ourselves and saying, “When are we going to finally up our game here?” So, that’s been really nice, to have that internal pride and confidence that we can be happy with this, and that’s been huge for the publishing and sales side of the magazine, where we can confidently send links to advertising prospects, who I’m finding, as often as not, are looking at our links on their phone as opposed to a big desktop screen, and they’re the folks that we’re really trying to sell on the fact that we are cutting edge, we’re digital-first, if you buy a digital campaign with us, it’s going to look beautiful and be effective.

One other metric of success is site speed, and that is something, again, just like hammering in the mobile-first over and over again with whoever we worked with, we had to constantly remind programmers that we were super concerned about site speed, didn’t want to do anything that was going to slow down the load time, and wanted the site to load as fast as possible. And we learned the hard way that you really have to emphasize that relentlessly or a priority like that will just be lost and you’ll be in a situation where you’ve got to claw your way back to a fast load time.

Ethan:

Well Brian, Lauren, I just have to say, I’ve really enjoyed speaking with you both today. But before we let you go, I have to ask: do you happen to have any advice for any of our listeners who might be starting a responsive redesign today? More specifically, if there’s one thing that you’ve learned in redesigning the Edible publications in the New York area, what would that one thing be? Lauren, do you want to go first?

Lauren:

Sure. I would say know thyself and kind of know where your weaknesses are, know what questions you have, don’t be afraid to write those questions down, and then to reach out; do your homework and reach out to the people you think might have answers for you or would be generous with their knowledge. I think really thinking that through at the beginning and also kind of understanding that, as Brian said, this is an ongoing project, it’s an ongoing question as the internet evolves for any publication. But knowing yourself and accepting those sorts of things I think are hugely helpful in pulling things like this off.

Brian:

I would add that if we’re talking about legacy publications, anyone who still has one foot in the print era, begin to think about shifting everything you do, from hiring to workflow, to how much time you spend, begin to think about shifting from print to digital. I can say with full confidence that you will reap benefits.

And then what I will also say is we are a small organization, we don’t have an unlimited budget, and so be satisfied with just doing it piece by piece. We were overwhelmed at first that it was only a complete redesign that was going to help us, and because it took so long, we were able to successfully complete all other sorts of small projects that pushed us in this correct direction, which made us more responsive as a company and which were really satisfying to accomplish in the short-term.

Karen:

Well Brian, Lauren, it is such a pleasure to talk to you. I’ve been following your work for a couple of years now and I really love what you’ve done with your publications. And hey, if you ever want to go out for an epic lunch again, please think of me. But with that, thank you for coming on the show today, we really appreciate it.

Lauren:

Thank you both.

Brian:

Thank you both. It’s an honor.

Ethan:

Thanks to everyone for listening to this episode of a responsive web design podcast. Thanks also to our sponsor, Media Temple. Go to mediatemple.net for easy to use hosting and 24/7 customer support.

If your company wants to go responsive but you need help getting started, Karen and I offer a two-day onsite workshop to help you make it happen. Visit responsivewebdesign.com/workshop to find out more and let us know your company is interested.

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.