Responsive vs. Adaptive Web Design

Cross-posted from PBS Mediashift Idea Lab

After a short hiatus to focus on the Provincial election in British Columbia (shameless self-promo!), it’s time to get back to work unpacking the technology stacks of the world’s leading news organizations.

Last time, the investigation focused on the speed of some of the world’s top news sites, and proposed ways that sites can improve their performance. This time, we’re going to continue to focus on performance, while looking at two different approaches to serving mobile traffic: responsive web design and adaptive web design. If you need a primer on what difference between the two is, I’ve written one for you here.

The contenders

Let’s kick things off with a little friendly competition. And to avoid putting any American noses out of joint, we’ll turn our attention to the Great White North today, and look at two publishers using different approaches to mobile web traffic: The Globe & Mail, with an adaptive site launched in 2010; and Global News, with a responsive site launched in 2012. Before getting into the analysis, let’s look at the results:

(Mobile performance testing, on an actual mobile phone!, courtesy of GTMetrix)

You can see the full test results here and here.

At first glance, it appears that The Globe & Mail’s dedicated mobile experience, m.theglobeandmail.com, what some would call an “adaptive website,” takes the performance prize. The feature article tested weighs in at under 300kb of data and just forty requests for resources, delivering a lightening-fast mobile page load of 3.81 seconds. The Global News site, by comparison, required almost 20 seconds to load on a mobile phone.

How can this be? The Global News site was re-developed last year by some of the leading minds in the responsive web design community, whereas The Globe & Mail’s mobile site was launched eons ago by Internet standards.

Let’s explore…

Promise of a responsive Web

Responsive web design advocates promote the philosophy of a single web experience that responds to the various screen sizes of the devices that the site is viewed on, which they claim leads to less maintenance and a better overall experience. So, I asked the GlobalNews.ca team for their perspective on why they chose to go the responsive route, and why other news organizations might consider it.

“GlobalNews.ca launched its first website in 2009, it was a relative late-comer for a major news network, and it was never really the website we wanted it to be,” said David Skok, director of digital, GlobalNews.ca, “So this was a great opportunity for us to leap-frog forward.” Most of the traffic to GlobalNews.ca comes from search and social, not people typing in the URL directly, so it has not yet been a “destination site” per se, so the GlobalNews.ca team saw this as an opportunity to play to their strength — traffic from search and social — and look at the relaunch through the lens of a mobile-first experience.

The Online News Association’s annual conference also played into the decision, says Keith Robinson, Manager, Digital Products, GlobalNews.ca. He and his colleagues went to the conference in 2011 and had the opportunity to meet with the people involved with the Boston Globe’s successful relaunch as a responsive website. Boston.com, part of the Boston Globe, reported it as “Globe starts far-ranging paid website for all devices,” and “a site designed for customers who want premium content they can read on multiple devices, from computers to tablets to smartphones.”

“The Boston Globe’s relaunch was the talk of the town,” remembers Robinson, “It was a big part of the conference and the discussions about the future of news websites.” There was also a lot of discussion about “app strategy” and “adaptive websites” but having the success of the Boston Globe’s relaunch helped to crystallize the promise of responsive web design for a lot of news organizations at that conference.

Adaptive experiences still deliver

The Globe and Mail is regarded as Canada’s newspaper of record, with the largest national circulation and second-largest daily circulation, and its online front page, www.theglobeandmail.com, is a destination for many Canadians each morning.

When asked about their adaptive strategy, which includes a dedicated mobile site (m.theglobeandmail.com), and more than eight different native applications for a range of devices, Matt Frehner, Mobile Editor at The Globe and Mail, explained: “We have a big corporate and government audience, a lot of people are on older workplace devices, so we had to ensure that we were serving them, our audience, and not just the latest iPhones.”

At the same time, the Globe wanted to take advantage of the features on higher end devices, so they devised a “bucket approach.” Their “bucket theory,” as described by Frehner, used device detection on the server to group mobile visitors into three different buckets: a fallback bucket (old Blackberry devices, for example), a middle bucket (higher-end phones without touch screens), and a high-end bucket for touch screen smartphones like the iPhone and Android. From there, the Globe could deliver a streamlined experience to each device group.

Technically, the Globe is delivering different stylesheets to different devices, and excluding certain content types and templates from certain devices. For example, not delivering a Flash video player to a device that can’t playback Flash video and so on. This is all being accomplished on top of infrastructure that they built in June 2009, Frehner said, while pointing out that responsive design wasn’t at the level then that it is today.

Asked if the Globe would choose to go with a responsive approach today, Frehner says, “We’d absolutely look at it. Whether we’d choose to go under a single URL or not is something we’d look at very closely.”

Speed matters, and adaptive delivers

When I revealed the mobile performance tests — tests that are actually run on a mobile device vs. a simulator — to Frehner, pointing out that a feature article on the m.theglobeandmail.com site is roughly 80 percent faster than a similar feature article on the redesigned GlobalNews.ca site, he was not entirely surprised.

Other Canadian news web sites, tested in Chrome on a Google Nexus.

“One of the number one things that we focus on when developing for mobile, because we think that the most important thing for user experience is the user getting to the content as quickly as possible,” Frehner explained.

A large part of the Globe and Mail’s product portfolio is their native applications, and that same thinking extends across those platforms, Frehner said, “we’re not just talking about mobile web at the Globe, we’re also talking about native app development.”

To that end, when the Globe developed an API for their redesigned apps, they did it with a conscious eye to making sure that people could get to content as quickly as possible. For example, instead of an app that loads all of the content first and then send you to the home screen, the Globe’s API helps their apps loading content progressively, as the user needs it.

It’s still an app-based world

One of the many challenges that still lies ahead for the relatively young responsive web design movement is native apps: specifically, that a lot of news readers rely on them, and reports keep coming out that the traction in “app marketplaces” is growing not shrinking.

There are other challenges also for responsive design — how to deliver images, video, interactive stories, not to mention advertising. And undertakings such as GlobalNews.ca’s redesign help to provide practical opportunity, and incentives, for the responsive design thought-leaders to take on these challenges. For example, GlobalNews.ca’s Skok said, “When we approached Upstatement, one of the design organizations involved in the Boston Globe’s redesign, trying to convince them to pick ‘this Canadian news organization’ for their next client, part of the pitch was the opportunity to ‘get our heads around video and ads.’”

But, for many, responsive design still has a long way to go before it can compete against native applications. “The advantage of native code is clear to us,” said Frehner, “There is a certain ‘je ne sais quoi’ feel of a native app that is hard to describe, but the ‘snappiness’ of native code is just better that what’s available to us today with HTML5.”

Push notifications, for example, which were only recently added to the Globe’s native iOS application, has led to significant traffic growth. Frehner said that traffic is “exploding” because of the new notifications and that the increase of mobile traffic as a percentage of overall traffic is “staggering,” more than he expected. He says it’s not uncommon for his team at the Globe is seeing exponential increases in mobile traffic from their app portfolio.

A future of intelligent web design & typography-driven sites

So where does this leave us? For news organizations, it probably comes as no surprise, that it is not a clear-cut decision between responsive or adaptive strategies. Objectives and audience need to be considered; where your technology stack is today, where you’ve already made investments, and where you’d like to it to be tomorrow are all important factors. And like so many major technology decision, it would be beneficial to experiment if time and resources make that a possibility.

If I we look to the future for a moment, and consider the signifiant changes underway in the technologies of the Internet, it’s not that hard to envision a near future of “intelligent web design,” where news websites are both responsive and adaptive at the same time. Where the Globe’s “bucket theory” becomes a little more precise, where back-end server technology delivers device-specific payloads of information, and smart front-end libraries work to adjust the layout to the device’s screen size and orientation, as well as providing device-specific functionality.

The other approach, as captured in the article “The responsive web will be 99.9% typography,” is that the web will, by necessity, move to a period of design that is largely typography-based, in an attempt to sidestep some of the layout challenges entirely. As the author points out, many recent relaunches are heavily typography-based, and The Boston Globe’s responsive relaunch is no exception.

Almost two years ago, web design luminary Oliver Reichenstein, CEO of Information Architects Inc., spoke to a class of journalists and programmers that I was facilitating about the future of news website design. He’s been an advocate for a typography-based web since at least 2006, and his firm lead the responsive redevelopment of German news magazine, Zeit Oline, in 2009. His words ring as true today as they did two years ago, and six years before that, and I’ll leave off this column with a gentle nudge to give them a listen.

Cross-posted from PBS Mediashift Idea Lab. Please feel free to comment on the original!