Successfully reported this slideshow.
Your SlideShare is downloading. ×

BBC News: Responsive Web Design and Mustard

Ad

Responsive
Web Design
and Mustard
24 May 2013

Ad

css-maintenables.fr

Ad

•Being a developer in
London
•Responsive at BBC: why?
•And How?

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 40 Ad
1 of 40 Ad

BBC News: Responsive Web Design and Mustard

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Similar to BBC News: Responsive Web Design and Mustard (19)

Advertisement
Advertisement

BBC News: Responsive Web Design and Mustard

  1. 1. Responsive Web Design and Mustard 24 May 2013
  2. 2. css-maintenables.fr
  3. 3. •Being a developer in London •Responsive at BBC: why? •And How?
  4. 4. iPad Wine Crêpière
  5. 5. •Culture (gigs, museums, theatres…) •Pubs, cocktail bars… •Web events and conferences •“front-end developer” is a real job here London
  6. 6. Just apply… Recruiters will harass you anyway
  7. 7. NEWS RWD and mustard
  8. 8. History
  9. 9. 1. Mobile is ugly And so are these slides!
  10. 10. I have an idea!
  11. 11. 2. Let’s build apps ! Windows Phone? Nope. Well… kinda.
  12. 12. Devs Users
  13. 13. Nov 26 - 30 2012 505 40 277 ~240 Total: 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 Browsers Support in 2012
  16. 16. Dev session (~10 devices)
  17. 17. •Core content should be accessible to everyone •Detect features, not devices •Performance matters (a lot) 3. Let’s build ONE website!
  18. 18. http://www.flickr.com/photos/oscar-kinski/345522488/sizes/l/in/faves-alanstanton/ All rights reserved by Oscar Kinski Progressive enhancement
  19. 19. Mobile first ! Sure, David.
  20. 20. How? •Too many platforms - OS - Browser - JavaScript on/off •We need a solid development process
  21. 21. Cutting the mustard “Meeting expectations”
  22. 22. @tmaslen http://responsiveconf.com.s3.amazonaws.com/audio/3-tom-maslen-responsiveconf.mp3 https://speakerdeck.com/tmaslen/cutting-the-mustard-future-friendly-browser-support http://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 Mustard http://blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard/ // Loading core experience if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { // Loading enhanced experience }
  25. 25. Core experience For browsers not cutting the mustard or having JS off “Most read” tab: link Absolute dates Low res/quality images 1 image: 1st story “Sections” button: links to the a menu in the footer Home: 10 HTTP req., 40 KB
  26. 26. Enhanced experience For browsers cutting the mustard “Most read” tab: lazy loaded Relative dates Responsive images HiDPI Support (Retina) Enhanced “Sections” menu Additional CSS and images
  27. 27. Le futur
  28. 28. •Fully responsive up to desktop •Continuous deployment and Real User Monitoring (RUM) Tomorrow
  29. 29. •Data tables •Really responsive story images (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 repeat Responsive Process
  36. 36. Thanks, you may now rest your eyes @kaelig — blog.kaelig.fr

×