Main content

BBC News: responsive website to launch next week

Niko Vijayaratnam

Senior Product Manager

Tagged with:

BBC News online will be changing next week.

From Monday, when you visit you'll be presented with the new responsive version of the site. The image below shows what this will look like across a range of devices.

Why are we doing this?

As I've previously written, we've been tracking our audience moving in large numbers from accessing our site on computers towards predominantly using tablets and mobiles. In response to this, we have developed a new version of the News website which implements a responsive design so that we can offer all our users the best experience possible no matter what device they are using.

In releasing this new version of the site we'll be able to be more cost effective as we’ll only need to maintain one codebase instead of two separate codebases for the web (the current one which isn’t optimised for all devices, and another for mobile devices). Going responsive also enables us to ‘clean house’ and update the design of the site so that it can accommodate some of the exciting new features that we are looking to introduce later this year.

We've been developing this new version in the open for quite a while now as a 'beta' which has had more than 750,000 views on tablets and computers since we offered you the chance to 'opt-in' to get an early view of it in December 2014. The screenshot on the left below shows the front page of the site last August compared with last week - as you can see, significant improvements have been made in the last 6 months to the design of the section pages in terms of the improved layout, increased content density, reduced white space etc... These changes have been developed and tested iteratively with the audience in user testing sessions to ensure that we launch a product that meets the high standards that the BBC News site is known for.

We've also been listening to the feedback you have been providing to the blog posts I've been writing which we've used to enhance the product ahead of its launch. For instance, some of the things you mentioned included:

  • the colour of the summary font was felt to be too light so we have used a darker colour now.
  • the 'ticker' was important to you so we have introduced an updated version which now displays across all pages when there is a new breaking news alert instead of just on the front page
  • you wanted to be able to access the 'Have Your Say' section easily so we've added a 'Share with BBC News' link on all the section pages which will take you to this section.

So, what's different?

On smartphones, nothing will change - The responsive site has been the default experience on these devices for a number of years now and we've been making regular incremental updates to this experience ever since it launched.

On your tablet or computer, the new responsive website is an evolution of the existing version of the website rather than a radical re-design - The aim was to provide a much cleaner and clearer layout across all devices. The sitemap remains unchanged apart from the introduction of some new sections. i.e. 'The Reporters' and 'Explainers' which are promoted in the new navigation.

In the navigation, you will notice that:

  • England, Scotland, Wales and Northern Ireland can now be found behind 'UK'
  • There is a new feature available from the masthead (above the navigation, in the top right hand corner) called 'find local news' which will allow you to create a quick link to 'your local news' region.
  • There is also a section on the front page and UK section that provides links to each of the nation pages.
  • The 'World Regions' we cover can now be found behind 'World'
  • Clicking the 'More' button will reveal sections that cannot fit onto the main navigation bar.

In the screenshot below you can see the front page of the current 'static' version of the website on the left, compared with the front page of the new responsive version on the right. As you will notice, the length of the new front page isn't drastically different and the content density is comparable to the static version. In general, the front page and section pages are largely the same when viewed on a computer or large tablet in landscape. On a tablet, when viewed in portrait, the right hand column content is re-positioned so that the front page is viewable in a single column.

The 'ticker' which currently shows the latest and breaking headlines at the top of the front page has been replaced with a 'banner' which will reveal from the bottom of the site. An example of what this looks like can be seen in the image below. When you come to the news site, the banner will display if there is an item of breaking news available to show you. It'll remain 'pinned' to the bottom of your browser window until you dismiss it, click on it or choose to visit another page.

The other page types on the site (e.g. stories, video/audio pages, correspondent pages etc...) also remain similar to the existing version of the site aside from the fact that they are now responsive. e.g. You can see a comparison of a typical article page below on the current and new version of the site - On the new version, the reading experience has been improved by ensuring that videos and images now occupy the full width of the column they are in and that the body text also spans the full width of the column.

What's next?

As mentioned above, we are planning to launch the responsive site to all devices next week on the 23rd of March. We have received positive feedback to the responsive design via the survey but we are aware that for many users of the News site, Monday will be the first time that many of you will have seen it.

From years of updating and relaunching our sites and apps, we know that it sometimes takes a while to get used to changes like this. I'd encourage you to spend some time navigating around the updated site and should you have any feedback, please send it in either by responding to this blog post or via the survey that we'll be linking to from next week.

I'm very much looking forward to learning what you all think of the new responsive site. Hopefully you'll find it to be an improvement over the existing version. Please note that we'll be making incremental updates every week from now so you will continue to see regular improvements being made to the site which I'll be writing about on this blog.

Niko Vijayaratnam is Senior Product Manager, BBC News

Tagged with:

More Posts


Audio Factory overview: update