SlideShare une entreprise Scribd logo

Responsive News : l'actualité mobile à la BBC

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  sur  40
Télécharger pour lire hors ligne
Responsive
Web Design
et Moutarde
SudWeb 2013
Responsive News : l'actualité mobile à la BBC
css-maintenables.fr
•Londres
•Responsive à la BBC :
pourquoi…
•… et comment ?
iPad
Pinard
Crêpière
•Culture (concerts, musées,
théâtre…)
•Pubs, bars à cocktails…
•Conférences web
•Profession “intégrateur”
reconnue
Londres
Postulez…
Il suffit de parler à un
recruteur sur place
NEWS
RWD et
moutarde
Historique
1. Le mobile,
c’est moche
J’ai une idée !
2. Concevons des
applications !
Windows Phone ? Non. Enfin… presque.
Devs
Utilisateurs
Nov 26 - 30 2012
505 40
277 ~240
Total : 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 Browsers
Support en 2012
Session de dev
(~10 téléphones)
Responsive News : l'actualité mobile à la BBC
•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 !
http://www.flickr.com/photos/oscar-kinski/345522488/sizes/l/in/faves-alanstanton/
All rights reserved by Oscar Kinski
Amélioration progressive
Mobile first !
Oui, David.
Comment faire ?
•Trop de combinaisons
- OS
- Browser
- JavaScript on/off
•Besoin de certitudes pour
développer rapidement
Couper la moutarde
“Répondre aux attentes”
@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
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)
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
}
Responsive News : l'actualité mobile à la BBC
Responsive News : l'actualité mobile à la BBC
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
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
Le futur
•Complètement responsive
jusqu’au desktop
(un seul domaine: www.)
•Déploiement continu et
Monitoring 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 repeat
Le process RWD
Merci, vous pouvez
reposer vos yeux
@kaelig — blog.kaelig.fr

Recommandé

Performances web - quoi de neuf ?
Performances web - quoi de neuf ?Performances web - quoi de neuf ?
Performances web - quoi de neuf ?Jean-Pierre Vincent
 
JCertif 2013 - Vers un web moderne pour l'Afrique ?
JCertif 2013 - Vers un web moderne pour l'Afrique ?JCertif 2013 - Vers un web moderne pour l'Afrique ?
JCertif 2013 - Vers un web moderne pour l'Afrique ?Rossi Oddet
 
Techniques d’accélération des pages Web
Techniques d’accélération des pages WebTechniques d’accélération des pages Web
Techniques d’accélération des pages WebMicrosoft
 
Responsive logic - Kiwiparty
Responsive logic - KiwipartyResponsive logic - Kiwiparty
Responsive logic - KiwipartyJulien Cabanès
 
Tirer parti des périphériques mobiles dans une application web : qui a dit qu...
Tirer parti des périphériques mobiles dans une application web : qui a dit qu...Tirer parti des périphériques mobiles dans une application web : qui a dit qu...
Tirer parti des périphériques mobiles dans une application web : qui a dit qu...Christophe Porteneuve
 
02052011_Mediaquitaine_prepa
02052011_Mediaquitaine_prepa02052011_Mediaquitaine_prepa
02052011_Mediaquitaine_prepaAuvinet Patrice
 

Contenu connexe

En vedette

software
softwaresoftware
softwarelesgri
 
Nuevo info sacu
Nuevo info sacuNuevo info sacu
Nuevo info sacuSacu Uhu
 
Revolucionará el ipad la educación?
Revolucionará el ipad la educación?Revolucionará el ipad la educación?
Revolucionará el ipad la educación?Katiamacias06
 
Guacho sagñay marìa de los àngeles manejo de excel
Guacho sagñay marìa de los àngeles  manejo de excelGuacho sagñay marìa de los àngeles  manejo de excel
Guacho sagñay marìa de los àngeles manejo de excelmary_gs19
 
Presentación tema 1
Presentación tema 1Presentación tema 1
Presentación tema 1SergioCrew
 
Formation SEO & PCC - Agadir Maroc
Formation SEO & PCC - Agadir MarocFormation SEO & PCC - Agadir Maroc
Formation SEO & PCC - Agadir Marocydebbagh
 
A sempre surpreendente China !
A sempre surpreendente China !A sempre surpreendente China !
A sempre surpreendente China !Umberto Pacheco
 
La suisse en_24_photos
La suisse en_24_photosLa suisse en_24_photos
La suisse en_24_photosfilipj2000
 
Attachments 2011 12_19
Attachments 2011 12_19Attachments 2011 12_19
Attachments 2011 12_19Amel Morchdi
 
KD Brochure Corporative FRANÇAIS
KD Brochure Corporative FRANÇAISKD Brochure Corporative FRANÇAIS
KD Brochure Corporative FRANÇAISoliviervaillancourt
 

En vedette (20)

software
softwaresoftware
software
 
Tema 2
Tema 2Tema 2
Tema 2
 
Nuevo info sacu
Nuevo info sacuNuevo info sacu
Nuevo info sacu
 
Presentación4
Presentación4Presentación4
Presentación4
 
040110otzar
040110otzar040110otzar
040110otzar
 
Revolucionará el ipad la educación?
Revolucionará el ipad la educación?Revolucionará el ipad la educación?
Revolucionará el ipad la educación?
 
Guacho sagñay marìa de los àngeles manejo de excel
Guacho sagñay marìa de los àngeles  manejo de excelGuacho sagñay marìa de los àngeles  manejo de excel
Guacho sagñay marìa de los àngeles manejo de excel
 
Hidrocarburos, energia y medio ambiente
Hidrocarburos, energia y medio ambienteHidrocarburos, energia y medio ambiente
Hidrocarburos, energia y medio ambiente
 
Ofimatica
OfimaticaOfimatica
Ofimatica
 
Presentación tema 1
Presentación tema 1Presentación tema 1
Presentación tema 1
 
Ofimatica
OfimaticaOfimatica
Ofimatica
 
Formation SEO & PCC - Agadir Maroc
Formation SEO & PCC - Agadir MarocFormation SEO & PCC - Agadir Maroc
Formation SEO & PCC - Agadir Maroc
 
A sempre surpreendente China !
A sempre surpreendente China !A sempre surpreendente China !
A sempre surpreendente China !
 
La suisse en_24_photos
La suisse en_24_photosLa suisse en_24_photos
La suisse en_24_photos
 
La fiaba
La fiabaLa fiaba
La fiaba
 
Attachments 2011 12_19
Attachments 2011 12_19Attachments 2011 12_19
Attachments 2011 12_19
 
KD Brochure Corporative FRANÇAIS
KD Brochure Corporative FRANÇAISKD Brochure Corporative FRANÇAIS
KD Brochure Corporative FRANÇAIS
 
Les Trous Guv
Les Trous GuvLes Trous Guv
Les Trous Guv
 
Politique Handicap
Politique HandicapPolitique Handicap
Politique Handicap
 
Les reseaux sociaux
Les reseaux sociauxLes reseaux sociaux
Les reseaux sociaux
 

Similaire à Responsive News : l'actualité mobile à la BBC

Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !VISEO
 
Responsive design - Twitter Bootstrap [FR]
Responsive design - Twitter Bootstrap [FR]Responsive design - Twitter Bootstrap [FR]
Responsive design - Twitter Bootstrap [FR]Jean-Noël Aubry
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologiewyggio
 
Responsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de productionResponsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de productionL_Demontiers
 
Aspectize meetup
Aspectize meetupAspectize meetup
Aspectize meetupAspectize
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8davrous
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5davrous
 
Node.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptNode.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptKhalid Jebbari
 
Développement mobile cross-plateform
Développement mobile cross-plateformDéveloppement mobile cross-plateform
Développement mobile cross-plateformStefan Cosquer
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?Frédéric Harper
 
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?ekino
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)Khaled Djebloun
 
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Raphaël Goetter
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsLa FeWeb
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basicsAlinoa
 
Bien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignBien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignGreg Hoin
 
Tap publisher par Frédéric Aloé
Tap publisher par Frédéric AloéTap publisher par Frédéric Aloé
Tap publisher par Frédéric AloéCocoaHeads France
 
Conférence windows phone 7
Conférence windows phone 7Conférence windows phone 7
Conférence windows phone 7Arnaud Auroux
 

Similaire à Responsive News : l'actualité mobile à la BBC (20)

Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
 
Drupal & Mobilité
Drupal & MobilitéDrupal & Mobilité
Drupal & Mobilité
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
 
Responsive design - Twitter Bootstrap [FR]
Responsive design - Twitter Bootstrap [FR]Responsive design - Twitter Bootstrap [FR]
Responsive design - Twitter Bootstrap [FR]
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
 
Responsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de productionResponsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de production
 
Aspectize meetup
Aspectize meetupAspectize meetup
Aspectize meetup
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5
 
Node.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptNode.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascript
 
Développement mobile cross-plateform
Développement mobile cross-plateformDéveloppement mobile cross-plateform
Développement mobile cross-plateform
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
 
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basics
 
Bien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignBien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web Design
 
Tap publisher par Frédéric Aloé
Tap publisher par Frédéric AloéTap publisher par Frédéric Aloé
Tap publisher par Frédéric Aloé
 
Conférence windows phone 7
Conférence windows phone 7Conférence windows phone 7
Conférence windows phone 7
 

Plus de Kaelig Deloumeau-Prigent

State of the Sass - The Mixin (November 2016)
State of the Sass - The Mixin (November 2016)State of the Sass - The Mixin (November 2016)
State of the Sass - The Mixin (November 2016)Kaelig Deloumeau-Prigent
 
State of the Sass (LDN Sass, April 15th, 2015)
State of the Sass (LDN Sass, April 15th, 2015)State of the Sass (LDN Sass, April 15th, 2015)
State of the Sass (LDN Sass, April 15th, 2015)Kaelig Deloumeau-Prigent
 
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au GuardianFaire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au GuardianKaelig Deloumeau-Prigent
 
Bridging the gap between designers and developers at the Guardian
Bridging the gap between designers and developers at the GuardianBridging the gap between designers and developers at the Guardian
Bridging the gap between designers and developers at the GuardianKaelig Deloumeau-Prigent
 
Faire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au GuardianFaire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au GuardianKaelig Deloumeau-Prigent
 
Bridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comBridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comKaelig Deloumeau-Prigent
 
BBC News: Responsive Web Design and Mustard
BBC News: Responsive Web Design and MustardBBC News: Responsive Web Design and Mustard
BBC News: Responsive Web Design and MustardKaelig Deloumeau-Prigent
 
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsMobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsKaelig Deloumeau-Prigent
 
CSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de styleCSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de styleKaelig Deloumeau-Prigent
 
Temps de chargement des sites et impact sur le référencement
Temps de chargement des sites et impact sur le référencementTemps de chargement des sites et impact sur le référencement
Temps de chargement des sites et impact sur le référencementKaelig Deloumeau-Prigent
 
Optimisation des performances d'un site web
Optimisation des performances d'un site webOptimisation des performances d'un site web
Optimisation des performances d'un site webKaelig Deloumeau-Prigent
 

Plus de Kaelig Deloumeau-Prigent (13)

State of the Sass - The Mixin (November 2016)
State of the Sass - The Mixin (November 2016)State of the Sass - The Mixin (November 2016)
State of the Sass - The Mixin (November 2016)
 
State of the Sass - The Mixin (May 2016)
State of the Sass - The Mixin (May 2016)State of the Sass - The Mixin (May 2016)
State of the Sass - The Mixin (May 2016)
 
State of the Sass - The Mixin
State of the Sass - The MixinState of the Sass - The Mixin
State of the Sass - The Mixin
 
State of the Sass (LDN Sass, April 15th, 2015)
State of the Sass (LDN Sass, April 15th, 2015)State of the Sass (LDN Sass, April 15th, 2015)
State of the Sass (LDN Sass, April 15th, 2015)
 
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au GuardianFaire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
 
Bridging the gap between designers and developers at the Guardian
Bridging the gap between designers and developers at the GuardianBridging the gap between designers and developers at the Guardian
Bridging the gap between designers and developers at the Guardian
 
Faire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au GuardianFaire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au Guardian
 
Bridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comBridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.com
 
BBC News: Responsive Web Design and Mustard
BBC News: Responsive Web Design and MustardBBC News: Responsive Web Design and Mustard
BBC News: Responsive Web Design and Mustard
 
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsMobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
 
CSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de styleCSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de style
 
Temps de chargement des sites et impact sur le référencement
Temps de chargement des sites et impact sur le référencementTemps de chargement des sites et impact sur le référencement
Temps de chargement des sites et impact sur le référencement
 
Optimisation des performances d'un site web
Optimisation des performances d'un site webOptimisation des performances d'un site web
Optimisation des performances d'un site web
 

Responsive News : l'actualité mobile à la BBC