SlideShare ist ein Scribd-Unternehmen logo
1 von 52
Downloaden Sie, um offline zu lesen
Pourquoi passer au web mobile
     avec le design réactif
        (Responsive Web Design)
Raison n° 1


Le marché mobile est énorme
32 millions
Mobinautes en décembre 2011
17 000 téraoctets
Volume de données consommées par des mobiles
  entre octobre et décembre 2011 (hors WiFi)
+ 78,7% en 1 an
Augmentation des données consommées par des mobiles
1 251 milliards $
Total des achats en ligne du “Cyber Monday” 2011
6,6%
Achats effectués depuis un mobile ce jour-là,
    Soit plusieurs milliards de dollars...
12% seulement...
Entreprises françaises ayant un site mobile
Raison n° 2


L’existant est médiocre
FREE 3G   3:15 PM
          Loading




 Loading...


                    3
FREE 3G   3:15 PM




                    3
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactif
FREE 3G   3:15 PM
          Loading




                    3
FREE 3G   3:15 PM




                    3
Raison n° 3


Une application ou un site dédié
     ne sont pas adaptés
User-Agent



Caractéristiques
Pourquoi passer au web mobile avec le design réactif
FREE 3G   3:15 PM




                    3
Pourquoi passer au web mobile avec le design réactif
Raison n° 4


La technologie est mature
Media Queries
<meta name=”viewport” content=”width=device-width” />

                           ET

<link rel="stylesheet" href="mobile.css"
media="only screen and (max-width: 480px)" />

                           OU

@media screen and (max-width: 480px) {
  .bloc {
    display: block;
    clear: both;
  }
}
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactif
“The absence of a media
query is in fact, the first
media query.”
       Bryan Rieger, Rethinking the Mobile Web
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactif
Raison n° 5


Ces optimisations sont aussi
valables sur desktop et pour
        l’accessibilité
Pourquoi passer au web mobile avec le design réactif
FREE 3G   3:15 PM




                    3
Code mort

/*
// Disabled, because it does nothing :-)
function doSomething (params) {
     // return param;
}
*/
http://www.flickr.com/photos/girliemac/6508022985/
float: none;
Réduire les dimensions




        http://www.flickr.com/photos/maggieduvall/3875906399/
display: none;



        http://www.nickbrandt.com/portfolio.cfm?i=176198
Tester
(et pas seulement sur émulateur)
Raison n° 6


Les outils sont là (et gratuits)
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactif
Outils
Validateur MobileOK validator.w3.org/mobile/

WebPageTest webpagetest.org
Responsive design tester mattkersley.com/responsive/
Autre testeur de design réactif responsinator.com
Polyfill pour Media Queries github.com/scottjehl/Respond
Thème Wordpress réactif gratuit smashingmagazine.com/
2011/06/07/free-html5-css3-wordpress-3-1-theme-with-responsive-
layout-yoko/
Bootstrap twitter.github.com/bootstrap/
Mobile Boilerplate html5boilerplate.com/mobile
Sources
Rapport trimestriel Arcep arcep.fr/?id=36

Luke Wroblewski lukew.com/ff/entry.asp?1478
Livre blanc Performics slideshare.net/PerformicsFrance/
mobil-i-zation-search-des-opportunits-saisir-google-performics-
livre-blanc
Niveau de support des Media Queries caniuse.com/
#feat=css-mediaqueries
Questions ?
Merci !

@goulvench
goulven.champenois@userland.fr


Cette présentation est (déjà) en ligne :
http://files.userland.fr/www2012/

Weitere ähnliche Inhalte

Ähnlich wie Pourquoi passer au web mobile avec le design réactif

CIRB/CIBG Ontwikkeling
CIRB/CIBG OntwikkelingCIRB/CIBG Ontwikkeling
CIRB/CIBG OntwikkelingCIRB_CIBG
 
Le Cloud Computing avec Google Apps
Le Cloud Computing avec Google AppsLe Cloud Computing avec Google Apps
Le Cloud Computing avec Google AppsAisne Numérique
 
[Webinar Niji] Frameworks XPlateform mobile - 2210
[Webinar Niji] Frameworks XPlateform mobile - 2210 [Webinar Niji] Frameworks XPlateform mobile - 2210
[Webinar Niji] Frameworks XPlateform mobile - 2210 Niji
 
Framework XPlatform Mobile
Framework XPlatform MobileFramework XPlatform Mobile
Framework XPlatform MobileGabriel DUPONT
 
Parlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usageParlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usageLaFrenchMobile
 
Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...
Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...
Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...Peak Ace
 
Objets Connectés (IoT) et Data Science
Objets Connectés (IoT) et Data ScienceObjets Connectés (IoT) et Data Science
Objets Connectés (IoT) et Data ScienceSoft Computing
 
Ergonomie web et mobile en bibliothèque
Ergonomie web et mobile en bibliothèqueErgonomie web et mobile en bibliothèque
Ergonomie web et mobile en bibliothèqueJulien Sicot
 
IBM Bluemix Paris Meetup #14 - Le Village by CA - 20160413 - Introduction Meetup
IBM Bluemix Paris Meetup #14 - Le Village by CA - 20160413 - Introduction MeetupIBM Bluemix Paris Meetup #14 - Le Village by CA - 20160413 - Introduction Meetup
IBM Bluemix Paris Meetup #14 - Le Village by CA - 20160413 - Introduction MeetupIBM France Lab
 
Big Data by Soft Computing
Big Data by Soft ComputingBig Data by Soft Computing
Big Data by Soft ComputingSoft Computing
 
Privacy et Marketing digital, enjeux et plans d'actions - Mickaël Avoledo - S...
Privacy et Marketing digital, enjeux et plans d'actions - Mickaël Avoledo - S...Privacy et Marketing digital, enjeux et plans d'actions - Mickaël Avoledo - S...
Privacy et Marketing digital, enjeux et plans d'actions - Mickaël Avoledo - S...SEO CAMP
 
Le Web est la plateforme - #Frenchtech
Le Web est la plateforme - #FrenchtechLe Web est la plateforme - #Frenchtech
Le Web est la plateforme - #FrenchtechTristan Nitot
 
L'index de Google devient "Mobile First" : comment vous y préparer ? - Petit ...
L'index de Google devient "Mobile First" : comment vous y préparer ? - Petit ...L'index de Google devient "Mobile First" : comment vous y préparer ? - Petit ...
L'index de Google devient "Mobile First" : comment vous y préparer ? - Petit ...Peak Ace
 
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...FredericJutant
 

Ähnlich wie Pourquoi passer au web mobile avec le design réactif (20)

CIRB/CIBG Ontwikkeling
CIRB/CIBG OntwikkelingCIRB/CIBG Ontwikkeling
CIRB/CIBG Ontwikkeling
 
Le Cloud Computing avec Google Apps
Le Cloud Computing avec Google AppsLe Cloud Computing avec Google Apps
Le Cloud Computing avec Google Apps
 
[Webinar Niji] Frameworks XPlateform mobile - 2210
[Webinar Niji] Frameworks XPlateform mobile - 2210 [Webinar Niji] Frameworks XPlateform mobile - 2210
[Webinar Niji] Frameworks XPlateform mobile - 2210
 
Framework XPlatform Mobile
Framework XPlatform MobileFramework XPlatform Mobile
Framework XPlatform Mobile
 
Barcamp Degetel
Barcamp DegetelBarcamp Degetel
Barcamp Degetel
 
Parlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usageParlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usage
 
Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...
Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...
Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...
 
Objets Connectés (IoT) et Data Science
Objets Connectés (IoT) et Data ScienceObjets Connectés (IoT) et Data Science
Objets Connectés (IoT) et Data Science
 
Ergonomie web et mobile en bibliothèque
Ergonomie web et mobile en bibliothèqueErgonomie web et mobile en bibliothèque
Ergonomie web et mobile en bibliothèque
 
IBM Bluemix Paris Meetup #14 - Le Village by CA - 20160413 - Introduction Meetup
IBM Bluemix Paris Meetup #14 - Le Village by CA - 20160413 - Introduction MeetupIBM Bluemix Paris Meetup #14 - Le Village by CA - 20160413 - Introduction Meetup
IBM Bluemix Paris Meetup #14 - Le Village by CA - 20160413 - Introduction Meetup
 
Big Data by Soft Computing
Big Data by Soft ComputingBig Data by Soft Computing
Big Data by Soft Computing
 
M commerce
M commerceM commerce
M commerce
 
Exakis Day
Exakis DayExakis Day
Exakis Day
 
Privacy et Marketing digital, enjeux et plans d'actions - Mickaël Avoledo - S...
Privacy et Marketing digital, enjeux et plans d'actions - Mickaël Avoledo - S...Privacy et Marketing digital, enjeux et plans d'actions - Mickaël Avoledo - S...
Privacy et Marketing digital, enjeux et plans d'actions - Mickaël Avoledo - S...
 
Formation Titanium
Formation TitaniumFormation Titanium
Formation Titanium
 
Le Web est la plateforme - #Frenchtech
Le Web est la plateforme - #FrenchtechLe Web est la plateforme - #Frenchtech
Le Web est la plateforme - #Frenchtech
 
L'index de Google devient "Mobile First" : comment vous y préparer ? - Petit ...
L'index de Google devient "Mobile First" : comment vous y préparer ? - Petit ...L'index de Google devient "Mobile First" : comment vous y préparer ? - Petit ...
L'index de Google devient "Mobile First" : comment vous y préparer ? - Petit ...
 
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
 
Prez web mobile_01
Prez web mobile_01Prez web mobile_01
Prez web mobile_01
 
Introduction au web3.pdf
Introduction au web3.pdfIntroduction au web3.pdf
Introduction au web3.pdf
 

Mehr von Goulven Champenois

TECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field checkTECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field checkGoulven Champenois
 
Objectif zéro déchet (hévéa)
Objectif   zéro déchet (hévéa)Objectif   zéro déchet (hévéa)
Objectif zéro déchet (hévéa)Goulven Champenois
 
Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?Goulven Champenois
 
Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !Goulven Champenois
 
Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016Goulven Champenois
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueGoulven Champenois
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueGoulven Champenois
 
Intitulés de poste, bas les masques
Intitulés de poste, bas les masquesIntitulés de poste, bas les masques
Intitulés de poste, bas les masquesGoulven Champenois
 
Mobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à TroieMobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à TroieGoulven Champenois
 
Responsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processusResponsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processusGoulven Champenois
 
Poids des pages, attention danger
Poids des pages, attention dangerPoids des pages, attention danger
Poids des pages, attention dangerGoulven Champenois
 
1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)Goulven Champenois
 
Développer pour le web mobile : outils et techniques
Développer pour le web mobile : outils et techniquesDévelopper pour le web mobile : outils et techniques
Développer pour le web mobile : outils et techniquesGoulven Champenois
 

Mehr von Goulven Champenois (18)

TECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field checkTECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field check
 
Objectif zéro déchet (hévéa)
Objectif   zéro déchet (hévéa)Objectif   zéro déchet (hévéa)
Objectif zéro déchet (hévéa)
 
Objectif : zéro déchet
Objectif : zéro déchetObjectif : zéro déchet
Objectif : zéro déchet
 
Attention Déchets
Attention DéchetsAttention Déchets
Attention Déchets
 
Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?
 
UX et santé
UX et santéUX et santé
UX et santé
 
Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !
 
Pour un Web inclusif
Pour un Web inclusifPour un Web inclusif
Pour un Web inclusif
 
Guérir le burnout (E1 2016)
Guérir le burnout (E1 2016)Guérir le burnout (E1 2016)
Guérir le burnout (E1 2016)
 
Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratique
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratique
 
Intitulés de poste, bas les masques
Intitulés de poste, bas les masquesIntitulés de poste, bas les masques
Intitulés de poste, bas les masques
 
Mobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à TroieMobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à Troie
 
Responsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processusResponsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processus
 
Poids des pages, attention danger
Poids des pages, attention dangerPoids des pages, attention danger
Poids des pages, attention danger
 
1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)
 
Développer pour le web mobile : outils et techniques
Développer pour le web mobile : outils et techniquesDévelopper pour le web mobile : outils et techniques
Développer pour le web mobile : outils et techniques
 

Pourquoi passer au web mobile avec le design réactif