Responsive design: Opportunities and challenges for news sites

All four news outlets featured in this article - the Guardian, the BBC, Midland News Association and Time.com - have all in the past few months unveiled their latest steps in responsive design.

Last month the Guardian lifted the curtain on its "work-in-progress" responsive beta site, Time announced its redesign for the magazine's website and BBC News started rolling out as default its responsive site onto mobile phones.

And in the same month the Midland News Association title the Express & Star launched its responsive site, following in the footsteps of the Shropshire Star which made the same move in August.

The decision to pursue a responsive design was greatly fuelled by the increasing use of mobile devices by users to access news content, and the desire on the part of news outlets to improve the mobile experience when viewing content on a browser.

When it comes to reach, news outlets keen to target audiences across platforms are encouraged to consider the responsive route.

"I think anybody who's trying to reach a large audience on many different devices, responsive design is something they ought to be thinking about," Chris Russell, head of product for news at BBC Future Media told Journalism.co.uk.

And over in the US Time.com was experiencing the same diversity when it came to the platforms content was being accessed from.

Our users are coming to us not just on desktops anymore, they're coming to us on the iPad, they're coming to us on their Android phones, and we want to be where the users areCathy Sharick, Time.com

"Our users are coming to us not just on desktops anymore, they're coming to us on the iPad, they're coming to us on their Android phones, and we want to be where the users are," managing editor Cathy Sharick said.

"So it's gone from much more than just a desktop redesign to something that we had to think about from the different sizes across all platforms."

Time.com was also driven by the size of its social audience, she added.

"One of the big things for us too is that we have a huge social following, we have close to 4 million subscribers on Twitter, almost 2 million on Google+ and we feel that the responsive redesign is allowing them to have a much much better experience when they click on these links from social, so that was another big reason why we did the redesign."

The regional news sites within Midland News Association have witnessed a similar growth in mobile access, with an increase from around 11 and 12 per cent of users accessing content via mobile devices in the first quarter of 2011, to around 30 per cent in the first quarter of 2012.

Below are a collection of eight points news outlets might wish to consider when developing responsive design, based on interviews with four digital publishing experts for this Journalism.co.uk podcast.

• Time and resources invested v long-term benefits

Most of the experts reflected on the significant investment necessary to pursue a responsive design in terms of time and resources, which will of course be an important consideration for news outlets.

Front-end architect at Guardian News & Media Andy Hume said that "for smaller organisations at the moment if you have a desktop site and a mobile site it's obviously a very expensive project to throw all those away and start again from scratch, and I wouldn't necessarily recommend doing that straight off the bat".

But he added that looking ahead to the future he believes "long-term that this is the way to go".

"The idea of separate sites for desktop, mobile, tablet, it was always a compromise really, it never quite fitted in with the overall philosophy of the web and this idea of one web and universality and whatever device you load a webpage on showing you some content.

"I think longer term that's going to be the way forward".

Sharick added that for Time.com's redesign there was "a lot of work that went into it", and preparation took around a year. But again, looking to the future she is sure it will "pay off".

"We can now code once and have the site be set up on many different devices and also publish once. Now when I publish the site, when we've been covering Hurricane Sandy, I know that the top story that I publish on the desktop is also showing up on all these different platforms. So Time is available for everyone where they want to see it."

And the cost has not stopped regional publishers from following the same path. At MNA "it has been costly from a resource point of view", head of digital William Beavis said.

"It has been a big investment of time. We certainly spent in excess of six months on the project going right through from the very beginning to the very end, and consulting key stakeholders in the business as we went along to make sure that they were kept up to speed with how it was going to work."

But the company was able to recognise "the value this would bring us and how it just helps us future-proof ourself to a certain extent for the next couple of years", he added.

• The future growth of mobile devices

Another consideration when it comes to responsive design is what the future will hold in terms of access points. The Guardian's Hume explained that "the diversity of the web as a platform is only growing".

There's real divergence of devices at the moment ... that long-tail of devices is growing very very fast and I think the only way to deal with that practically is with a responsive design approach, rather than trying to target these individual platformsAndy Hume, Guardian

"There's real divergence of devices at the moment, we're talking about hundreds of Android devices, a new tablet introduced almost every week. That long-tail of devices is growing very very fast and I think the only way to deal with that practically is with a responsive design approach, rather than trying to target these individual platforms."

Beavis agreed, adding that by the first quarter of 2013 "there's going to be a whole bunch more users out there, particularly with tablets, and they are becoming much more affordable".

This growth in range and accessibility of devices means more users potentially accessing content in this way, and a growing need to be catered for, particularly in the tablet world, he predicted.

"What I would expect to see actually is an increase in people accessing our site from a tablet rather than from the mobile phone, but I do think the overall percentage of visits from a mobile device will increase. I'm not sure what that figure will be at the moment, but it's definitely going to go up."

• Not just about responding to screen size

When people discuss responsive design the main feature that comes to mind is a design which responds to the size and shape of the screen it is being viewed on, for example a desktop computer screen, compared to a tablet, compared to a mobile phone.

But, as Russell explains, there are more characteristics of mobile devices which designs can be responsive too.

"We also detect people's connection speeds and we give them an experience that's more optimised, for example we deliver a lower resolution version of images but if somebody's on a higher connection speed we immediately replace that with a much higher quality image, so it's not just about device type and screen size, there are various different ways in which we're basically responding to the many different ways in which people are trying to get our service."

Similarly at the Guardian the two areas of focus when it comes to the mobile experience is the size of the device and performance.

"On desktop you typically have a little bit more leeway in terms of bandwidth and the connection speed that your users are experiencing," Hume explained.

"On mobile it's more likely, not for certain but more likely, that they're on a slower connection and we need to make sure that our core mobile experience is very fast, it's very optimised to get down through people's mobile connections and render on to their screen quickly."

And at Time.com Sharick added that as well as text and images, videos have also been made responsive and able to resize to different screens, which she added is "a pretty big deal for us because video is a big push for us going forward".

• Understanding context of use

One challenge raised by Hume is the ability to go beyond understanding what device is being used by a reader, but the greater context of that use.

For example, he explains, "what context are they in, what are they doing, why are they on their mobile device? Is it because they're sitting on the train travelling to work and they just want a quick glimpse at the news, or are they actually at home on a high-speed connection but they just can't be bothered to walk over to their desktop computer or open their laptop."

This means that when it comes to designing the responsive site "there's a real conflict between how much do we strip down the experience for mobile, but not lose too much of the rich, more engaging stuff that you can deliver to a desktop device."

One example of the sort of content this might affect is visuals such as data visualisations and interactive graphics.

He said this prompts questions such as "what do people want when they're on a mobile device? Do they want those kind of visualisations? How can we contract them so that they fit into the narrower scope of the mobile device or should we leave them out altogether?"

"Some of those questions are slightly difficult to answer, it's a little bit early days in trying to answer them, but that's why we're experimenting with this stuff, trying to iterate fast on the design and see what works well for people, what doesn't work well and change things around quickly."

• Responsive advertising

Building a responsive news site is not just about making the editorial content responsive, for sites generating advertising revenue ensuring a good user experience when it comes to adverts will also be important. And responsive design offers interesting opportunities to do just that, improving the experience for both users and the client, as MNA's Beavis explains.

"One of the issues that we faced was that if you were on our site previously and you accessed it on, let's say, an iPhone, it was quite difficult to read the content of a leader board or a banner ad and the like.

What happens now is our site is intelligent enough to actually recognise that although you are on our website, you are looking at us on an iPhone and it can actually serve up a mobile advertisement instead of what I would call a standard desktop-size adWilliam Beavis, MNA

"What happens now is our site is intelligent enough to actually recognise that although you are on our website, you are looking at us on an iPhone and it can actually serve up a mobile advertisement instead of what I would call a standard desktop-size ad.

"That means the advertiser gets a better response because the ads are generally clearer and the site is built to accommodate those ads better and so the user can interact with them better as well."

The Guardian is also currently working with its advertising partners "to see if we can be a little bit creative with how we integrate ads in a way that works in a more responsive way", Hume told Journalism.co.uk.

"It's a tricky area for us because we want to work with lots of different advertising partners, we want to get the great ads that they serve into our content, but we also want to do it in a way that's ending up with the best user experience for our users but also the best value for advertisers as well.

"In this world of responsive design where things are really nicely tailored for particular devices, particular screen widths and the like, we want our ads to work in the same way as that, so they expand or contract to fill up as much as is or isn't available and at the moment some of the approaches to integrating ads are not quite as up to speed as the technology could currently let them be."

He also highlighted the potential need to address the way advertising is sold, so the web is approached as a single platform as opposed to a mobile site or a desktop site.

"A lot of organisations are set up to sell ads for a particular product, we sell for the mobile site, we sell for the desktop site, and when we move into a world where there is only one site and just different manifestations of that depending on how you choose to consume it, we want to perhaps think about how we sell advertising and sponsorships and other commercial offerings better across that one platform rather than for these individual products."

• Editorial mindset

Similarly when it comes to the way content delivery is considered as part of the editorial mindset, Hume said the adoption of "one, coherent editorial voices across all these different devices", should actually make "people's lives easier", where perhaps in some newsrooms editorial still view their mobile sites as a separate product.

If we can help create tools for editorial to create one, coherent editorial voice across all of these different devices that the site's being loaded on, but then present it in a way that's most appropriate for that device at the time, it should make their lives easierAndy Hume, Guardian

"Perhaps there's been a slightly branched editorial focus on the two. So in a way this should make people's lives easier, if we can help create tools for editorial to create one, coherent editorial voice across all of these different devices that the site's being loaded on, but then present it in a way that's most appropriate for that device at the time, it should make their lives easier.

"I think there are some challenges, simply because of the way organisations are structured but again that's something that's early days and something we'll figure out as we go on."

Russell added that at the BBC re-training has not been necessary when it comes to content production. He said there is "a cultural awareness about the importance and growth of mobile that we're engaged with and that we're getting journalists more and more to realise that".

"So there's a cultural change, but in terms of the mechanics of actually writing a story we already write stories in a multiplatform way, we've been doing it probably for getting on for a decade since we moved our TV text, Ceefax at the time, over to share the same content as the website and at that point people started writing things for different screen sizes and having to observe headline lengths and paragraph lengths and things that fitted in a multiplatform way.

"So we're fortunate I think because we made that investment then that we have something that can be rolled out to lots of different screens and lots of different sizes and shapes of screens that come along. So our text product, our basic core product, is in quite good shape without needing lots and lots of re-training."

• The future of native apps

So with this investment in responsive design offering improved mobile experiences, what does this mean for the future of native apps? As Russell highlights, when it comes to smartphone delivery the typical "native app style interface" is developing into a "familiar" style for smartphone users and therefore may be considered "the best way" for responsive design too. But this does not mean native apps are no longer required and he added that the BBC will continue to invest in apps alongside the responsive design site.

"We currently have a very successful native app that's on the iOS and Android platforms for both mobile and tablet and we intend to invest in that in the future because we think there are certain things that the browser on mobile devices can't yet achieve.

"There are certain features that are only available in native apps. We also think that certain types of devices where they are in large-scale, mainstream uses such as currently the iOS devices and Android devices, you can deliver a better experience, a more smoother user experience."

Sharick said that Time.com is also going to continue its investment in native apps, with an iPhone app, Android app, iPad magazine app and Samsung TV app already in the market.

"What we've seen is that all those different applications are very popular for the people who want to be reading the news that way so we don't want to phase them out we just want to be everywhere the reader is. So the readers are on our responsive mobile platforms but they're also on these apps and we're going to stay there and support them."

And at MNA also, Beavis said they will "still do apps occasionally", particularly in niche areas.

• Tips for others: Prototype, collaborate and iterate

Sharing some advice for others, the BBC's Russell said the broadcaster gained much benefit from "building a prototype quite early on".

He also recommended making the most of bringing together "all of the different disciplines and skills you have at your disposal and making sure that's really joined up".

Both the Guardian and Time.com discussed the value of ongoing iteration and taking on feedback to guide design developments.

"We are encouraging ourselves to look at the feedback that we're getting from users," Sharick told Journalism.co.uk.

"We think this is a really really big step forward and so for people who are about to start out on it I would say the biggest advice would be yes this is a big first step but we're definitely going to learn a lot over the next few months and we're going to have to iterate and think quickly and make changes as things come up."

Free daily newsletter

If you like our news and feature articles, you can sign up to receive our free daily (Mon-Fri) email newsletter (mobile friendly).