« Previous | Main | Next »

Responsive mobile site for BBC Sport

Post categories:

Lucie Mclean Lucie Mclean | 10:45 UK time, Thursday, 6 December 2012

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 - m.bbc.co.uk/sport.

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.


  • Comment number 1.

    I know BBC Sport are currently on a "We must kill all conversation" drive on their articals what what the abolishment of the blogs, but will the "comments" be available through the mobile site (they are not on BBC News) because at the very least they are amusing some of the time.

    For what its worth I was a huge moaner about the BBC online redesign (I still detest it) but I do like the mobile sites redisign.

  • Comment number 2.

    So......any chance of a redesign of the (still) appalling website design?

    or will complaints about it cause this comments section to be prematurely locked as the others have been?

  • Comment number 3.

    I fail to see what was wrong with the original BBC mobile website or why it needed to change.
    When I want to access information on my mobile phone I'm not interested in seeing loads of photographs or videos, I want to read the story. The site of 6 months ago was excellent for finding stories in a structured manner whereas the new one is a jumble of random articles. It's got so bad my default mobile site is the Guardian one as it's far more structured and contains a lot less photos.

    I'm also assuming that the new mobile site isn't Blackberry friendly as my browser now redirects to the main BBC desktop site (not the quickest to load!) If it is it looks like another step towards iPhone dominance. I get really annoyed by the adverts for the new radio app which always says 'available on your smartphone' when it actually means 'available on your smartphone as long as it's an iPhone'!

  • Comment number 4.

    I'll still make a bee-line (colour scheme related pun?!?) for the 'desktop version' link, that is until all of the content served on the desktop version is avaliable on the mobile version.

    PS You need more whitespace on the desktop version of the Sport site, it's pretty horrid to look at.

  • Comment number 5.

    Just a reminder that there is other devices such as Android, Windows Phone and Blackberry

  • Comment number 6.

    Is the redesign really that noticeable?

    As #1 Jesus the Teddy Bear alludes to, I think a much more worthwhile use of your time would be an explanation about the changes to the interactivity and feedback on BBC Sport? Just WHAT is going on with the comments, the lack of blogs etc?

    Can you spend a moment to explain this please?

  • Comment number 7.

    "Can you spend a moment to explain this please?"

    Do not be so daft, the BBC do not explain themselves to mear mortals like you (I presume) and I. the BBC do what they want, when they want.

    As demonstrated time and time again. ie. The removale of 606, the re-design of BBC news to Whitespace land, the same with the BBC Sports site, the removal of half the F1 season and on and on.

    Every time the BBC will have got complaints and every time they just ignored them.

  • Comment number 8.

    @Jesus the Teddy Bear, CTR_Paul and MrBlueBurns

    Thank you for your comments. You're absolutely right to point out that mobile site currently doesn't contain all the same content as the desktop site.

    For this release we prioritised the pages we know users are accessing most often on mobiles - such as live text commentaries, top stories and football stats.

    However, as I mentioned in my blog post, we're not finished yet, this is just the first release of the new site. We've still got to refresh lots of pages and add a range of features. It's really useful for us to hear what matters to you - this will help us shape the order in which we prioritise their delivery.

  • Comment number 9.

    #8 Lucie Mclean

    Thank you for your feedback. But I don't think your comment addresses the global issue of interactivity of BBC Sport as a whole.

    Presumably a decision was taken to change what was there to what there is now. Can I ask what was the thinking behind this decision and how it was arrived at please?


  • Comment number 10.

    Great to see 'best practice' being used here to deliver BBC content to mobiles, good on ya!

    However, I presume it's "text only" at the moment?, given the content protection related issues currently encountered by Auntie in delivering streamed content to any non-Apple mobile device!

    Would love to hear from BBC on what DRM deals would need to be in place on Android/Blackberry/Windows 7/8 before we can see video/audio streams delivered using a similar 'cross platform' method (i.e. there's no TECHNICAL reason why iPhones can stream beeb directly, but other phones have to use Flash/AIR, but the LEGAL avenues are perhaps the bigger challenge to overcome until geniune cross-platform BBC interactivity is feasible!)

  • Comment number 11.

    @luciemclean- what matters to me is:

    A simple, non-changing structured layout like we had 6 months or so ago. The sports home page stories currently go: cricket, sportsday live, football, football, cricket, football, snooker, bbc website, sports personality, horse racing.
    Where is the logic in this layout and why did the original layout need changing to this?

    Remove the garish yellow background. What does this add to the website other than making it look like a tacky SkySports style page?

    I'd personally like less photographs and other high data information. For people in poor reception areas it takes ages to load pages with all this info. It looks like the new page has been designed under the assumption everybody is connecting via wi-fi. For example, if I want to read the story about Chelsea what value does a large photo of Avram Grant add to the page?

  • Comment number 12.

    Rather than redesigning the mobile site; could you not have finished off the redesign of the main sports site first?

    It looks extremely unprofessional when flicking across to the Cricket Scorecard to see it displayed in the style of the site from about 5/6 years ago despite being a live part of the site.

  • Comment number 13.


    As I understand it, Yellow is for BBC Sport, Red is for BBC News, Blue is for BBC Weather and Pink for BBC iPlayer.

  • Comment number 14.

    @ luciemclean

    I can only speak for myself, but I truly do apreciate the fact you have replied here, too often the BBC seem to take a 'ignore them and they will go away' view to blogs. It is nice and refrshing to see someone actually take the time out and reply.

    As to the BBC sports mobile site, I do like it and once it has comments (same for BBC news) I will no doubt ditch the cookie that is pushing my phone to the Desktop site.

    To interactivity, the BBc sports site was more interactive a decade ago (give or take a little) with Blogs, 606 and other things. Most sites move forward the BBC online seems intent on destroying everything that made it special in a very crowded online world.

  • Comment number 15.


    We prioritised the text and stat pages for this release but we'll be adding live and on demand video in the new year. For iOS we'll use the same technical solution we used to deliver live and on demand video of the London 2012 Olympics. The solution we will use to deliver video on Android was outlined by my colleague Chris Yanda in a blog post earlier this year : https://www.bbc.co.uk/blogs/bbcinternet/2012/09/media_player_android_phones_ta.html
    I hope this helps.

  • Comment number 16.

    Nicely designed but a few questions

    1) Will the app follow this design, like the Olympics app followed the browser design?
    2) Video was available on the previous Sport mobile homepage, and has now gone, why the retrograde step?
    3) The news live text pages auto refresh, yet this new sport live text does not, which seems a bit odd, why's this?

    Thanks :)

  • Comment number 17.

    I was sorely disappointed when my browser loaded last night to see that not only had BBC ignored all the comments about the garish colours, poor and non-intuitive layout and unnecessary busyness of the new desktop site, they had replicated all these terrible elements into the mobile site. Not only that but someone thought that including a large number of images would actually be useful on a 3.5 inch screen. Really? Previously I could view all the key headlines in a single screen, now I have to scroll through 3 pages of eye- searing yellow, pointless pictures and randomly situated text to see what went on in the past 24 hours. Stakeholder engagement, user feedback, not for the BBC. Very poor quality job all round.

  • Comment number 18.

    I think you've all done a really good job, I can't imagine the work that's gone into this. The main problem for me is, as you mentioned, Saturday afternoon when I'm loading a full page just to look at scores...this will be a big help.
    But! Why the separate domain? I don't see why the desktop site wasn't made responsive?

  • Comment number 19.

    @ luciemclean Ah, I see from your answers that this is now going to be yet anothet BBC area to avoid because of the second class service given to those who haven't swallowed the Apple happy pill.

  • Comment number 20.

    Utilising the space differently depending on the screen size is a good, if perhaps obvious idea.

    Why then does this not happen on the main non-mobile BBC site? I have a large high res screen and the BBC site sits in a narrow strip in the centre. Really poor design.

  • 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.

  • 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.

  • 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.


More from this blog...

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.