ResponsiveWeb Designet MoutardeSudWeb 2013
css-maintenables.fr
•Londres•Responsive à la BBC :pourquoi…•… et comment ?
iPadPinardCrêpière
•Culture (concerts, musées,théâtre…)•Pubs, bars à cocktails…•Conférences web•Profession “intégrateur”reconnueLondres
Postulez…Il suffit de parler à unrecruteur sur place
NEWSRWD etmoutarde
Historique
1. Le mobile,c’est moche
J’ai une idée !
2. Concevons desapplications !Windows Phone ? Non. Enfin… presque.
DevsUtilisateurs
Nov 26 - 30 2012505 40277 ~240Total : 1304 devices
•BBOS Browser•Safari Mobile iOS 4.1+•Android Browser 1.6+•IE Mobile WP 7+•OVI (Nokia)Support en 2012
•Opera Mini•Opera Mobile•Firefox & Firefox OS•UCWeb (Nº1 en Chine)•Java BrowsersSupport en 2012
Session de dev(~10 téléphones)
•Le cœur du contenu doit êtreaccessible à tout le monde•Cibler les capacités plutôtque les modèles•Les performances sontim...
http://www.flickr.com/photos/oscar-kinski/345522488/sizes/l/in/faves-alanstanton/All rights reserved by Oscar KinskiAmélior...
Mobile first !Oui, David.
Comment faire ?•Trop de combinaisons- OS- Browser- JavaScript on/off•Besoin de certitudes pourdévelopper rapidement
Couper la moutarde“Répondre aux attentes”
@tmaslenhttp://responsiveconf.com.s3.amazonaws.com/audio/3-tom-maslen-responsiveconf.mp3https://speakerdeck.com/tmaslen/cu...
Couper la moutarde•2 expériences :- de base- améliorée•Évite le device-detection…la plupart du temps(cas spéciaux : @font-...
Couper la moutardehttp://blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard/// chargement de l’expérience de b...
Expérience de baseou sans JavaScript“Most read” tab : lienDates absoluesImages très basse def1 image : 1ère brèveBouton “S...
Expérience amélioréepour navigateurs modernes“Most read” tab : lazy loadTimestamps relatifsImages de qualitéSupport HiDPI ...
Le futur
•Complètement responsivejusqu’au desktop(un seul domaine: www.)•Déploiement continu etMonitoring en direct (RUM)Demain
•tableaux de données•images adaptatives (débit,densité de l’affichage)•tv, lunettes, grilles pain…Demain (bis)
Attends, tout ça pour ÇA ???
Attends, tout ça pour ÇA ???
Attends, tout ça pour ÇA ???
Attends, tout ça pour ÇA ???
Attends, tout ça pour ÇA ???
La plus belle slide pour la fin !•Expérimentation•Test•Itération•Test•Rince and repeatLe process RWD
Merci, vous pouvezreposer vos yeux@kaelig — blog.kaelig.fr
Responsive News : l'actualité mobile à la BBC
Responsive News : l'actualité mobile à la BBC
Responsive News : l'actualité mobile à la BBC
Responsive News : l'actualité mobile à la BBC
Prochain SlideShare
Chargement dans…5
×

Responsive News : l'actualité mobile à la BBC

3 048 vues

Publié le

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

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 048
Sur SlideShare
0
Issues des intégrations
0
Intégrations
299
Actions
Partages
0
Téléchargements
12
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Responsive News : l'actualité mobile à la BBC

  1. 1. ResponsiveWeb Designet MoutardeSudWeb 2013
  2. 2. css-maintenables.fr
  3. 3. •Londres•Responsive à la BBC :pourquoi…•… et comment ?
  4. 4. iPadPinardCrêpière
  5. 5. •Culture (concerts, musées,théâtre…)•Pubs, bars à cocktails…•Conférences web•Profession “intégrateur”reconnueLondres
  6. 6. Postulez…Il suffit de parler à unrecruteur sur place
  7. 7. NEWSRWD etmoutarde
  8. 8. Historique
  9. 9. 1. Le mobile,c’est moche
  10. 10. J’ai une idée !
  11. 11. 2. Concevons desapplications !Windows Phone ? Non. Enfin… presque.
  12. 12. DevsUtilisateurs
  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 en 2012
  15. 15. •Opera Mini•Opera Mobile•Firefox & Firefox OS•UCWeb (Nº1 en Chine)•Java BrowsersSupport en 2012
  16. 16. Session de dev(~10 téléphones)
  17. 17. •Le cœur du contenu doit êtreaccessible à tout le monde•Cibler les capacités plutôtque les modèles•Les performances sontimportantes3. Concevons UNsite web !
  18. 18. http://www.flickr.com/photos/oscar-kinski/345522488/sizes/l/in/faves-alanstanton/All rights reserved by Oscar KinskiAmélioration progressive
  19. 19. Mobile first !Oui, David.
  20. 20. Comment faire ?•Trop de combinaisons- OS- Browser- JavaScript on/off•Besoin de certitudes pourdévelopper rapidement
  21. 21. Couper la moutarde“Répondre aux attentes”
  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. 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)
  24. 24. Couper la moutardehttp://blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard/// chargement de l’expérience de baseif (querySelector in document&& localStorage in window&& addEventListener in window) {// chargement des améliorations}
  25. 25. Expérience de baseou sans JavaScript“Most read” tab : lienDates absoluesImages très basse def1 image : 1ère brèveBouton “Sections” : pointevers le menu dans le footerIndex: 10 req. HTTP, 40 KB
  26. 26. Expérience amélioréepour navigateurs modernes“Most read” tab : lazy loadTimestamps relatifsImages de qualitéSupport HiDPI (Retina)Menu “Sections” amélioréCSS & images additionnelles
  27. 27. Le futur
  28. 28. •Complètement responsivejusqu’au desktop(un seul domaine: www.)•Déploiement continu etMonitoring en direct (RUM)Demain
  29. 29. •tableaux de données•images adaptatives (débit,densité de l’affichage)•tv, lunettes, grilles pain…Demain (bis)
  30. 30. Attends, tout ça pour ÇA ???
  31. 31. Attends, tout ça pour ÇA ???
  32. 32. Attends, tout ça pour ÇA ???
  33. 33. Attends, tout ça pour ÇA ???
  34. 34. Attends, tout ça pour ÇA ???
  35. 35. La plus belle slide pour la fin !•Expérimentation•Test•Itération•Test•Rince and repeatLe process RWD
  36. 36. Merci, vous pouvezreposer vos yeux@kaelig — blog.kaelig.fr

×