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 incredibly giddy to speak with Michelle Legro, who is an associate editor at Lapham’s Quarterly, as well as Rebecca Smith, who’s a producer at Bluecadet Interactive. Guys, thank you so much for being here.

Michelle:

Thank you for having us.

Rebecca:

Yeah, we’re excited to be here.

Karen:

But before we dive into our conversation, I want to tell you about some exciting news from our sponsor, Campaign Monitor. Did you know that more than half of emails are opened on a mobile device? Making emails look and work great on all the different devices and email clients is one of the hardest problems in responsive design. And that’s where Campaign Monitor comes in. They have an easy to use email builder called Canvas, that creates emails that look great everywhere. In just minutes, you can drag and drop your way to a beautiful email that just works, with images and typography that will scale correctly on every device. Want to try it out? You can see how it works, and you don’t even need a Campaign Monitor account. Just go to campaignmonitor.com/templates and see for yourself just how easy it is. I know, because I use it myself, and I love it.

Ethan:

So, why don’t you guys introduce yourselves and tell us a little bit about what you’ve been working on recently. Michelle, why don’t you go first?

Michelle:

Well, hello. So, for the past, I’d say nine months—actually it might be almost a year—we’ve been wanting to redesign the website for Lapham’s Quarterly. We’ve had the same website since 2009 or so. The magazine began in 2008, so this is actually the third iteration of the website. I think the first iteration was essentially a splash page, and the second was our first complete website. Many years later, we now know what our website needs to do, what it should do, so that when we went in for the redesign we were like, we need to completely rethink this, taking into context what we had learned over the past four or five years.

So it’s been about a year. We engaged Bluecadet, I believe actually in, I think it might have been February, February of 2014. We started the process of trying to figure out which developer we wanted to use, what we wanted our website to be like.

We really have so much information. I mean, Lapham’s Quarterly is a magazine, even though it’s been around since 2008, every issue has 100-plus pieces of literature, fiction, nonfiction, poetry, documents. It’s almost sort of encyclopedic in the way it covers history. So we really were going in there like, look, we’re a magazine, but we may not resemble any magazine that you guys have ever read, or ever worked with. We really needed to begin this process looking at the magazine itself and try to figure out how it can best be represented on a website.

We had a wonderful discovery phase with Bluecadet in February, then they just really went to town on it, and six months later, nine months later, that’s where we are now.

We don’t want to just be piled in with other magazines, and have the same kind of site that magazine has. We want to be thought of as maybe more of a museum of content.

Ethan:

Well that’s great, Michelle. Rebecca, why don’t you tell us a little about yourself and what you do at Bluecadet.

Rebecca:

Sure. So, I’m Rebecca Smith, I’m a producer at Bluecadet, but I’m passionate about content strategy and creating amazing user experiences as a producer. So every time I get the opportunity to put on my content strategist hat, I run with it. Bluecadet is a digital agency based in Philadelphia, we’ve won Emmy Awards, we create websites, mobile apps, interactive installations, and immersive environments. We work with a lot of museums, universities, non-profits, and cultural institutions, including MoMA, Smithsonian, Harvard, and National Geographic. We really strive to work with organizations that have phenomenal content, so Lapham’s Quarterly was really a dream client for us and doing their website was just, I mean, an amazing opportunity.

I managed a team of five, so there was Theresa who was a designer, Mark was the technical strategist and the lead developer, and Will and Greg were two other developers who worked on the project, and Josh and Troy who are our principals, were also involved in the early stages. As I said, I got to wear a lot of hats with this project. I got to work closely with Michelle and Lapham’s Quarterly, I led the internal team, and I also did the bulk of the content strategy for their responsive design.

Michelle:

And if I could just say, something that really drew us to Bluecadet was the fact that they did do a lot of cultural institutions. Because in many ways, when we were looking at different developers it was like, “oh, you’re a magazine, well how can you be more like the Times? How can you be more like BuzzFeed? How do you want to get bajillionhits.biz to come to your site?” And we were like, look you can’t. We don’t want to just be piled in with other magazines, and have the same kind of site that other magazines have. We want to be thought of as maybe more of a museum of content. So looking at Bluecadet’s work on sites such as MoMA, sites such as the Franklin Institute, we see ourselves more like that. We want to be reconceived as just being a magazine that’s on the newsstands so that it can best be read online.

So even though [editor Louis Lapham] does not have smart phone or a tablet himself, the number of times he asked me, “will people be able to read it on their phones?” He asks me that, I want to say almost every day.

Ethan:

Well, as a big fan of bajillionhits.biz I still completely respect that decision. That’s a wonderful story. I guess I’d love to hear a little bit about, when you were thinking about undertaking this redesign how did you go about convincing your stakeholders and any folks internal to Lapham’s that responsive design was the way to go? Or at least, where did responsive design enter the conversation?

Michelle:

Well, it’s funny because as Rebecca and I were talking about what we were going to talk on this podcast, I was like, I don’t know what I am going to say. It was just a no-brainer for me. It was a no-brainer for pretty much everyone in our room, including our editor Louis Lapham. I will just let you know that Louis does not have… he has a mobile phone, just not smartphone, but he definitely knows. He surrounds himself—he is 79 years old—he surrounds himself with people who know what needs to happen. So even though he does not have smartphone or a tablet himself, the number of times he asked me in the lead up to designing the site, “Will people be able to read it on their phones? Will people able to read it on their iPads? On their tablets?” He asks me that, I want to say almost every day. Because he knew that people that surrounded him do that, even though he may not do it himself, he knew that was one of the most important things that could happen. So that was really just a no-brainer. It was one of the requirements that we had, going into the project. It was never even a question.

We really had the opportunity to just focus on creating amazing user experiences and an amazing reader experience, no matter what size screen people were on. Rather than having to focus on making the sell to Lapham’s Quarterly, we really got to focus on making the experience.

Rebecca:

And I have to say that because Lapham’s knew that they wanted that going into the redesign, it was in the RFP, we really had the opportunity to just focus on creating amazing user experiences and an amazing reader experience, no matter what size screen people were on. So, I think that we really appreciated that knowledge coming into it, because it just gave us the chance to present the articles, essays, Voices in Time in a beautiful way. And we were able to, we didn’t have to reinvent the wheel. They weren’t the first magazine to go responsive with their website. So we were able to take some of those standards that had been put in place before us, but just apply beautiful type styles and transitions in a way that people might not have been expecting on skinnier screens. Rather than having to focus on making the sell to Lapham’s Quarterly, we really got to focus on making the experience.

Michelle:

I just going to say that if you, I mean when you do pick up our magazine, our magazine is really all about the reading experience. I mean the text is very clean, there is very little sort of, front-of-book action where there are a lot of things flying at your face and huge text, small text. It is just text, pure and clean. And that was just something we really wanted to make sure we could do, that they could read it perfectly. Have beautiful photography, have art come in at just the right place, not overwhelm you. The reading experience of Lapham’s Quarterly was one of the most important things when the magazine was being designed on print, so we wanted it to be considered, for the first time really, to have as a wonderful reading experience online.

Karen:

Let me follow up a little bit and ask about, how do you conceive the difference between what a mobile user and what a desktop user or a tablet user might want? I talked to some publishers that think of those scenarios; think of those experiences as being very different for the reader. And I’ve talked to other publishers that, one of the things they struggle with editorially is how to provide a really immersive experience with rich imagery and just a great immersive process for the reader when they are thinking about the smartphone view. Can you talk about how you conceived of that?

Michelle:

Our magazine is put together in an interesting way, in that, the way the text, the incidentals, the quotes, and the way the art all work together is very strange. They are meant to complement each other, they are not meant to illustrate each other. So I remember I had to have a discussion with Rebecca that these things that we call “pull quotes” are not exactly pull quotes because they are not pulled from the actual article. The quotes that we have peppered throughout the issue are meant to illuminate something further about the piece you are reading. So you might be reading a piece from 1920, it might have a pull quote from the third century BC, and it might have an image from seventeenth century Japan. So these things are all meant to speak to each other, they’re not meant to illustrate each other.

So one of our challenges was really to have… So on mobile, it wasn’t as important, the images and the quotes are really just supposed to add, they are sort of like the secondary level of what you’re reading. You are supposed to fly by them, and have them complement your reading. But we also needed them to… One of the ideas we had was to have it randomize, because one thing that I knew we could do on our new site was to refresh that amazing juxtaposition that we create in the magazine.

So Rebecca can talk a little bit more abut this because this was a really important editorial decision that we made, was to have the art and quotes randomize with every piece of text. So essentially the text is the most important thing to read, having the images and the quotes as the secondary level that you acknowledge and it speaks to the text, that was the most important editorial decision that we could make.

It really wasn’t about scaling content down, it was about building the best reader experience based on the size of the screen that that reader is on. Any size screen, regardless.

Rebecca:

From our perspective, and my perspective personally, when thinking about content, scaling down from desktop to tablet to mobile, I hate hiding content and I hate removing content. I like to apply progressive enhancement as opposed to hiding or nixing content. For us it really wasn’t about scaling content down, it was about building the best reader experience based on the size of the screen that that reader is on. Any size screen, regardless.

One of the ways that we did this is, when you’re on the desktop, we added this little box called The Apropos, which is just another way to drive users to different sections of the site. It is another way to highlight related reads. What this box does is that, say in the Crime and Punishment issue, there was an essay on tragic Bolsheviks and Michelle said, “wow, a really great way to get people to move across the site would be to link this tragic Bolshevik article to the chapter from Demons by Dostoevsky in Revolutions.” She could very easily highlight that text, use an entity reference to associate the Dostoevsky article, and then on a desktop what you would have is, as you’re scrolling through the essay, a little box would pop up with JavaScript and it would say “Apropos Dostoevsky Demon” with a subhead, and then somebody could link out that.

This isn’t a linear magazine, people aren’t going to sit down and read it from cover-to-cover. We really wanted to let the site push the boundaries of that.

On the mobile experience, that’s scaled down to just a link. We had a long conversation about, should we just hide that feature? Should we get rid of it on skinnier screens? You know, where should the breakpoint be? Once again, I very avidly said, “no, if it’s on the desktop, it should be on the mobile screen.” So why don’t we just parse it down to a link, we’ll make it look very obviously link-like on mobile and then people can click it and you’re still achieving that goal of getting people to shift and getting people to not think about the magazine linearly.

Because that was another one of the challenges that Lapham’s presented to us. They were like, this isn’t a linear magazine, people aren’t going to sit down and read it from cover-to-cover. We really wanted to let the site push the boundaries of that. So that way, it’s not even about reading one issue cover-to-cover, and jumping around in one issue. We wanted people to be able to jump round the Lapham’s universe. And to get to, you know, get through themes, non-linearly, but through these different issues and through these different essays. I think that that’s an important part of the experience and an important part of being a reader of Lapham’s Quarterly, whether you’re, once again, if you’re on a mobile phone, a tablet, a phablet, or a 13-inch screen, or a 26-inch screen.

Every single time someone clicks on the link it needs to be random, and we’re never going to know which one it will be. And they kind of looked at me like I had three heads, like, that’s not structured data, how do we do that?

Ethan:

That’s really wonderful. A couple things in there you said made me think about, I guess, design process in general. Rebecca, I’d love to hear a little bit more from maybe Bluecadet’s side about how you started thinking about addressing some of the layout needs, I guess, and having some of those conversations about visual priority. And how did you actually start thinking about the design of a responsive, non-linear magazine basically?

Rebecca:

Well, we started doing mobile prototyping at the wireframing stage, so we were able to work with Theresa to adjust hit states, to just kind of play around with it very early on. And we, this kind of goes back to what Michelle said about the random artwork. When I first did on-boarding with the developers, I said, and all of the artwork and all of the quotes in the articles—and I know there’s essays and Voices in Time, but for reference I’m just going to call them articles—they all need to be randomized. Every single time someone clicks on the link it needs to be random, and we’re never going to know which one it will be. And they kind of looked at me like I had three heads, you know? Will and Mark, they’re like, that’s not structured data, how do we do that? And there’s a term that we used to describe this project overall, but I really got their buy-in on, and that was “sophisticated whimsy.” And that was how we approached the layout for all of the views, is this super sophisticated, intelligent, high-level content mixed in with this beautiful, random, happenstance association. That is really how we thought about the experience was this idea of sophisticated whimsy.

Rather than having these formal meetings twice a week, or once a week, we had these great work sessions collaboratively. Not just developers, not just the designers, no one made unilateral decisions about the project.

And as a team, we all became very protective over that idea, and we all became very careful about maintaining it on all of the possible views that we had. What we did, kind of from a process perspective is—and this changed, like this is very different from how we run a lot of our projects—but rather than having these formal meetings twice a week, or once a week, we had these great work sessions collaboratively. Not just developers, not just the designers, no one made unilateral decisions about the project. We would gather around the computer, gather around the whiteboard and talk for 15 minutes, or sometimes an hour, or sometimes even two hours. So that way we could approach the problems with layout, approach the problems with bugs, just holistically. Really once again keeping our mantra of sophisticated whimsy in mind, never stripping that experience from the layout or from the front end of the design or development. Excuse me.

Ethan:

That sounds great, actually. So, I’d be interested to hear a little bit more about, you know, starting from those mobile prototypes, did Photoshop enter the equation at all? I mean, how did you actually have creative discussions, and, you know, what was Michelle reviewing on her end?

Rebecca:

Oh, sure. So yes, Theresa worked in Photoshop, and then we had the wireframes were in Photoshop, and so Kevin, who at that point was a development apprentice, he worked with Mark to mark up the black and white wires on a mobile screen, and then we looked at those. And the great thing was that we looked at those before we even presented the first round of design to Michelle and her team. So Theresa was able to make adjustments that were necessary before we even got approval or showed Lapham’s Quarterly anything. There were times as we moved on into the development stage where we found that design elements that were done kind of without detailed prototyping weren’t working. Michelle was great and she really trusted us to flag these problems early on and to come up with solutions that would, once again, kind of respect this vision that they had for the website. There were times when I would call her up and say, you know, “Hey, I know that this was in the design. I know that you liked it, but it’s really not working. We think it’s hurting the user experience. I think we need to change it.” And she would say, “Okay. I trust you. That’s fine. That makes sense.” As long as I was able to articulate, you know, why it wasn’t working, not just because we didn’t want to do it.

What is this workflow going to look like on the editorial end? What’s the first thing we need to put in the system? What’s the second thing we need to put in the system? And I needed to know that kind of early on, so that when I hired someone to do this data entry, I knew what the workflow was going to look like.

Karen:

Let me ask about your editorial and your publishing process. So how did your work as editors change, and how did that relate to what you’re publishing in print? Did you implement a new content management system as part of this? Did it change the way that you actually physically get things onto the web?

Michelle:

So we did implement a new content management system, because there’s a lot of metadata in the magazine that was not previously recorded in the last website. For instance, every piece we have in the magazine has a place, it has a date, it has an author, it has a title, and it also has a type, and a lot of these elements were missing from our old site. For example, our old website, if you wanted to, say, search for things by Mark Twain, you couldn’t. You could only really search for instances where Mark Twain was mentioned. We actually didn’t have things that were organized by contributor.

One of the important things that I wanted Bluecadet to consider was to make all of this metadata searchable. They did a really wonderful job of breaking things out in terms of contributor, we make contributor pages. This was actually something that we editorially had to make from scratch because we do not necessarily have bios for each of these contributors, so that was something editorially that I had to make the decision as to how we were going to make these contributor pages.

It is really an archival process that we are still working on to get all of this into the new system, because so much of it needs to be redone so that the metadata is there, so all these amazing organizational systems that Bluecadet implemented work.

Let’s say Benjamin Franklin, every quote he has, every time he’s mentioned in a bit of miscellany, every time he’s mentioned in a map, every time he’s mentioned and has his own Voices in Time article, those would all then be organized underneath his name. A lot of this had to be hand-done because it did not exist in a previous form. So we essentially had to bring on some extra people to do the work.

Something I had been really pressing—or I’d had been really interested in or worried about—was what is this workflow going to look like on the editorial end? What’s the first thing we need to put in the system? What’s the second thing we need to put in the system? And I needed to know that kind of early on, so that when I hired someone to do this data entry, I knew what the workflow was going to look like. We were able to get that hammered out several months before the website went up so that I could have people working.

I’ll just say that when the first iteration of the website went up in 2009 or so, there were maybe seven issues, maybe six or seven issues. Now, we have twenty-eight issues. It is really an archival process that we are still working on to get all of this into the new system, because so much of it needs to be redone so that the metadata is there, so all these amazing organizational systems that Bluecadet implemented work. So that our magazine which, again, sort of acts a bit like an encyclopedia, can continue this sort of rabbit hole effect of people being able to go from an essay, to something written by Benjamin Franklin and seeing a quote, and then they jump to another issue, and then they read in that issue, and then from that issue, a time period leads them to another place. So that was really important for us. But it has been, editorially, it’s an archival project.

The lesson I have learned is don’t update your website every five years. If I changed anything I would have done this two to three years earlier. What I’ve learned is that, any updates we have to this site, I want to do them incrementally rather than coming up with updates three years down the line.

Ethan:

One thing I’d like to hear a little bit more about is… Let’s say we’ve got a hypothetical situation. We got this wonderful responsive site. Lapham’s Quarterly is looking great. You guys have to start redesigning it tomorrow. So I’d be interested to hear, what were some of the lessons you learned? I mean, if you had to start a redesign process again, you know, tomorrow, what would you do differently?

Michelle:

A redesign process on this beautiful site that we now have, or a redesign?

Ethan:

Yeah, just, you know, generally speaking what have you learned from the redesign process that, you know, if you were given another chance, what would you do a little differently?

Something I would really just have, something I will change for the future—or wish we could change the past—is just continuing to update and upgrade the site as you need it, rather than just waiting.

Rebecca:

Dang, that’s a hard question.

Ethan:

“Nothing” is perfectly fine.

Rebecca:

Yeah, but, our process was so amazing, internally, I feel like our team is still in the honeymoon phase. Like every time we look at the site we’re like, wow, it’s a beautiful site, it’s a gorgeous site, and just, you know, the way we work with each other is different now. I guess.

Michelle:

The thing that is, again, sort of bugging me, is just really all of this uploading we have to do because our old site just didn’t have all this metadata and our new site does. I would have just maybe started sooner, if I could have realized that sooner, that would have been wonderful because we could have had months to continue this archival work.

I would have presented the architecture, or the outlines for the CMS earlier to her, even if it wasn’t complete. Even if she couldn’t have started doing the data entry actually in the template, maybe she could have started organizing it and getting it together.

The lesson I have learned is don’t update your website every five years. I mean, that’s really the thing I would have changed. If I changed anything I would have done this two to three years earlier. What I’ve learned is that, any updates we have to this site, I want to do them incrementally rather than coming up with updates three years down the line. Because technically I feel like it’s a problem now in that we never updated the metadata on the old site, and this is sort of our own fault.

So we had to pay for it in terms of getting the manpower in to organize all that archival data. Something I would really just have, something I will change for the future—or wish we could change the past—is just continuing to update and upgrade the site as you need it, rather than just waiting.

We probably spent as much time thinking about Michelle as an end user, and her team as an end user, as we did the readership. We spent a lot of time working and collaborating to make using that metadata and those taxonomies and all of that associated content as easy as possible.

Rebecca:

Hearing Michelle’s pain points, is that I would have presented the architecture, or the outlines for the CMS, earlier to her, even if it wasn’t complete. The CMS is Drupal, by the way, Drupal 7. Even if it wasn’t complete and even if she couldn’t have started doing the data entry actually in the template, maybe she could have started organizing it and getting it together, so that way it would have been an easier process to input it.

I will say though, we probably spent as much time thinking about Michelle as an end user, and her team as an end user, as we did the readership. We spent a lot of time working and collaborating to make using that metadata and to make using those taxonomies and all of that associated content as easy as possible. Obviously it still takes time, I couldn’t make it timeless, but just as simple as possible. That way when she did hire interns to do the data entry, they didn’t need to be too technically savvy with it.

There’s so many moving parts, considering there’s quotes that need to be gathered, art, charts and graphs, the Voices in Time, the essays. It previously took us several weeks to gather these things, but now we’re going to be able to do it in a week, which is wonderful.

Michelle:

And this is true, this is definitely what we’ve found. It is a huge project, but in the past it would take us several weeks to get an issue up. The way it works editorially is, we close an issue, and then the minute we close the issue, the website begins to be developed. Because we can’t obviously, we don’t put anything on the website that hasn’t been finalized that’s in the issue. So we have about a month between the close of the issue and when the website goes live, and it’s just because there’s so many moving parts, considering there’s quotes that need to be gathered, art, charts and graphs, the Voices in Time, the essays.

It previously took us several weeks to gather these things, but now we’re going to be able to do it in a week, which is wonderful. It’s sort of funny because I think about… It took me, it used to take us so long to do one issue. And now we’re just like, banging them out weekly, especially with the help of our archivist, that putting the new issue up is almost incidental, in terms of putting up all of these back issues. The minute we’re done with all these back issues, we’re going to have so much extra time on our hands, I don’t even know what we’re going to do.

Rebecca:

You’re going to build your blog.

Michelle:

We’re going to build our blog. Oh, yeah, I remember that!

I was always happy with it, while even in the depths of being driven crazy by all the content that needs to go up, it always was sort of this beautiful, calm, reassuring presence. That’s what I was so happy with.

Ethan:

Well, this has been wonderful, guys. Michelle, Rebecca, I just want to thank you both so much for telling us a little bit about Lapham’s Quarterly, and I can’t wait to see where the site goes next.

Michelle:

Yes, it’s very exciting. We are just delighted, everyday that I use it and look at it, I’m just so delighted. It makes me so happy I would just email Rebecca in the middle of the night as I’m just inputting all of this content, groggy with sleep. I just love looking at this site so much, it makes me feel so calm and happy, I just really love it. You know it’s sort of like the golden retriever that you’re petting on the head and you’re like, oh you pat his head. I was always happy with it, while even in the depths of being driven crazy by all the content that needs to go up, it always was sort of this beautiful, calm, reassuring presence. That’s what I was so happy with.

Rebecca:

Thanks. It was great to talk to you guys and we are already kind of shaping out ideas to make the experience even better.

Michelle:

Yep, so, stay tuned.

Karen:

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

Ethan and I are really excited to announce that we’re offering workshops on responsive design to the public. One will taking place on March 06 in Boston, and the other will be in New York City on April 2-3. If you’re interested in attending, visit responsivewebdesign.com and register for a ticket today!

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. If you’re interested in bringing us to your company, please go to responsivewebdesign.com and let us know that you’re 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 again to our sponsor, Campaign Monitor. Be sure to visit campaignmonitor.com and check out their email editor, Canvas. Thanks for listening, and we’ll be back next week.