Episode Transcript

Karen:

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

Ethan:

And I’m your other host, Ethan Marcotte.

Karen:

And this week I could not be more excited to have Scher Foord of Condé Nast join us. Hi Scher.

Scher:

Hi Karen, hey Ethan.

Ethan:

Hey.

Karen:

So welcome to the show. Maybe you could start out by telling us what your role is at Condé Nast and what you’ve been working on as far as responsive designs go.

Scher:

So I currently lead design and user experience across all of the titles at Condé Nast when it comes to web and mobile web design. So over the past couple years we’ve really been focusing on building visual design teams and tech teams to work with the brands individually so that designers and developers can really get immersed in the brand’s businesses, their audiences. We’re seeing a lot of success with that team structure and we’ve been working through responsive site designs through across quite a few of these titles and it’s been a great learning curve for the designers and the developers in terms of learning responsive design techniques.

Ethan:

That’s great. Another really great thing is our sponsor, Campaign Monitor. I’m really glad they’re involved with the podcast because they have this new email builder they wanted us to tell you about, called Canvas. It’s based on styles, not canned templates that you have to choose from. What I like about the sound of that is that your content actually drives the design instead of the other way around. You’re not necessarily constrained into these little uncomfortable boxes to silo your information into. Now while they do have several preset pattern layouts to choose from, they also have this really well-executed drag-and-drop functionality that’s core to the tool. I’ve been a big fan of Campaign Monitor for years, they’ve been really great and generous about giving back to the community, in terms of publishing resources to make CSS-driven email much more approachable. Generally speaking, their software is built on top of a decade’s worth of tricks and hacks to make your emails just work across all the millions of email clients out there. Which is another reason I’m really excited they’re part of a Responsive Web Design Podcast.

Karen:

Give me a little bit more about how you’ve been implementing responsive design across all of Condé Nast. Like how did you convince people to go responsive? Like what changed in your way of thinking about design as a result?

Responsive design really came up as something that was an interesting factor for us to consider for a few reasons. One was just the exploding market of devices and all the screens that we needed to cover, but also factoring for how people were sharing content on social on their phones and making sure their content was accessible everywhere.

Scher:

The growth and trajectory of our traffic on mobile was just skyrocketing. What we were seeing was that we had some sites that had a lite mobile site, and sites that didn’t actually have any mobile presence, and the growth for sites that had a lite site was far outpacing sites that didn’t have any mobile presence. What we were seeing with the lite sites that we had, is that we really weren’t seeing the kind of engagement that we had for desktop. Responsive design really came up as something that was an interesting factor for us to consider for a few reasons. One was just the exploding market of devices and all the screens that we needed to cover, but also factoring for how people were sharing content on social on their phones and making sure their content was accessible everywhere.

We ended up taking two paths with our teams that were a little bit larger because we knew that we needed added resources to roll out a responsive design. We did go through that path of rolling out those sites responsively. We also used another option for our smaller sites using Mobify.js, which basically takes the desktop HTML and just renders a different type of CSS for mobile. So we had those two strategies in place to make sure that we had a mobile presence across all of our brands.

Ethan:

That’s great. Scher, one thing you said that is really interesting to me, you obviously had these lighter-weight mobile sites and an existing desktop presence. That mobile versus desktop is something that I find is kind of challenging for a lot of organizations. So when you’re beginning to think about a responsive design, how do you talk about the needs of a mobile user versus the needs of a desktop user? Are they different things? Is there a lot of overlap?

Scher:

We’ve typically seen that mobile users are on-the-go, they’re using their phones in these short frequent bursts of activities, and they’re using it throughout the day, even while they’re at work. Our tablet users tend to be later at night with more of a lean-back experience; they’re using it while they’re watching TV. The contexts are a little bit different, I’d say, in that we realized we need an experience on the smartphone that was much more of an active search mode and that our tablet experience needed to be a little bit more lean-back and more of a browse mode, and desktop obviously needed to be able to cover both contexts.

Karen:

As you’ve been rolling out these responsive projects, can you talk a little bit about what you’ve learned over the years? Like how did you scope the first one? How has the scope changed compared to what you’ve done? What have you learned over time?

Responsive design has been just as important for us on managing advertising on desktop screens and how to make sure that the ad units are viewable, as it is for presenting content on mobile and desktop screens.

Scher:

Our first responsive project, you know, we had a tight deadline and so we ended up doing sort of a fixed-adaptive responsive, responsive design solution where we scoped out three breakpoints. And we had three designers working on it, a UX designer and two visual designers. Over time what we’ve realized is that, we’re considering using discrete design a little bit more so we can have two code bases, one for mobile so that we can factor for better performance and we can fine-tune some of the contextual things that we want to do on the design side. I would say responsive design has become more important for us as it relates to viewable impressions. Responsive design has been just as important for us on managing advertising on desktop screens and how to make sure that the ad units are viewable, as it is for presenting content on mobile and desktop screens.

Ethan:

That’s great. The advertising thing is super interesting to me. As you guys have moved toward a more unified code base, one layout to rule them all, how has advertising been working out in that context?

Viewable impressions is being particularly tricky because you’re having to make sure that the ad units are within the viewport of the browser for at least a second, which is pretty challenging when you think about the various screen heights that you’ve got to work with. We have had advertisers come in asking for one hundred percent viewable guarantee on their advertising buys, which is pretty challenging.

Scher:

It’s been a challenge for our brands to think about what their strategy is going to be about selling advertising across platforms. In some places they’re selling mobile-only, in some places they’re selling it across site. There are lots of issues in the advertising world because of the units. It’s very hard to do custom sizes. It’s very hard to innovate on the advertising size, your creative sizes because of the lift in actually creating that unit. So we’ve actually tried to embrace adopting the larger advertising units within smartphone experiences just to ensure that an advertiser can buy across all of the platforms.

Viewable impressions is being particularly tricky because you’re having to make sure that the ad units are within the viewport of the browser for at least a second, which is pretty challenging when you think about the various screen heights that you’ve got to work with. We have had advertisers come in asking for one hundred percent viewable guarantee on their advertising buys, which is pretty challenging.

Ethan:

Yeah. Wow.

Karen:

For some of the sites, the ones that you were doing a new responsive design, not just modifying the code from the desktop site, did you base those designs on the existing desktop style or did you really start from scratch when you were planning the responsive redesign?

Scher:

We definitely started from scratch. I think that most designers prior to responsive design—not all—were using grid systems. I think it’s been a big education for lots of designers to get comfortable and familiar with grids in general. It was an opportunity for us to refresh the framework. We were also seeing that a lot of our users were now on larger screen sizes. I think everyone has typically been designing for 1024 and we were seeing a lot of our audience on desktop looking at 1280 and above, so we wanted to be able to make use of the space. So we did go ahead and update our framework for the desktop.

Ethan:

I’d be interested to hear a little bit more about that. What kind of tools are your designers using internally and has that changed recently?

Scher:

We’ve still stuck to the good ol’ basics of using InDesign for our wireframes (or OmniGraffle) and Photoshop for our visual design. We’ve really relied a lot on InVision to create clickable prototypes. It’s been very, very useful for us in user testing and then also in our stakeholder reviews because it really provides the context that people are looking for. We’re actually really excited to try and test out Sketch. I’ve heard really great things about it. It’s certainly been a challenge to make sure that we’re outputting all the assets for Retina screens so I’m keen to try it.

Ethan:

That’s fantastic. Do your designers tend to start thinking in specific breakpoints when they sit down to work on a new feature or new page, or are they just really focused on composition?

I’d love to say that we start thinking mobile first. I think we’re at a point where we’re thinking tablet first, which is to say making sure that everything at least is touch friendly.

Scher:

I do try to make sure that we’re looking at data before we start the design. We take a look at our browser widths and the screen sizes that our audience is on. That really dictates to us the breakpoints we need to be thinking about. Typically it comes down to mobile/smartphones, tablet portrait, tablet landscape, and then what we’ve been calling large desktop which is for 1280 and above. So it’s typically around four breakpoints.

I’d love to say that we start thinking mobile first. I think we’re at a point where we’re thinking tablet first, which is to say making sure that everything at least is touch friendly. It’s really hard for our stakeholders to think—there’s such a narrow smartphone view given the kind of immersive photography that we have for some of our brands. So tablet first is a little bit easier. And we also, you know, we do make sure we try to present our work on a tablet screen just to kind of get our stakeholders into the context of thinking about that, these experiences are being viewed across lots of different devices.

Karen:

I’d love to hear more about that, and in particular, how did the responsive design process change the way that you work with your editorial teams? How did you get them engaged and involved? How did you communicate to them that responsive design means that their “thing” might wind up appearing on a bunch of different places, on a bunch of different screens?

I think using the clickable prototypes and then actually having them play with the prototypes sort of helps them understand that it’s not just people reading content but actually using, you know, using the sites, which has been a big shift for us.

Scher:

Yeah, I mean, we’ve been challenged in terms of making sure that we can customize content that’s getting entered into our CMSs and we’re working through that process. So, you know, we’re not quite there yet. Certainly in the designer’s view it is sort of this process of looking at all the different, all of the different breakpoints and reviewing all the different breakpoints. Which can be a bit mind-numbing but it does give them the sense that it is being seen everywhere. I think using the clickable prototypes and then actually having them play with the prototypes sort of helps them understand that it’s not just people reading content but actually using, you know, using the sites, which has been a big shift for us. When I first started I think they really used to dive straight into visual design, and we’ve been pretty disciplined about making sure we actually start with UX. And so taking out all the pretty colors and fonts and actually thinking about the structure first. Which seems kind of rudimentary but it’s been a big step I think for the brands in terms of educating them in about how to build these experiences.

On the design side we have lots of really great ideas of how we can create more custom experiences on mobile, but a lot of it comes down to how we’re inputting that content.

Karen:

A couple of words that are like catnip to me, which is “changes to our CMS.”

Scher:

CMS?

Karen:

You know me too well.

Scher:

I know! You know, it’s been really tough. On the design side we have lots of really great ideas of how we can create more custom experiences on mobile, but a lot of it comes down to how we’re inputting that content. We’re on some legacy CMSs and we’re the process of migrating to… some of the brands are going to WordPress, some of them are moving over to a proprietary system that we’re building in-house. And that’s actually been a huge lift in burden on the tech team as well, as we’ve been rolling out responsive designs. And so, you know, I think we’re focusing on trying to make sure that we set ourselves up to be able to allow the editors to create a custom mobile experience if we want to. We are not there yet, but I think that we’ll get there.

We definitely have advocated for having tech involved way early. Even in a planning process where they really understand the business goals. I think that our technologists can offer a lot of creative solutions and troubleshooting.

Ethan:

That awesome. One of the things I’m kind of curious about, you know, you mentioned working with the tech team a bit. Are you finding that they’re more involved in the design process, maybe thinking about prototypes, or you’re just doing more of the traditional hand-off when you get to the end of the design?

Scher:

We definitely have advocated for having tech involved way early. Even in a planning process where they really understand the business goals. I think that our technologists can offer a lot of creative solutions and troubleshooting. So we’ve been probably doing a little bit more of pre-meeting before we present to make sure what we’re presenting is viable. I think there’s a lot more active discussion about interaction patterns and what’s going to be performing and what’s not. I think that’s been great. I’ve also seen a lot more collaboration around discussing how the grid is going to work with the CSS framework. There’s more side-by-side looking at the different devices and sort of troubleshooting issues as they come up. I do wish that we were in a better sort of hand-off mode in terms of setting up, and in terms of delivering pages, and doing more HTML prototyping. But we are limited in terms of the skill of our teams per brand and that’s a little bit of a challenge.

Ethan:

Oh, totally. I mean, I think that’s a transition a lot of people are still working on.

Scher:

Yeah.

Ethan:

But I think one of the things you mentioned too is—if Karen can talk about catnip, I guess I can too—is this notion about performance. Is that something that you find is, is involved in the discussion pretty early on with the responsive design? Or when does that usually come up?

Scher:

We always sort of rely on the developers to come and remind us if there’s something wrong. And we have brands that have a lot of beautiful photography. They expect it to be beautiful, scaling, immersive. Managing image-driven sites responsively is a huge challenge for us. I don’t think we’ve quite nailed it. I think we have to get more sophisticated about the type of DAM that we’re using. We’re definitely getting there.

Performance for mobile is also tricky in terms of testing. It’s still a manual process for us but we do have a corporate goal that we’re working with all the brass to try to achieve, which is three seconds for the DOM to be loaded on desktop and two seconds on mobile screens for the first screen of content to appear. So we have a framework for how we’d like our experiences to perform. We’re probably not entirely there, but it’s there in the back of mind for everybody to consider.

We’ve been doing user testing at a conceptual level with clickable wireframes, early stage designs, allowing users to play around with it, and it’s really helped us in terms of prioritizing content that’s important for the consumer, which sometimes does not jive necessarily with what our editors are thinking. But it’s a really great way for our editorial folks to hear what the consumers are thinking.

Karen:

Tell me a little bit about usability testing. You mentioned some of the prototypes that you might develop. How did you use those to talk to users or talk to stakeholders?

Scher:

I’ve been really excited about the fact that we’ve been doing user testing. It was novel for the digital teams here. It was really important to me to actually get consumer feedback early on around the concepts of what we were putting together as opposed to fine tuning the pain points towards the end of the design. We’ve been doing user testing at a conceptual level with clickable wireframes, early stage designs, allowing users to play around with it, and it’s really helped us in terms of prioritizing content that’s important for the consumer, which sometimes does not jive necessarily with what our editors are thinking. But it’s a really great way for our editorial folks to hear what the consumers are thinking. It can be a great tiebreaker as well if there are conflicting view points between our stakeholders.

Ethan:

That’s really great, Scher. One of the related things though is you mentioned doing some manual performance testing. Do you have a device lab? Is that something you invested in internally? How do you usually work with devices, I guess?

Scher:

Each of the designers that starts on the team, we make sure that they have a tablet device and a smartphone device that they can really dive deep in terms of testing. The team does have access to Android and iPhone, tablets and smartphones that they can use. The QA team does manually go through. We’ve been working through an automated testing system. I think we’ve actually made some pretty good progress. I think we need some layering of the performance testing but the little application that the QA team has been working on can actually provide screenshots for iPhone and iPad screens which would be immensely helpful when you’re doing a whole site redesign. So we’re getting there.

Ethan:

No, that’s great. You mentioned designers have some devices at hand, basically. Has that changed the way they start thinking about the design process? Do they actually do some device testing as they’re starting to think about page layout?

Scher:

Certainly as folks are… I’m forgetting the name of the application, but as they’re working in Photoshop they’ll mirror the experience on their phones as they’re working to give them a sense of making sure things are touch-friendly and how folks will browse through the experience. So yes, I would say it’s definitely been tremendously helpful I think.

Ethan:

Cool, that’s great.

There’s been a lot of growth in mobile. And to not take advantage of that would be terrible.

Karen:

Talk to me about the business benefit that responsive design has brought you. How do you measure or evaluate the success of these designs?

Scher:

In terms of measuring success, I think, we’ve seen, to a certain degree, a sort of leveling off of our desktop growth, it’s sort of mature at this point. There’s been a lot of growth in mobile. And to not take advantage of that would be terrible. But as we relaunch these responsive sites we have seen tremendous upticks in uniques and page views for our mobile and tablet sites. We’ve taken a good look to ensure what our bounce rates look like, and to check and make sure that we’re getting an uptick in social referrals, search referrals, and e-mail. And we’ve seen that, we’ve seen two to three times the growth on mobile and tablet with a very consistent desktop metric.

Karen:

How do measure the value of mobile and desktop users? Are you tracking leads or conversions or subscriptions from mobile and desktop?

Scher:

We do. Our consumer marketing team is sort of tracking conversions for their digital all-access subscriptions, But for us, I think, the big challenge for us is how to monetize on smart phone. The advertising units are meek and tiny and they’re very intrusive because the screen is so small. So the biggest challenge for us is not necessarily getting folks to the site but how to monetize the sites themselves.

Karen:

I totally agree. I have certainly heard that from dozens of other publishers. Scher, thank you so much for taking the time to do this today. This has been a fascinating conversation.

Ethan:

Seriously.

Scher:

Well thank you guys. I really appreciate the opportunity to talk a little about what we do what we do every day.

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. Be sure to visit campaignmonitor.com and check out their email editor, Canvas. Thanks for listening, and we’ll be back next week.