BBC Sport website refresh: a new look and consistent design
Executive Product Manager
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.
Old look and new look responsive BBC Sport site
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.
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.
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.
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.
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.
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.
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.
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.
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.