It's probably the biggest thing to happen to web design since the ability to replace tables for layout using CSS divs for more control of website design.
Responsive design solves the problem caused by the presence of so many mobile devices with varying screen sizes. Traditionally you would have dealt with this problem by detecting the phone or tablet used by those accessing your site and redirecting them to a dedicated mobile version of your site. But that approach turns out to be a total waste of effort, since it ends up being really hard to maintain two or more separate instances of your site.
Here's additional information written by Tim Sohn.
In 2011, The Boston Globe launched a new website that adapts to the varying screen sizes of all computers and mobile devices. Other news organizations have since been slow to follow suit, but it seems this strategy, called responsive design, is catching on, at least among some major news players.
Responsive design: new name, old thinking
So, what is responsive design anyway? Ethan Marcotte, a Massachusetts-based independent Web designer and developer who coined the phrase and worked on the Globe site, explained:
“Responsive design on a basic level is about using more flexible layout, more flexible page design, and using a little bit of technology called CSS (cascading style sheets) basically to articulate how those designs should reshape themselves to be viewed on smaller or wider screens,” he said.
Marcotte said that in the past, websites were only designed for device-specific experiences. Now, responsive design allows all users to have the same experience, no matter the device or screen size they are using.
“So, mobile sites versus desktop sites, and then the whole tablet thing happened, and then all of a sudden there’s this third factor to consider,” Marcotte said. “I kind of feel like responsive Web design is a new name for some old thinking about designing more flexibly for a medium that works really well when you’re thinking about trying to design for these devices and screen sizes.”
Marcotte’s book, “Responsive Web Design,” is a popular manual for Web designers and organizations looking to utilize the strategy.
The time is now
A report released by comScore in February showed that during the three-month period ending in December 2011, 47.6 percent of all mobile users used apps (an increase of 13.3 percent over the three-month period ending December 2010), and 47.5 percent used mobile browsers (up 11.1 percent).
“In 2011, both the U.S. and EU5 (France, Germany, Italy, Spain, and the United Kingdom) saw strong growth in the usage of apps, reaching parity with the mobile browser audience by year’ send,” the report said.
Taking the mobile-first leap
According to Bill Adee, vice president of digital development and operations for Chicago Tribune Media Group, the Chicago Tribune’s website will be switched to responsive design later this year (the exact date is yet to be determined). The decision falls in line with the company’s mobile-first strategy.
“At the beginning of last year, we swore we wouldn’t launch another project that didn’t account for the mobile version first,” Adee said.
The Tribune first experimented with responsive design on its election center and breaking news sites. The media company converted its local blog network, chicagonow.com, to responsive last year. In January its Spanish-language website, vivelohoy.com, also launched with responsive design.
Adee said there are four reasons the Tribune is betting on responsive design: to go where the users are as quickly as possible; to save money and time on development and support of native apps; to provide advertisers with new ways to connect with mobile and tablet users; and to provide users with a consistent experience across all devices. He said, however, that chicagotribune.com’s switch to responsive design will be more challenging for revenue reasons as well as integrations with third parties.
When it comes to content, breaking news is most popular online at the Tribune, but the new chicagotribune.com will allow editors to display different content on different devices, Adee said.
The nonprofit perspective
ProPublica, a nonprofit news organization based in New York that focuses on investigative journalism, was keeping a close eye on the Chicago Tribune’s experiments in responsive design. The newly designed propublica.org launched in December 2011.
Scott Klein, ProPublica’s editor of news applications, said that when considering the change to responsive Web design, the organization made two observations.
“One observation we made was that, although we have a very healthy amount of downloads of our app — we have an App Store app for iPad, iPhone, and Android — we noticed although we have very healthy, in fact a bigger number of people than we expected, downloading our app, relatively few opened up the app every day, or really every week,” said Klein, adding that ProPublica has had a mobile-optimized version of its site available for a long time, but it has not seen much traffic.
The second observation was that about 10 percent of ProPublica users came to its website from smartphones.
“For us, it was a ‘paving the cowpath’ thing. We were getting uptake but not a lot of traffic to our apps. We were not getting a lot of traffic to our mobile site, but where we were getting a lot of mobile traffic was in this place where, frankly, it’s not a great experience, it’s not a great place to read our stories, it’s not a great way to find our stories. So, how can we simply make it great to read ProPublica stories and define ProPublica stories for this 10 percent of the traffic that’s coming from a smartphone?” Klein said.
ProPublica’s website, now optimized for desktop screens with a 965-pixel width and 320 for mobile, isn’t a daily destination for most people, because it publishes mostly longer-term investigative pieces.
“Social media is very important to us, links are very important to us, our email list is very important to us. We have all sorts of ways to get people into our stories other than our homepage. So, with a place like The New York Times or The Huffington Post, their homepage is a traffic firehose and they can point the firehose at whatever story they want, and that will get a lot of traffic. We are in a much different situation where we have to be much more out of focus, and kind of grabbing people from other sites and bringing them to ours. But that tool is taken away from us in an app. I cannot construct a link that in all cases will work to get you into an app,” he said.
ProPublica’s apps, however, aren’t going anywhere.
“Keep in mind, I think both approaches are very interesting. ProPublica is not making a big bet on responsive Web design and abandoning our apps. We’re absolutely in all of these places and are likely to remain so indefinitely. What excites us about the mobile Web is, there is a large audience who we can promote via the regular means,” said Klein, referring to the ability of social media, email newsletters, and other sites to point readers to a story on the ProPublica website. He added that he doesn’t think there’s anything intrinsic to swipe-screen navigation and app-like behaviors such as fixed-panels and pull to refresh.
“People are perfectly comfortable with the Web. They have loved the Web now for 20 years, maybe more than 20 years,” Klein said.
ProPublica had different goals than other news organizations for going responsive. Since it is a nonprofit, the majority of funding comes from fundraising rather than advertising. The main goal was to provide a better editorial reading experience, on any device.
“Because it’s an existing audience we were simply serving better, this was not a ‘let’s increase the number of pageviews’ or ‘let’s increase the number of pageviews per user’ (type of strategy). I hope that we are doing both, but we are truly not tracking that, and if we were, it would not be a question of whether it was a failure, or if it worked, or if it was a success,” Klein said.
Up next for ProPublica is figuring out how to optimize the site for screens larger than 320 pixels and developing an advertising strategy.
“We don’t have a big ad business, but I think as an industry, we’re going to start needing to think through what happens to all these leaderboard ads, what happens to all these 965 ads? What’s a proper responsive ad strategy? How do we pull advertisers along?” Klein said.
What advice would Klein give other news organizations considering going responsive?
“Look at your Google Analytics numbers. See what percentage of traffic is already coming to your main website. That’s your audience. How do you make things better for them? They’re already coming to your site,” he said.
Boston Globe: two audiences, two sites
Audience evaluation is exactly what caused the Boston Globe to change its online strategy.
Jeff Moriarty, vice president of digital products, said that before the Globe launched its responsively designedbostonglobe.com site in 2010, its main site was boston.com, which put a heavy focus on events and lifestyle news but also included content from the BostonGlobe. When users typed bostonglobe.com into their browsers, they were redirected to the free, ad-supported site, boston.com, which was born in 1996.
In 2010, the Globe’s analytics revealed that there were two types of boston.com visitors.
“There was a group of people that really valued Boston Globe content, the journalism, the traditional aspect of what theBoston Globe did; opinion, analysis, the journalistic aspects of the Boston Globe. And there were a couple of different sets of people that broke out into a couple of different types of audiences that were more about coming in, just looking at sports, wanting to know what to do, where to go, what’s going on in Boston. Those two really stood out to us. I think the opportunity that we acted on was the idea that we really had two distinct audiences, so we needed products to better fit their needs,” Moriarty said.
Today, boston.com remains a free site with lifestyle news and limited content from the Boston Globe. It also includes breaking news, all sports content from the Globe, blogs, and photo galleries.
Bostonglobe.com, on the other hand, is a paid website that supports all devices — screen sizes of 1,200 pixels (high-resolution desktop browser), 960 (standard desktop browser), 760 (iPad horizontal), 600 (iPad vertical), 480 (iPhone horizontal), and 220 (vertical iPhone).
“This concept of responsive design had never really been tested on this scale before. People had tried it on blogs, and we happened to have some experts in this area in Boston,” said Moriarty, referring to Marcotte and The Filament Group, both based in Massachusetts. “It just kind of took off from there.”
Moriarty said that the Globe is reaping the benefits of this dramatic move.
“It has a lot of benefits. When editors update the site, they are updating every version. We’re actually seeing really, really strong traffic from the search engines that I think partially is because you have one URL for every story. Every device is using the same URL; it’s just adapting itself,” he said.
The Globe currently employs about 50 Web developers and has five or six product managers on staff.
The Globe hasn’t ruled out launching native apps — it already had apps for boston.com — “but to some extent we feel like we can do with HTML5 everything you really need to do in an app. So, creating a new site with a browser that works really well and has streaming capability and things like that, you don’t need an app to do those things,” said Moriarty, adding that HTML5 allows bostonglobe.com users to download content locally for offline reading later, similar to a playlist. That feature works on all browsers except Internet Explorer.
So far, bostonglobe.com has published only one responsive ad. “Ad servers aren’t really ready for it yet, and advertisers aren’t quite (ready either),” Moriarty said.
Design simplicity for both publishers and readers
Patty Toland, partner of user interface design and development firm The Filament Group, which handled front-end development of the bostonglobe.com site, said that a major benefit of responsive design for the user is that it’s so accessible.
“The product of a news organization is the news; the content is the source. And really responsive does make the content very broadly accessible. It’s in some ways very democratic. It doesn’t require that you have specific technology available to you. It really does speak to the people where they are. That’s a huge benefit,” she said.
Scott Jehl, a Filament Group designer and developer, said going the responsive route is often a better choice, because publishers don’t have to dedicate resources for development on multiple platforms.
“From a technical perspective, you are actually reusing the same content across all experiences. So, when it comes to how that benefits the actual team at the Globe from a development perspective, it’s huge. The alternative to this would be developing separate websites potentially to follow the popular devices that are going to be accessing the site. Once you start going down that road, you often see websites sort of cater their content differently to the different platforms that access it. Eventually, it becomes very difficult to maintain,” he said.
Jehl added that using responsive design forces news organizations to build uncluttered, lightweight websites.
“That’s not really generally true of most of the desktop websites on the Web right now. They tend to be quite heavy and slow, and ad networks are generally built to be run on the desktop with faster browsers. There are lots of technical considerations around that, trying to figure out how best to use the same resources in dramatically different environments,” Jehl said.
Toland said that the switch does require news organizations to change workflow and the way personnel and content are managed.
Mat Marquis, Filament Group developer, said publishers are at an advantage if they have a mobile-first mentality. “I think it’s particularly important on the Web, because it’s very hard to fix things after they go wrong. So, it’s better to deliver the lowest common denominator and then build up from there based on capabilities. Generally, once things go wrong, they have already affected the user experience negatively,” he said.
Toland emphasized that mobile devices aren’t going away anytime soon.
“All trends lean toward them increasing, and I think even in the year-and-a-half since we started working for the Globe, the proliferation and variation of different types of mobile devices — the tablet market has really exploded, there are a lot of different sizes and scales, and they have different capabilities. But I think from a business perspective, I would imagine most publishers want to be able to meet their audience where their audience wants to consume their content, and so mobile first really does make sense in that context … It probably does position you better for a more comfortable future,” she said.
On the Horizon
• A spokeswoman for the Los Angeles Times has confirmed that the paper is considering responsive design.
• The BBC has released a responsive design site prototype online and maintains a blog on responsive design.