BBC News website: responsive design in beta

Tuesday 4 March 2014, 10:41

Niko Vijayaratnam Niko Vijayaratnam Senior Product Manager

Tagged with:

Hello, I'm Niko Vijayaratnam and I'm a Senior Product Manager in BBC News looking after the News site.

Today I'd like to tell you about some changes on both the existing and responsive versions of the News website that you may notice over the next week or two related to the rollout of our responsive website.

news  responsive beta 2.jpg Beta - responsive site in desktop view news responsive beta two.jpg Existing site in desktop view


What's changing?

Over the next couple of weeks we'll be showing a selection of our audience a more prominent option to view the responsive 'beta' site on tablet and desktops - In the UK, around 5-10% of the audience will see the following banner presented at the top of the existing site when viewed on a tablet or desktop. Internationally, this percentage will be lower.

yellow beta composite.jpg The responsive site will display a banner inviting feedback on the product

If you choose to view the beta (by clicking 'take me there'), you'll be taken to the responsive site which will display a banner inviting feedback on the product.

Note: If you aren't in the sample who will be shown the banner on the existing site, you can still click on the 'mobile link' at the bottom of the page to view the beta on your tablet or desktop

Why are we building a responsive website and what is it?

Every week, the BBC News website (including our World Service news sites) gets around 115 million visits and the number coming from mobiles and tablets is increasing all the time to the point that these devices now account for 43% of unique browsers to - this means we truly need to think 'mobile-first' at the BBC when building our online products.


news responsive one.jpg Responsive website on various devices. Used under Creative Commons from David Blooman

When you take into account the variables listed below which come into play when our audiences visit BBC News online, building a premium experience (like our existing website) that's the same across all these different variants becomes impossible, unless you build web pages that are too large to load in a reasonable time on a large proportion of devices (which is definitely not what we want to do!):

different browsers;

five different internet connection types (broadband, GPRS, Edge, 3G and 4G);

different screen sizes and pixel resolutions;

touch gestures;

mouse and keyboard interactions;


Like most digital sectors, we are using responsive design to keep up so that we can offer the best experience possible to our audiences, no matter what combination of device, browser, connection etc... they are using. You can see how the responsive site works at different screen sizes on desktop by adjusting the size of your browser window to see how the content automatically flows and re-adjusts to the screen size i.e. it is one site that works across all screens.

Two of our development leads, John Cleveley and Tom Maslen have written at length about the details of our responsive development approach which is an excellent resource for anyone wanting to understand how we've built the responsive site.

What is a beta?

We often release new services or redesigned versions of existing ones which are sometimes badged as ‘beta’ services i.e. you can see the word 'BETA' appended to the News logo.

By using the term 'Beta', we mean that the service is not completely finished but it still does everything it’s designed to do e.g. it follows the same rules for cookies and privacy as existing services.

As mentioned above, the beta version of our responsive site is running along side our existing site on tablet and desktop. If you view our site on a mobile browser, you'll have seen that our responsive website is already available on mobiles by default. On tablet and desktop however it is still in 'beta' - on these devices today you won't see our responsive site when you visit unless you click on the "mobile site" link at the bottom of the page - otherwise you'll receive our existing site by default.

Why are we promoting the beta version of the responsive website?

Because only a very small percentage of our tablet and desktop audience have seen the beta until now it is very difficult for us to get feedback on it without prominently offering a way to access it - therefore, we are introducing the banner shown above on our existing site to entice some of our audience to try out the responsive beta and tell us what they think.

Testing new products in the open like this is the best way to get real feedback from real users, which helps us improve the service. That’s what we call ‘iterative design’.

What is different about the beta?

The beta on tablet and desktop is designed to be simpler than our existing site and of course it is optimised for different screen sizes - Using the beta we hope you'll be able to find the content you're looking for faster and more easily.

If you have never viewed the responsive website on your tablet or desktop device, please spend a little time exploring it and send us some feedback. We'd love to hear what you think so that we have the opportunity to make any changes before rolling it out further - this will only happen once we are satisfied that the beta site meets the high standard we have set ourselves.

So please do give feedback on the beta and I'd also be interested in your comments.

Niko Vijayaratham is Senior Product Manager, BBC News

Tagged with:


Jump to comments pagination
  • rate this

    Comment number 1.

    I use a desktop to access the news page, I have it set as my homepage. I used to have the BBC homepage as my homepage, until they made it 'responsive' for mobiles / tablets. Sadly it made navigation difficult with a mouse and keyboard, the large white area and reduced information due to larger bolder fonts was annoying. The stark white and sliding picture caused visual difficulties also. I dislike the 'new' BBC homepage so much that I only visit it in error or infrequently.
    Please DO NOT spoil the easy to read nature of BBC news page on the PC desktop. Remember the detail, quality and volume of news stories is far more important that 'how it looks' on a ipad. For the record I am iPad & iPhone user as well, and I find the current 'old style' very easy to use and visually pleasing on the iPad. (Which is more than can be said for the BBC News app. for iPad)
    I'll reserve final judgement when I see your 'responsive' design on various devices for myself. I will be extremely happy to supply the feedback and I hope it will be good rather than critical.

  • rate this

    Comment number 2.

    I am not a fan of the responsive site on a desktop/laptop. The giant body type and the lack of a clear hierarchy among the stories make it feel like a dumbed-down version of the website. As a big fan of your regular desktop site (as well as a big fan of the "responsive" version on my mobile), I would ask that you please refine the design at desktop resolutions (please...smaller fonts; I don't need to be able to read the body text from across the room).

  • rate this

    Comment number 3.

    Seems to me that content starts to disappear or change whenever there's a 'responsive design' revamp.

    For example, taking the illustrations given above, for the Harriet Harman item, the existing site's subentries for 'Harriet Harman - it's a shame' and 'Harman condemns smear campaign' are both lost, and are replaced in the new beta page merely with '25 minutes ago'. I value the presence of the subentries, and the adjacentcy of those subentries, for quick and ergonomically-sound avenues to further reading, and wouldn't want to see them lost. Secondly, I can't see much significant value in the '25 minutes ago' tag on the news front page - the tag is rather meaningless by itself, and time-annotation (date and time) is included on the linked page for those wishing to know. (And in anycase you have 'live' and 'breaking news' graphical devices for denoting fast-moving situations.) If you feel that '25 minutes ago' is vital or newsworthy, should you not be adding it to the existing page format?

    Responsive design should be confined to adjustments necessary for screen size and the differences between touch and keyboard/mouse interactions - it does not mean change to architectural content in my opinion. I think you should give a more detailed and illustrated list of the changes you are proposing.


  • rate this

    Comment number 4.

    A huge backwards step for desktop users - it just looks like a mobile website on a big screen.

    Basic, lacking links, lacking stories, this is no improvement at all.

    Where's the breaking news banner? Where's the link to the BBC News Channel? Where are all the other video links (you've reduced it from 30 video links to 3!!)? Where's all the background on the Ukraine story? Where are comments? Where are the most shared stories? The Papers? In pictures?

    Desktop users want more than a very basic mobile website, which is what this is. PLEASE don't force this on us until it is as good/better than the current version. This is clearly massively inferior.

  • rate this

    Comment number 5.

    Looks like another redesign which will result in reduced service for anyone who uses a desktop / laptop because that's what they actually want to use. It may surprise those at the BBC but an awful lot of us consider mobile devices to be something to use only when away from our desktops, not the epitome of usability!

    Please take on board all the negative feedback you got over the radio iPlayer mess and learn from it before even considering any other changes.


Comments 5 of 55


This entry is now closed for comments

Share this page

More Posts

BBC Programme pages: content driven responsive redesign

Thursday 27 February 2014, 11:47

Testing mobiles: Mobile Compatibility Program

Wednesday 5 March 2014, 08:35

About this Blog

Staff from the BBC's online and technology teams talk about BBC Online, BBC iPlayer, BBC Red Button and the BBC's digital and mobile services. The blog is reactively moderated. Your host is Nick Reynolds.

Blog Updates

Stay updated with the latest posts from the blog.

Subscribe using:

What are feeds?

Links about BBC Online

BBC Internet blog Archive

owl-plain-112.jpg 2012 ι 2011 ι 2010 ι 2009 ι 2008 ι 2007

Tags for archived posts