BBC News: Responsive Web Design and Mustard

  • 6,848 views
Uploaded on

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

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

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 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.
    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 '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
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
6,848
On Slideshare
0
From Embeds
0
Number of Embeds
12

Actions

Shares
Downloads
24
Comments
2
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. ResponsiveWeb Designand Mustard24 May 2013
  • 2. css-maintenables.fr
  • 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. http://www.flickr.com/photos/oscar-kinski/345522488/sizes/l/in/faves-alanstanton/All 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. @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. 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 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. 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 — blog.kaelig.fr