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

1. Responsive
Web Design
and Mustard
24 May 2013

3. css-maintenables.fr

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

5. iPad
Wine
Crêpière

6. •Culture (gigs, museums,
theatres…)
•Pubs, cocktail bars…
•Web events and conferences
•“front-end developer” is a
real job here
London

7. Just apply…
Recruiters will harass
you anyway

8. NEWS
RWD and
mustard

9. History

10. 1. Mobile is ugly
And so are these slides!

11. I have an idea!

12. 2. Let’s build apps !
Windows Phone? Nope. Well… kinda.

13. Devs
Users

14. Nov 26 - 30 2012
505 40
277 ~240
Total: 1304 devices

15. •BBOS Browser
•Safari Mobile iOS 4.1+
•Android Browser 1.6+
•IE Mobile WP 7+
•OVI (Nokia)
Support in 2012

16. •Opera Mini
•Opera Mobile
•Firefox & Firefox OS
•UCWeb (Nº1 en Chine)
•Java Browsers
Support in 2012

17. Dev session
(~10 devices)

19. •Core content should be
accessible to everyone
•Detect features, not devices
•Performance matters (a lot)
3. Let’s build ONE
website!

20. http://www.flickr.com/photos/oscar-kinski/345522488/sizes/l/in/faves-alanstanton/
All rights reserved by Oscar Kinski
Progressive enhancement

21. Mobile first !
Sure, David.

22. How?
•Too many platforms
- OS
- Browser
- JavaScript on/off
•We need a solid
development process

23. Cutting the mustard
“Meeting expectations”

24. @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

25. 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)

26. 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
}

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

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

31. Le futur

32. •Fully responsive up to
desktop
•Continuous deployment and
Real User Monitoring (RUM)
Tomorrow

33. •Data tables
•Really responsive story
images (connection type,
display density…)
•tv, glasses, toasters…
Tomorrow (bis)

34. Hang on, all this for THAT?

35. Hang on, all this for THAT?

36. Hang on, all this for THAT?

37. Hang on, all this for THAT?

38. Hang on, all this for THAT?

39. Without a doubt: the most beautiful slide
•Experiment
•Test
•Iterate
•Test
•Rinse and repeat
Responsive Process

40. Thanks, you may
now rest your eyes
@kaelig — blog.kaelig.fr