Présentation donnée à SudWeb 2013 (http://www.sudweb.fr/2013), le 17 mai, sur le Responsive Web Design à BBC News (http://m.bbc.co.uk/news). La technique "Cutting the Mustard" est documentée en détail sur le blog de l'équipe Responsive News: http://responsivenews.co.uk/post/18948466399/cutting-the-mustard

1. Responsive
Web Design
et Moutarde
SudWeb 2013

3. css-maintenables.fr

4. •Londres
•Responsive à la BBC :
pourquoi…
•… et comment ?

5. iPad
Pinard
Crêpière

6. •Culture (concerts, musées,
théâtre…)
•Pubs, bars à cocktails…
•Conférences web
•Profession “intégrateur”
reconnue
Londres

7. Postulez…
Il suffit de parler à un
recruteur sur place

8. NEWS
RWD et
moutarde

9. Historique

10. 1. Le mobile,
c’est moche

11. J’ai une idée !

12. 2. Concevons des
applications !
Windows Phone ? Non. Enfin… presque.

13. Devs
Utilisateurs

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 en 2012

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

17. Session de dev
(~10 téléphones)

19. •Le cœur du contenu doit être
accessible à tout le monde
•Cibler les capacités plutôt
que les modèles
•Les performances sont
importantes
3. Concevons UN
site web !

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

21. Mobile first !
Oui, David.

22. Comment faire ?
•Trop de combinaisons
- OS
- Browser
- JavaScript on/off
•Besoin de certitudes pour
développer rapidement

23. Couper la moutarde
“Répondre aux attentes”

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. Couper la moutarde
•2 expériences :
- de base
- améliorée
•Évite le device-detection…
la plupart du temps
(cas spéciaux : @font-face et HTML5 video)

26. Couper la moutarde
http://blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard/
// chargement de l’expérience de base
if ('querySelector' in document
&& 'localStorage' in window
&& 'addEventListener' in window) {
// chargement des améliorations
}

29. Expérience de base
ou sans JavaScript
“Most read” tab : lien
Dates absolues
Images très basse def
1 image : 1ère brève
Bouton “Sections” : pointe
vers le menu dans le footer
Index: 10 req. HTTP, 40 KB

30. Expérience améliorée
pour navigateurs modernes
“Most read” tab : lazy load
Timestamps relatifs
Images de qualité
Support HiDPI (Retina)
Menu “Sections” amélioré
CSS & images additionnelles

31. Le futur

32. •Complètement responsive
jusqu’au desktop
(un seul domaine: www.)
•Déploiement continu et
Monitoring en direct (RUM)
Demain

33. •tableaux de données
•images adaptatives (débit,
densité de l’affichage)
•tv, lunettes, grilles pain…
Demain (bis)

34. Attends, tout ça pour ÇA ???

35. Attends, tout ça pour ÇA ???

36. Attends, tout ça pour ÇA ???

37. Attends, tout ça pour ÇA ???

38. Attends, tout ça pour ÇA ???

39. La plus belle slide pour la fin !
•Expérimentation
•Test
•Itération
•Test
•Rince and repeat
Le process RWD

40. Merci, vous pouvez
reposer vos yeux
@kaelig — blog.kaelig.fr