BBC Sport website refresh: a new look and consistent design

Friday 1 March 2013, 10:15

Neil Hall Neil Hall Executive Product Manager

Tagged with:

Hello my name is Neil Hall and I am the executive product manager responsible for the development of the BBC Sport website.

This January was the biggest month ever for BBC Sport outside of the Olympics with 42 million browsers and over one billion page views of the website.

responsive-1024.jpg Old look and new look responsive BBC Sport site


We’ve also just reached one million UK downloads for the BBC Sport smartphone app for iOS and Android.

With such strong audiences it is therefore fitting that for the first time in over eight years we are able to offer a consistent design and user experience across all of the BBC Sport website’s pages.

From taekwondo to tennis, Salford Reds to Manchester United and Six Nations fixtures to horse racing results every page has a consistent look and navigation 12 months on from our relaunch of the site in February 2012.

As soon as the dust settled after the Olympics our team in Salford turned their attentions to delivering the final elements of this consistent user experience, leveraging the technology we delivered for London 2012 to ensure a lasting legacy for UK sports fans.

We efficiently reused or repurposed components built for the relaunch of the Sport website, the Olympics website and from our colleagues in BBC News.

This allowed us to deliver these pages across our desktop site and where possible for the new responsive mobile site and app too, in line with our strategy of building once and delivering across as many screens as possible.

Without the benefit of this technology previous refreshes of the BBC Sport site had foundered, with the design of smaller sports pages and team pages in particular being held back by technology, resource and time constraints.

The older site was built using a static publishing model that meant we had to create a ‘template’ for every view of our content we wanted to present to the audience, making it much more costly to repurpose and deliver to different sections of the site and across mobile too as the pages were created bespoke for each sport.

template-1024.jpg A consistent design across pages


Pre-Games last year only the high-traffic areas of the site were in the new-look and after the Olympics there were still over 350 pages of the site still to be updated.

These pages fell into four key areas for development: team pages, smaller sports homepages, blogs and statistics.

Working in the same way as our football site, we have used linked data to power new team pages across cricket, rugby union and rugby league with a single shared template across all sports.

Journalists tag BBC Sport’s content objects such as a story or a video with the team name or competition they are relevant to.

The linked data stores these semantic tags and a generic metadata model about each piece of content, providing an API to allow the retrieval of relevant content about each team or competition that is then dynamically aggregated in a PHP-based Page Assembly Layer (PAL), the Sport PAL app.

We used the same application to aggregate content around ‘smaller sports’ like taekwondo, fencing and ice hockey, again making use of linked data.

As both areas of the site were in our Sport PAL app we were able to share page components with the rest of the site.

f1-fencing-1024.jpg FA Cup and fencing


For example in the screenshots above you can see how the headlines area of the fencing page is exactly the same as our FA Cup page.

The component is the same, all that has changed is the content being provided to it by linked data.

In addition to this, leveraging the work already done by our BBC News colleagues, we were able to reuse their blog application to replace Sport’s ageing blog platform.

The blog application is another PAL app, this time it is powered by a separate feed of our journalists' most recent content from our syndication platform.

With minimal design changes we were able to use this to neatly bring together all the latest work of our top writers, for example Phil McNulty and David Bond, in the same way that it does for Business editor Robert Peston.

blog-new-1024.jpg Old and new look blog pages


The final piece in the jigsaw was our statistics pages. It is in this area we had the most ground to cover, 175 pages, and it is here that we delivered the most innovation demonstrating how we will be working in the future.

We built a responsive ‘Generic Stats’ application that for the first time simultaneously delivers content across multiple sports to both the responsive mobile site and desktop site.

The PHP or page assembly layer obtains all the statistics content it needs from the Sports Data API.

The Sport PAL app then converts the raw data into a generic tabular dates model which is passed to the view template for the page.

The page is then served to the audience. This enables all the sports statistics pages to effectively use one template whether the sport is cricket, golf or anything else.

Since we assemble a single page for each request it also means that we become extremely cacheable and can benefit from efficient serving of pages using HTTP caching with Varnish and Content Delivery Networks (CDNs) in order to reduce the load on our own servers, crucial for high-traffic periods around busy sporting moments.

Rather than optimise for one particular view of the content we have built it responsively so that it adapts and displays the content in a way which makes the most of the device's screen size.

We used the same code as the new BBC Sport mobile site to do this, enhancing it to respond not only the size of mobile device someone may be viewing the content on, but also to offer a ‘desktop’ view of content for our audience on computers.

This means the new pages not only finish the desktop ‘Sport Refresh’ project for us, they also deliver new-look scores pages for the new mobile browser site and iOS and Android apps in the coming weeks.

mopbile-new-1024.jpg New look mobile site


It is this approach that best represents our strategy for how we want to develop BBC Sport’s services in the future.

We hope you enjoy using the BBC Sport website and are always keen to hear your thoughts on its development, please get in touch to let us know your view on these recent changes.

Neil Hall is executive product manager for the BBC Sport website.

Tagged with:

Comments

Jump to comments pagination
 
  • rate this
    +1

    Comment number 1.

    Neil, although uniformity is easy to work with and generally a good thing, it is regretable that not enough has been done with the comments your group received from the end users. Still numerous people use tools like greasemonkey to remove the in-photo text and excessive yellow colouring and improve league tables.

    My question to you: now all websites are on the new dunamic system and no longer on the statis system, does this mean that the additional "0" (zero) will be removed from the urls?

  • rate this
    -1

    Comment number 2.

    nice work neil and co, all looks great. i look forward to seeing the responsive stuff go live.

    the end of a long journey!

    nick

  • rate this
    0

    Comment number 3.

    Just had a look and the PC website looks the same as it has done for over a year.
    What has changed?
    I still really find the PC website a muddle, too cluttered and quite a lot of content very hard to find on occasions.
    The content down the middle is just a mess and not easy to take in or view at a glance and makes the page look cluttered and poor to the eye.
    That yellow colour is still horrid and a real turn off, wish it could be toned down or the colour changed.
    There is still a lot of the content that shows up in the very old design, cricket and rugby that I have noticed.

    I do like the bbc sport ios apps, but there are some problems with them which are still there but that has been discussed in the blogs for those, The main one being the refresh on the match live updates doesn't work and often content opens up in older design or other apps, which for a phone or tablet is a pain.

    Might be worth you getting some consistency, the BBC News web and app sites are so much cleaner and uncluttered in design and work very well.

  • rate this
    +1

    Comment number 4.

    Interestingly I see your newer sport section pages have managed to do away with the need to include '/0' in the URL (ie. /sport/gymnastics rather than /sport/0/gymnastics). Are there any plans to tidy up the older section pages to scrap the '0' bit and make the URLs nicer looking?

  • rate this
    0

    Comment number 5.

    Thank you all for your comments on my post. I have responded below.

    @lettice – Those rugby and cricket pages you mention as being in the “very old design” have been refreshed to the new look. Try these examples:
    http://www.bbc.co.uk/sport/rugby-union/results
    http://www.bbc.co.uk/sport/cricket/teams/lancashire

    Also, you'll be pleased to hear our team are working on updating the pages you describe within the mobile apps and browser site too.

    @Keith: The /0/ in our URLs is present in the pages on our site that are still statically published. We are working on transitioning these areas of the site to the dynamic platform so that eventually the /0/ will be eliminated from our URLs.

    @JamesRogers: The colour yellow is a key part of the BBC Sport brand and we have no plans to change it at present.

    @nickhaley: Glad you like the site.

 

Comments 5 of 7

 

This entry is now closed for comments

Share this page

More Posts

Previous
Quality Control for file-based delivery at the BBC

Wednesday 27 February 2013, 15:29

Next
Links: BBC Sport app on Android and Encrypted Media Extension

Friday 1 March 2013, 14:59

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