responsive news : l'actualité mobile à la bbc
DESCRIPTION
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-mustardTRANSCRIPT
![Page 1: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/1.jpg)
ResponsiveWeb Designet Moutarde
SudWeb 2013
![Page 2: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/2.jpg)
![Page 3: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/3.jpg)
css-maintenables.fr
![Page 4: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/4.jpg)
•Londres
•Responsive à la BBC : pourquoi…
•… et comment ?
![Page 5: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/5.jpg)
iPad
Pinard
Crêpière
![Page 6: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/6.jpg)
•Culture (concerts, musées, théâtre…)
•Pubs, bars à cocktails…
•Conférences web
•Profession “intégrateur” reconnue
Londres
![Page 7: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/7.jpg)
Postulez…Il suffit de parler à un recruteur sur place
![Page 8: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/8.jpg)
NEWSRWD et
moutarde
![Page 9: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/9.jpg)
Historique
![Page 10: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/10.jpg)
1. Le mobile, c’est moche
![Page 11: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/11.jpg)
J’ai une idée !
![Page 12: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/12.jpg)
2. Concevons des applications !
Windows Phone ? Non. Enfin… presque.
![Page 13: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/13.jpg)
Devs
Utilisateurs
![Page 14: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/14.jpg)
Nov 26 - 30 2012
505 40
277 ~240
Total : 1304 devices
![Page 15: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/15.jpg)
•BBOS Browser•Safari Mobile iOS 4.1+•Android Browser 1.6+•IE Mobile WP 7+•OVI (Nokia)
Support en 2012
![Page 16: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/16.jpg)
•Opera Mini•Opera Mobile•Firefox & Firefox OS•UCWeb (Nº1 en Chine)•Java Browsers
Support en 2012
![Page 17: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/17.jpg)
Session de dev(~10 téléphones)
![Page 18: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/18.jpg)
![Page 19: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/19.jpg)
•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 !
![Page 20: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/20.jpg)
htt
p:/
/ww
w.fl
ickr
.com
/photo
s/osc
ar-
kinsk
i/345522488/s
izes/
l/in
/fave
s-ala
nst
anto
n/
All rights reserved by Oscar Kinski
Amélioration progressive
![Page 21: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/21.jpg)
Mobile first !
Oui, David.
![Page 22: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/22.jpg)
Comment faire ?•Trop de combinaisons- OS- Browser- JavaScript on/off
•Besoin de certitudes pour développer rapidement
![Page 23: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/23.jpg)
Couper la moutarde
“Répondre aux attentes”
![Page 24: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/24.jpg)
@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
![Page 25: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/25.jpg)
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)
![Page 26: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/26.jpg)
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
}
![Page 27: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/27.jpg)
![Page 28: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/28.jpg)
![Page 29: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/29.jpg)
Expérience de baseou sans JavaScript
“Most read” tab : lienDates absoluesImages très basse def
1 image : 1ère brèveBouton “Sections” : pointe vers le menu dans le footer
Index: 10 req. HTTP, 40 KB
![Page 30: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/30.jpg)
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
![Page 31: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/31.jpg)
Le futur
![Page 32: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/32.jpg)
•Complètement responsive jusqu’au desktop(un seul domaine: www.)
•Déploiement continu et Monitoring en direct (RUM)
Demain
![Page 33: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/33.jpg)
•tableaux de données
•images adaptatives (débit, densité de l’affichage)
•tv, lunettes, grilles pain…
Demain (bis)
![Page 34: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/34.jpg)
Attends, tout ça pour ÇA ???
![Page 35: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/35.jpg)
Attends, tout ça pour ÇA ???
![Page 36: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/36.jpg)
Attends, tout ça pour ÇA ???
![Page 37: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/37.jpg)
Attends, tout ça pour ÇA ???
![Page 38: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/38.jpg)
Attends, tout ça pour ÇA ???
![Page 39: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/39.jpg)
La plus belle slide pour la fin !
•Expérimentation•Test•Itération•Test•Rince and repeat
Le process RWD
![Page 40: Responsive News : l'actualité mobile à la BBC](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547ea1c8b4af9faf158b5670/html5/thumbnails/40.jpg)
Merci, vous pouvezreposer vos yeux
@kaelig — blog.kaelig.fr