Pourquoi passer au web mobile avec le design réactif

Le web mobile est une opportunité à saisir... Quelques écueils à éviter, techniques à utiliser, et ressources utiles. Beaucoup d'informations ne sont pas dans les diapos, vous trouverez comment me contacter sur la dernière diapo.
Conférence donnée lors du www2012 à Lyon.

Transcript

1. Pourquoi passer au web mobile avec le design réactif (Responsive Web Design)
2. Raison n° 1 Le marché mobile est énorme
3. 32 millions Mobinautes en décembre 2011
4. 17 000 téraoctets Volume de données consommées par des mobiles entre octobre et décembre 2011 (hors WiFi)
5. + 78,7% en 1 an Augmentation des données consommées par des mobiles
6. 1 251 milliards $ Total des achats en ligne du “Cyber Monday” 2011
7. 6,6% Achats effectués depuis un mobile ce jour-là, Soit plusieurs milliards de dollars...
8. 12% seulement... Entreprises françaises ayant un site mobile
9. L’existant est médiocre Raison n° 2
10. Loading... 3:15 PM FREE 3G 3 Loading
11. 3:15 PM FREE 3G 3
14. 3:15 PM FREE 3G 3 Loading
15. 3:15 PM FREE 3G 3
16. Une application ou un site dédié ne sont pas adaptés Raison n° 3
17. User-Agent Caractéristiques
19. 3:15 PM FREE 3G 3
21. La technologie est mature Raison n° 4
22. 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; } }
28. “The absence of a media query is in fact, the first media query.” Bryan Rieger, Rethinking the Mobile Web
31. Ces optimisations sont aussi valables sur desktop et pour l’accessibilité Raison n° 5
33. 3:15 PM FREE 3G 3
34. Code mort /* // Disabled, because it does nothing :-) function doSomething (params) { // return param; } */
35. http://www.flickr.com/photos/girliemac/6508022985/
36. float: none;
37. Réduire les dimensions http://www.flickr.com/photos/maggieduvall/3875906399/
38. display: none; http://www.nickbrandt.com/portfolio.cfm?i=176198
39. Tester (et pas seulement sur émulateur)
40. Les outils sont là (et gratuits) Raison n° 6
49. 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
50. 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
51. Questions ?
52. Merci ! @goulvench goulven.champenois@userland.fr Cette présentation est (déjà) en ligne : http://files.userland.fr/www2012/