Responsive mobile site for BBC Sport

Thursday 6 December 2012, 10:45

Lucie Mclean Lucie Mclean Executive Product Manager

Tagged with:

Hello I'm Lucie Mclean, executive product manager in BBC Future Media and responsible for BBC Sport services on mobile devices.

Back in June I wrote on this blog about work my team in Salford had done to redesign the mobile sport homepage ahead of the summer of sport.

I'm pleased to announce that we've now reworked the most popular sections of the mobile sport website too and have relaunched it on a new url -

Hundreds of different mobile phones and tablets visit our mobile and desktop website every day and these in turn have a wide range of screen sizes and resolutions.

The range of devices and their capabilities is constantly changing. You might also have noticed that many of the latest handsets have larger screens than other popular models and there's a growing range of smaller tablet devices too.

The homepage on a variety of devices

Rather than optimise the mobile sport site for one screen size or device type we've 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've taken into account devices up to seven inches wide (including smaller tablets such as the Nexus 7 and Kindle Fire). We recommend users on larger tablets such as iPads continue to use our desktop site.

This responsive approach is part of a wider product strategy within the BBC to provide the most appropriate experience to users whatever their device is.

On this new responsive mobile sport site all devices get the same range of stories, indexes and sport statistics but the layout changes.

If you've got a large screen we'll show you bigger images, more items in the sport-specific navigation bar and more information about the stories on the indexes. If you've got a smaller screen, we'll show fewer images and make those we do show smaller.

The key point here is that we deliver a single page to all devices which simplifies both the development and testing.

Pages are assembled on our platform using PHP.

The PHP or page assembly layer obtains all the data it needs for the final page by calling several RESTful services (for stats, stories, live event updates) before serving the final, complete page to the audience.

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 Varnish and Content Delivery Networks in order to reduce the load on our own servers.

New slide-in menu

This means that during times of heavy load (such as every Saturday afternoon!) we are able to serve millions of page requests efficiently.

We will publish more detail on the underlying technical approach in a future post and include detail on the development and testing process, which is an important part of the work we do.

The index pages for football and other selected major sports (cricket, F1, rugby league, rugby union, tennis and golf) all have this new design. Story pages and live text commentaries have been updated too - with the focus on keeping them easy to read on a mobile device.

The navigation across the mobile site has also been updated. You can now access the main sports plus the national UK sport indexes using the menu which slides in from the right when you select the All Sports button. We're also adding a football live scores page and have redesigned the football fixtures and results too.

The site also features easy access to Radio 5 Live to help you get more great live sport content from across the BBC while you're on the go.

We've got lots more great features to add over the coming months. We still have more pages to update with the new look and feel - including the rest of the sport indexes, football team pages and results pages for other sports. Live and on demand video highlights will also be introduced early next year.

For the millions of users who liked the BBC Olympics app this summer, we'll be following up with the BBC Sport app early in the new year too.

The mobile website user experience was designed by Manchester-based agency magneticNorth and then developed further over the summer using feedback from users about how they used the Olympics mobile website and the desktop sport website.

We hope you enjoy the new features and welcome your feedback on how the site looks and works on your mobile device.

Lucie Mclean is the executive product manager, Sport, BBC Future Media.

Tagged with:


Jump to comments pagination
  • rate this

    Comment number 21.

    Not sure about this new design on the iphone, just dont dee the point of the black box that appears, it just gets in the way and adds nothing.
    Prefer just the menu tap at the top as is on the BBC News mobile site.
    Why cant the sport, weather and news mobile sites be consistent.
    I'm annoyed that every time I visit the sports page that this black bar appears and it seems quite hard to get rid of it, takes a few taps or a refresh.
    Also, what annoys me, is that many links go to the main BBC desktop site and so you are are not then in the mobile site.

    Looks like you have listened and reduced those pics a bit which makes it easier to read.

    Also, you say not for use on the iPad, but the BBC sport site is so much easier to read in the mobile layout, compared to the cluttered desktop sport site, which is just a mess and so hard to read and navigate easily.

  • rate this

    Comment number 22.

    Great read Lucie. I am sure this is welcome for most readers who have had a tough time browsing in mobile when resolutions go bizzare in online shopping sites.

    Mobile content management systems are catching up like anyother platforms like blogger and wordpress for the desktop sites. There is one called InstantMobile which has analytics and leads embedded in it.

    Donno how it works though.

  • rate this

    Comment number 23.

    on the old site when the iphone was turned to landscape view the font size automatically increased - very very useful for those of us with less than perfect eyesight. doesnt happen any more and also cant increase size by "stretching". does anyone have a solution please.


Page 2 of 2

This entry is now closed for comments

Share this page

More Posts

Responsive Design on BBC Indonesia mobile site

Wednesday 5 December 2012, 17:02

What's on BBC Red Button 8 - 15 December

Saturday 8 December 2012, 06:00

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