Pourquoi passer au web mobile     avec le design réactif        (Responsive Web Design)
Raison n° 1Le 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
Raison n° 2L’existant est médiocre
FREE 3G   3:15 PM          Loading Loading...                    3
FREE 3G   3:15 PM                    3
FREE 3G   3:15 PM          Loading                    3
FREE 3G   3:15 PM                    3
Raison n° 3Une application ou un site dédié     ne sont pas adaptés
User-AgentCaractéristiques
FREE 3G   3:15 PM                    3
Raison n° 4La technologie est mature
Media Queries<meta name=”viewport” content=”width=device-width” />                           ET<link rel="stylesheet" href...
“The absence of a mediaquery is in fact, the firstmedia query.”       Bryan Rieger, Rethinking the Mobile Web
Raison n° 5Ces optimisations sont aussivalables sur desktop et pour        l’accessibilité
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° 6Les outils sont là (et gratuits)
OutilsValidateur MobileOK validator.w3.org/mobile/WebPageTest webpagetest.orgResponsive design tester mattkersley.com/resp...
SourcesRapport trimestriel Arcep arcep.fr/?id=36Luke Wroblewski lukew.com/ff/entry.asp?1478Livre blanc Performics slidesha...
Questions ?
Merci !@goulvenchgoulven.champenois@userland.frCette présentation est (déjà) en ligne :http://files.userland.fr/www2012/
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
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
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
Upcoming SlideShare
Loading in …5
×

Pourquoi passer au web mobile avec le design réactif

1,607
-1

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
1,607
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
22
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Pourquoi passer au web mobile avec le design réactif

  1. 1. Pourquoi passer au web mobile avec le design réactif (Responsive Web Design)
  2. 2. Raison n° 1Le marché mobile est énorme
  3. 3. 32 millionsMobinautes en décembre 2011
  4. 4. 17 000 téraoctetsVolume de données consommées par des mobiles entre octobre et décembre 2011 (hors WiFi)
  5. 5. + 78,7% en 1 anAugmentation des données consommées par des mobiles
  6. 6. 1 251 milliards $Total des achats en ligne du “Cyber Monday” 2011
  7. 7. 6,6%Achats effectués depuis un mobile ce jour-là, Soit plusieurs milliards de dollars...
  8. 8. 12% seulement...Entreprises françaises ayant un site mobile
  9. 9. Raison n° 2L’existant est médiocre
  10. 10. FREE 3G 3:15 PM Loading Loading... 3
  11. 11. FREE 3G 3:15 PM 3
  12. 12. FREE 3G 3:15 PM Loading 3
  13. 13. FREE 3G 3:15 PM 3
  14. 14. Raison n° 3Une application ou un site dédié ne sont pas adaptés
  15. 15. User-AgentCaractéristiques
  16. 16. FREE 3G 3:15 PM 3
  17. 17. Raison n° 4La technologie est mature
  18. 18. 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; }}
  19. 19. “The absence of a mediaquery is in fact, the firstmedia query.” Bryan Rieger, Rethinking the Mobile Web
  20. 20. Raison n° 5Ces optimisations sont aussivalables sur desktop et pour l’accessibilité
  21. 21. FREE 3G 3:15 PM 3
  22. 22. Code mort/*// Disabled, because it does nothing :-)function doSomething (params) { // return param;}*/
  23. 23. http://www.flickr.com/photos/girliemac/6508022985/
  24. 24. float: none;
  25. 25. Réduire les dimensions http://www.flickr.com/photos/maggieduvall/3875906399/
  26. 26. display: none; http://www.nickbrandt.com/portfolio.cfm?i=176198
  27. 27. Tester(et pas seulement sur émulateur)
  28. 28. Raison n° 6Les outils sont là (et gratuits)
  29. 29. OutilsValidateur MobileOK validator.w3.org/mobile/WebPageTest webpagetest.orgResponsive design tester mattkersley.com/responsive/Autre testeur de design réactif responsinator.comPolyfill pour Media Queries github.com/scottjehl/RespondThè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
  30. 30. SourcesRapport trimestriel Arcep arcep.fr/?id=36Luke Wroblewski lukew.com/ff/entry.asp?1478Livre blanc Performics slideshare.net/PerformicsFrance/mobil-i-zation-search-des-opportunits-saisir-google-performics-livre-blancNiveau de support des Media Queries caniuse.com/#feat=css-mediaqueries
  31. 31. Questions ?
  32. 32. Merci !@goulvenchgoulven.champenois@userland.frCette présentation est (déjà) en ligne :http://files.userland.fr/www2012/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×