Embed Size (px)
Citation preview
Pourquoi passer au web mobileavec le design réactif
(Responsive Web Design)
Raison n° 1
Le marché mobile est énorme
32 millionsMobinautes en décembre 2011
17 000 téraoctetsVolume de données consommées par des mobiles
entre octobre et décembre 2011 (hors WiFi)
+ 78,7% en 1 anAugmentation 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
L’existant est médiocre
Raison n° 2
Loading...
3:15 PMFREE 3G
3
Loading
3:15 PMFREE 3G
3
3:15 PMFREE 3G
3
Loading
3:15 PMFREE 3G
3
Une application ou un site dédié ne sont pas adaptés
Raison n° 3
User-Agent
Caractéristiques
3:15 PMFREE 3G
3
La technologie est mature
Raison n° 4
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; }}
“The absence of a media query is in fact, the first media query.”
Bryan Rieger, Rethinking the Mobile Web
Ces optimisations sont aussi valables sur desktop et pour
l’accessibilité
Raison n° 5
3:15 PMFREE 3G
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)
Les outils sont là (et gratuits)
Raison n° 6
OutilsValidateur 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
SourcesRapport 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
Cette présentation est (déjà) en ligne :
http://files.userland.fr/www2012/
