BBC News: Responsive Web Design and Mustard

8,455 views

Published on

The core principles behind Responsive Web Design at BBC News (http://m.bbc.co.uk/news).

Talk given at SudWeb 2013 (http://www.sudweb.fr/2013) in French (http://www.slideshare.net/kaelig/sudweb-2013) 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: http://responsivenews.co.uk/post/18948466399/cutting-the-mustard

Published in: Technology, Design
2 Comments
4 Likes
Statistics
Notes
  • @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 m.bbc.co.uk/news 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.
       Reply 
    Are you sure you want to  Yes  No
    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 'm.bbc.co.uk' ? 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
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
8,455
On SlideShare
0
From Embeds
0
Number of Embeds
3,321
Actions
Shares
0
Downloads
30
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

BBC News: Responsive Web Design and Mustard

  1. 1. ResponsiveWeb Designand Mustard24 May 2013
  2. 2. css-maintenables.fr
  3. 3. •Being a developer inLondon•Responsive at BBC: why?•And How?
  4. 4. iPadWineCrêpière
  5. 5. •Culture (gigs, museums,theatres…)•Pubs, cocktail bars…•Web events and conferences•“front-end developer” is areal job hereLondon
  6. 6. Just apply…Recruiters will harassyou anyway
  7. 7. NEWSRWD andmustard
  8. 8. History
  9. 9. 1. Mobile is uglyAnd so are these slides!
  10. 10. I have an idea!
  11. 11. 2. Let’s build apps !Windows Phone? Nope. Well… kinda.
  12. 12. DevsUsers
  13. 13. Nov 26 - 30 2012505 40277 ~240Total: 1304 devices
  14. 14. •BBOS Browser•Safari Mobile iOS 4.1+•Android Browser 1.6+•IE Mobile WP 7+•OVI (Nokia)Support in 2012
  15. 15. •Opera Mini•Opera Mobile•Firefox & Firefox OS•UCWeb (Nº1 en Chine)•Java BrowsersSupport in 2012
  16. 16. Dev session(~10 devices)
  17. 17. •Core content should beaccessible to everyone•Detect features, not devices•Performance matters (a lot)3. Let’s build ONEwebsite!
  18. 18. http://www.flickr.com/photos/oscar-kinski/345522488/sizes/l/in/faves-alanstanton/All rights reserved by Oscar KinskiProgressive enhancement
  19. 19. Mobile first !Sure, David.
  20. 20. How?•Too many platforms- OS- Browser- JavaScript on/off•We need a soliddevelopment process
  21. 21. Cutting the mustard“Meeting expectations”
  22. 22. @tmaslenhttp://responsiveconf.com.s3.amazonaws.com/audio/3-tom-maslen-responsiveconf.mp3https://speakerdeck.com/tmaslen/cutting-the-mustard-future-friendly-browser-supporthttp://www.flickr.com/photos/57785771@N08/8521491468/ ©Bevan Stephens
  23. 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. 24. Cutting the Mustardhttp://blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard/// Loading core experienceif (querySelector in document&& localStorage in window&& addEventListener in window) {// Loading enhanced experience}
  25. 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. 26. Enhanced experienceFor browsers cutting the mustard“Most read” tab: lazy loadedRelative datesResponsive imagesHiDPI Support (Retina)Enhanced “Sections” menuAdditional CSS and images
  27. 27. Le futur
  28. 28. •Fully responsive up todesktop•Continuous deployment andReal User Monitoring (RUM)Tomorrow
  29. 29. •Data tables•Really responsive storyimages (connection type,display density…)•tv, glasses, toasters…Tomorrow (bis)
  30. 30. Hang on, all this for THAT?
  31. 31. Hang on, all this for THAT?
  32. 32. Hang on, all this for THAT?
  33. 33. Hang on, all this for THAT?
  34. 34. Hang on, all this for THAT?
  35. 35. Without a doubt: the most beautiful slide•Experiment•Test•Iterate•Test•Rinse and repeatResponsive Process
  36. 36. Thanks, you maynow rest your eyes@kaelig — blog.kaelig.fr

×