BBC News: Responsive Web Design and Mustard

Uploaded on

The core principles behind Responsive Web Design at BBC News ( …

The core principles behind Responsive Web Design at BBC News (

Talk given at SudWeb 2013 ( in French ( on May 17th, followed by the London Greewich University (in English) on May 24th.

The "Cutting the Mustard" technique is well documented on the Responsive News blog:

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • @JulienVocat Hi Julien, thanks for your questions!

    Slide 14 depicts the number of different devices (by OS) that visited the m. website during the specified period. Meaning: more than 1300 different types of terminals visited between November 26th and November 30th.

    BBC News still has 2 separate websites for mobile and desktop, hence the m. subdomain redirection for mobiles.

    At BBC News, ads are only served outside the UK (inside the UK the website is ad-free because it's paid for by the license fee). And two different types of ads are served: mobile/desktop. They are not responsive yet.

    Ads will be responsive in the future, because advertisers *have* to adapt their formats to multiple screens. The question is: how and when?

    I hope this answers your questions.
    Are you sure you want to
    Your message goes here
  • Hi Kaelig,
    Thanks for sharing! What's the stats on slide 14 about ? Is it the downloads of the app between nov. 26-30th ?

    My second question is about the mobile redirection. Is there any reason why you redirected the mobile traffic on '' ? Tracking ?

    And finally, my last question is, as we are on a media website, about the advertising. How do you manage the ads when using a 'responsive' concept ? Do you think, in the future, the ads server will provide responsive content as well ?

    I look forward reading your feedback !

    D'avance merci !!

    Julien Vocat
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. ResponsiveWeb Designand Mustard24 May 2013
  • 2.
  • 3. •Being a developer inLondon•Responsive at BBC: why?•And How?
  • 4. iPadWineCrêpière
  • 5. •Culture (gigs, museums,theatres…)•Pubs, cocktail bars…•Web events and conferences•“front-end developer” is areal job hereLondon
  • 6. Just apply…Recruiters will harassyou anyway
  • 7. NEWSRWD andmustard
  • 8. History
  • 9. 1. Mobile is uglyAnd so are these slides!
  • 10. I have an idea!
  • 11. 2. Let’s build apps !Windows Phone? Nope. Well… kinda.
  • 12. DevsUsers
  • 13. Nov 26 - 30 2012505 40277 ~240Total: 1304 devices
  • 14. •BBOS Browser•Safari Mobile iOS 4.1+•Android Browser 1.6+•IE Mobile WP 7+•OVI (Nokia)Support in 2012
  • 15. •Opera Mini•Opera Mobile•Firefox & Firefox OS•UCWeb (Nº1 en Chine)•Java BrowsersSupport in 2012
  • 16. Dev session(~10 devices)
  • 17. •Core content should beaccessible to everyone•Detect features, not devices•Performance matters (a lot)3. Let’s build ONEwebsite!
  • 18. rights reserved by Oscar KinskiProgressive enhancement
  • 19. Mobile first !Sure, David.
  • 20. How?•Too many platforms- OS- Browser- JavaScript on/off•We need a soliddevelopment process
  • 21. Cutting the mustard“Meeting expectations”
  • 22. @tmaslen ©Bevan Stephens
  • 23. Cutting the Mustard•2 experiences:- core (basic)- enhanced (via a JS app)•Prevents device detection…in most cases(edge cases: @font-face et HTML5 video)
  • 24. Cutting the Mustard Loading core experienceif (querySelector in document&& localStorage in window&& addEventListener in window) {// Loading enhanced experience}
  • 25. Core experienceFor browsers not cutting the mustard or having JS off“Most read” tab: linkAbsolute datesLow res/quality images1 image: 1st story“Sections” button: links tothe a menu in the footerHome: 10 HTTP req., 40 KB
  • 26. Enhanced experienceFor browsers cutting the mustard“Most read” tab: lazy loadedRelative datesResponsive imagesHiDPI Support (Retina)Enhanced “Sections” menuAdditional CSS and images
  • 27. Le futur
  • 28. •Fully responsive up todesktop•Continuous deployment andReal User Monitoring (RUM)Tomorrow
  • 29. •Data tables•Really responsive storyimages (connection type,display density…)•tv, glasses, toasters…Tomorrow (bis)
  • 30. Hang on, all this for THAT?
  • 31. Hang on, all this for THAT?
  • 32. Hang on, all this for THAT?
  • 33. Hang on, all this for THAT?
  • 34. Hang on, all this for THAT?
  • 35. Without a doubt: the most beautiful slide•Experiment•Test•Iterate•Test•Rinse and repeatResponsive Process
  • 36. Thanks, you maynow rest your eyes@kaelig —