The Association of Magazine Media

Time.com GM Craig Ettinger on bringing responsive web design to the iconic brand

After a bit of a delay from Hurricane Sandy, MPA held our Responsive Web for Magazines workshop featuring guest speakers from New York Magazine, Glamour Magazine, Deloitte Digital, EndPlay, and Time.com.

I sat down with Craig Ettinger of Time.com (who presented an update to Time.com's beautuful responsive redesign at our workshop) to talk about the challenges of redesigning one of world’s most heavily trafficked sites, and how his team brought responsive web design to the iconic brand.

Grey: What’s your role at Time Inc.?

Ettinger: I’m general manager for Time.com where I oversee the website and Time’s mobile product strategy, working very closely with our sales, marketing, editorial and technology teams.

Grey: I imagine the decision to move Time.com to a responsive architecture was a major decision for the organization considering Time is one of the highest trafficked sites in the world (Alexa ranks Time.com the 568th highest trafficked site in the world currently). Can you talk a bit about how that process unfolded?

Ettinger:

In the fall of 2011 there was a conference produced by Breaking Development , focused on web design and development beyond the desktop. We sent our lead designer and mobile product person for Time.com so we could gain more exposure to what was going on in that space; Responsive Design was one of the hot topics. We knew that it was one potential solution for addressing our growing mobile audience, so a little over a year ago we began the debate internally about formally adding Responsive to our site roadmap.

We’d begun to see our mobile traffic increase steadily throughout 2011, both tablet devices and smartphones. That was one data point that we were keeping our eye on, and as the year went on we started to think more about that audience and how we address their needs. At the time we had a separate mobile website, what used to be called a WAP site. We were addressing an audience on mobile web to a point, but we saw that with our desktop website, more people were coming to us from mobile devices.

Heading into 2012, we were approaching 10% of our audience coming from mobile and tablet, and we continued the debate on not only how to address that from a user experience standpoint, but also how we could become a more efficient operation from a backend maintenance standpoint. With Responsive we could create a design with a single code base and that experience would then be available across all devices, but we also wanted to make sure that when we launch new things on the site, new sections or design existing sections, we could more efficiently make that a cross-device optimized experience

Grey: Was it a custom system or was it something that you pieced together from various off the shelf products?

Ettinger: It was largely custom, along with leveraging some existing code libraries. We had help from a development firm called AppendTo. Based on our designs and requirements, they helped set the direction for the technical approach and handled the core front end work. Our own development team, our small group of TIME.com developers, did the heavy lifting of integrating the HTML5 and CSS into our backend CMS.

Grey: What about ad delivery? One of the things we’ve found from magazine brands who have gone Responsive is that the ad delivery, and the ad display, haven’t kept up with design and development, and we’ve seen some magazines have built their own responsive ad delivery system. How did you handle advertising?

Ettinger: One thing that we took as a given was that the advertising in a Responsive context is pretty far behind. We were not only one of the first major news sites to go Responsive, but also one of the first major consumer facing publishing sites in terms of the scale of our site and the extent to which we were rolling out the redesign. We’ve been developing the expertise for very complex ad delivery internally, but we didn’t have a perfect solution right out of the box. That would have added a significant amount of time upfront in terms of trying to understand the potential solutions that the ad community could deliver.

What we ended up doing was making sure there was a 1:1 correspondence between the various breakpoints that we were delivering. We design for six different breakpoints across devices, from desktop down to tablet, all the way down to mobile. So we asked ourselves, if we’re delivering leaderboard and rectangle on desktop, what would the corresponding units be on tablet, on both portrait and landscape mode, and then down to smartphone? What happened was at a couple of the breakpoints we realized there wasn’t a perfect fit. For example, 7 inch tablet devices in portrait mode didn’t have an analog to a 728x90 leaderboard, so we elected not to serve a leaderboard for that scenario, and instead serve only the rectangle ad. We’re working with our desktop ad server, DFP, for most devices, and we use our mobile ad server on smartphone devices, switching between both depending on the user agent. This allows us to provide advertisers a highly effective responsive program. Advertisers get the great Time.com branded user experience and their ads fall into place properly.

Grey: Many media companies have entirely separate teams that work on the various digital properties. What was your team structure going into the Responsive project and what will it be moving forward?

Ettinger: Maybe we are unique in this sense. On the digital side, all the digital Time branded products are managed under a single team, which makes us really efficient. There is still resourcing that is unique to the print product and the digital product, but there’s a good deal of advantageous overlap there. When it came time to make the decision about whether we wanted Responsive web, it was a single team weighing the pros and cons, and then getting Rick Stengel, the managing editor of Time, on board. We had that benefit, as opposed to other organizations where three or four different teams may have to agree that this would be the way to go.

Grey: Is it that same team that came together going to maintain the site?

Ettinger: Yes. Cathy (Sharick, Managing Editor at Time.com) manages a team of digital editors and producers, and the product and development team rolls up to me and sits a little bit more centrally across the news group, which includes Sports Illustrated and CNNMoney. The one area where we had to work extensively across teams was in the aesthetic layer to the redesign. That was one of the goals of the project beyond the responsive piece; we wanted our website, our mobile products and the magazine to be a more consistent reflection of the Time brand. One of the major goals of the redesign was to have a cross-platform look, so the designers from the print side worked hand-in-hand with the digital design team in the early stages to come up with an aesthetic in terms of font treatments, graphic treatments and the right use of photography. There was much more collaboration than what historically had existed to make sure we were getting it right.

Grey: Are there insights you can give, unique challenges you faced building out such a massive, high-traffic site?

Ettinger: Absolutely - site performance. How the site performed was the top priority. The site may look beautiful and the responsive design may function well, but we have to make sure with all the new code we are putting on the site that it’s fast and glitch-free. What we built can handle the traffic now, but as things scale up [we need to make sure] that it holds. We kept a close eye on site performance, not just the homepage, but also all the site sections, and we conducted a significant amount of testing during the quality assurance process. In the end, we actually improved site performance!

Another insight is the importance of photography. Photography is huge to the Time brand, and we really wanted to play that up in the redesign. One of the most challenging aspects of responsive is how you handle images. We worked closely with the photo team to define how we optimize photography workflows so that it works hand in hand with this new responsive design. There was definitely an improvement in performance of photos on the site as the process went on. We started to incorporate different techniques into our processes so that we could maintain the extremely high level of quality around photos and photo galleries to keep performance optimized across devices.

The last piece of insight we had was around SEO (Search Engine Optimization). When you execute a responsive redesign, there are a considerable number of changes to the markup (changes to the HTML and other code on the site). We spent a lot of time, before during and after, taking a look at how creating a single site to meet all devices might impact SEO. The good news is that many of our key indicators are up, including our SEO referrals. One unique benefit of doing this responsive design is not only are we more SEO friendly, but it’s much more social or share-friendly. Time is the number three news site on Twitter and number one on Google+. Most of social is taking place on mobile devices, so now any content that’s shared, mobile users clicking through to Time are getting an optimized mobile experience. Whether it’s an article, a photo gallery, a special package, a video, they’re going to get this great experience.

Grey: What advice can you give to a brand, big or small, when they’re considering making the move to responsive? Is there one thing you wish somebody had told you?

Ettinger: I would definitely say, don’t underestimate the amount of time it takes to build a responsive site. It took us about nine months start to finish and a critical part of that was quality assurance. Not just using emulators and simulators, but you have to make that small investment to have multiple versions of the devices on hand so the people doing the quality assurance and user acceptance testing can test for multiple scenarios. You have to make sure you nail that part of the process. Also take into account the demands of the design process. Your design team will need to consider all iterations (device type, screen size, orientation – portrait, landscape) because this is not like your traditional redesign. There’s really a considerable amount of work upfront. Danina Anthony, our design director, was a real hero during this process.  We designed for six key breakpoints, and you have to design every template for each of those breakpoints. It’s painstaking design and user experience work upfront, but if you nail that part it makes everything else after that much easier - if you don’t put the time in upfront to think through those different scenarios, it will be much more difficult, and costly, during development.

Grey: You touched upon the response to the website thus far; can you share what the response has been?

Ettinger: Mobile and tablet traffic has gone from 15% of the site traffic pre-redesign to now almost 25%. The bulk of that was the migration of people who were on our old WAP site migrating to our new site, which is great since those people are now getting a much better experience. Pages per visit, across mobile, tablet and desktop are up considerably. Mobile, for example, is up 23% compared to what it had been. On our homepage, uniques are up 15%, and time spent is up 7.5%, with the mobile bounce rate decreasing by 26%. We’re really happy with what we’re seeing, and it’s just getting started.

--

Thinking about taking your brand responsive, or have ideas for an MPA workshop? Drop me a line at egrey@magazine.org or hit me on Twitter @ethan_grey