Optimiser votre site Web sur mobile

5,015 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,015
On SlideShare
0
From Embeds
0
Number of Embeds
2,420
Actions
Shares
0
Downloads
2
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Optimiser votre site Web sur mobile

  1. 1. OPTIMISER VOTRE SITE WEB MOBILEmardi 20 septembre 11
  2. 2. Romain MATON @rmat0n #Craftsmanship #Scrum #XP #Java #Scala #NoSQL #GWT rmat0n #Node #HTML5 #Javascript #Android #Productivité Web Tambouillemardi 20 septembre 11
  3. 3. mardi 20 septembre 11
  4. 4. Optimiser votre application mobilemardi 20 septembre 11
  5. 5. mardi 20 septembre 11
  6. 6. mardi 20 septembre 11
  7. 7. mardi 20 septembre 11
  8. 8. Dan Appelquist Évangéliste internet chez Vodafonemardi 20 septembre 11
  9. 9. Web Mobile != Web Ordinateur Penser expérience utilisateur ! Écran large paysage + Souris + Clavier Écran petit portrait + Clavier physique ou virtuel + Molette ou pas + ... « Web Mobile » / « Web PC »mardi 20 septembre 11
  10. 10. W E B M O B I L E ! = V E R S I O N M I N I AT U R E W E B P Cmardi 20 septembre 11
  11. 11. mardi 20 septembre 11
  12. 12. mardi 20 septembre 11
  13. 13. mardi 20 septembre 11
  14. 14. mardi 20 septembre 11
  15. 15. Web Kit : The King ! iPhone, iPod, Android, Palm Pre, Nokia, Blackberry... Opera Mobile, IE Mobile, Firefox Mobile Opera Mini, Bolt, Skyfire NetFront, Obigo, Polaris, PSP, Teashark...mardi 20 septembre 11
  16. 16. mardi 20 septembre 11
  17. 17. PAS QUE DES INCONVÉNIENTS !!! Déplacement Multitouch Géolocalisation Appareil photo Accéléromètre ...mardi 20 septembre 11
  18. 18. mardi 20 septembre 11
  19. 19. WEB VS. NATIF ? Pas le but de cette session :p Sujet à #troll Avantages applications natives... ... mais avantages applications web ! Facebook, GMail, Twitter, Maps... les 2 ?mardi 20 septembre 11
  20. 20. mardi 20 septembre 11
  21. 21. mardi 20 septembre 11
  22. 22. mardi 20 septembre 11
  23. 23. mardi 20 septembre 11
  24. 24. mardi 20 septembre 11
  25. 25. IL ÉTAIT UNE FOIS... Wireless Access Protocol WAP Forum Déployer début 2000 Meilleur contrôle du « Web »mardi 20 septembre 11
  26. 26. ET EN 2000... WAP Forum OMA (Open Mobile Alliance) WAP HTML MP (HTML Mobile Profile) WML HTML, CSS, Javascript... Web Mobilemardi 20 septembre 11
  27. 27. NORMES MOBILES OMA / W3C XHTML Mobile Profile / XHTML Basic Wireless CSS / CSS Mobile Profile Ecmascript Mobile Profile / .mardi 20 septembre 11
  28. 28. Généralitésmardi 20 septembre 11
  29. 29. W3C BONNES PRATIQUES Mobile Web Best Practices 1.0 http://www.w3.org/TR/mobile-bp/ XHTML 1.1, taille du site à 20 Ko, peu de scrollbars pas d’auto-refresh, pas de pop-ups, fonts pas de javascript, pas de frames, CSS 1, JPEG et GIF ... Un must read de bonnes pratiques !mardi 20 septembre 11
  30. 30. URL MOBILE http://m.monsite.fr ? http://monsite.mobi ? http://monsite.mobile.fr ? http://monsite.fr/mobile ? ou tout simplement http://monsite.fr ?mardi 20 septembre 11
  31. 31. URL MOBILE Comment vous rendez-vous sur un site mobile ? Moteur de recherche Clic depuis un site, mail, app, réseau social... Adresse principale doit s’adapter Référencement site Web mobile difficile ! <link rel=“canonical“ href=“http://monsite.fr“ />mardi 20 septembre 11
  32. 32. COMMENT S’ADAPTER ? Des frameworks le font mais... User-Agent, X-WAP-Profile et WURFL Vérifier l’existence d’une API Javascript Attention à la dégradation irréversible côté serveur !mardi 20 septembre 11
  33. 33. http://learnto.mobi/mardi 20 septembre 11
  34. 34. 3 OPTIMISATIONS Standards Utilisabilité Rapiditémardi 20 septembre 11
  35. 35. Église Sainte-Marie-de-la-mer, Barcelone Standardsmardi 20 septembre 11
  36. 36. DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http:// www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2// EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "DTD/ xhtml1-strict.dtd"> <!DOCTYPE html>mardi 20 septembre 11
  37. 37. XHTML / HTML5 Fermer vos “attributs“ Fermer vos <br/>, <hr/>, <img />, <input />... Ne fermez pas vos <script></script>, <div></div>... Utilisez <input type=“email|date|tel|pattern“ /> Utilisez des <label for=“id“>goto</label>mardi 20 septembre 11
  38. 38. mardi 20 septembre 11
  39. 39. mardi 20 septembre 11
  40. 40. VIEWPORT Taille de la fenêtre (largeur) Zoom initial <meta name=“viewport“ content=“...“ /> Idéal : width=device-width,initial-scale=1.0mardi 20 septembre 11
  41. 41. IMAGES Attention à la taille de vos images Réduisez le plus possible ! Une image HD sur ordinateur et LD sur mobile Spécifiez la taille dans le HTML PNGCrush...mardi 20 septembre 11
  42. 42. JAVASCRIPT Mode strict : “use strict“; Point-virgule obligatoire Présence d’accolades sur bloc if, for, switch... Pas de in dans un for (array et prototype hérité) eval() et with() interdit if(a=b) détecté ++ et -- interdit ...mardi 20 septembre 11
  43. 43. mardi 20 septembre 11
  44. 44. mardi 20 septembre 11
  45. 45. mardi 20 septembre 11
  46. 46. Utilisabilitémardi 20 septembre 11
  47. 47. DÉFINITION le degré selon lequel un produit peut être utilisé, par des utilisateurs identifiés, pour atteindre des buts définis avec efficacité, efficience et satisfaction, dans un contexte d’utilisation spécifiémardi 20 septembre 11
  48. 48. mardi 20 septembre 11
  49. 49. mardi 20 septembre 11
  50. 50. mardi 20 septembre 11
  51. 51. POUR TESTER... Émulateurs : A Guide to Mobile Emulators http://mobiforge.com/testing/story/a-guide- mobile-emulators Vidéos faites avec l’émulateur Android Screenfly... Rien ne vaut le déploiement !mardi 20 septembre 11
  52. 52. mardi 20 septembre 11
  53. 53. mardi 20 septembre 11
  54. 54. FRAMEWORKS Optimisés mobiles : écran, clavier... Thèmes Ergonomiques Gestion de la navigation Mais attention : ils sont lourds !mardi 20 septembre 11
  55. 55. mardi 20 septembre 11
  56. 56. mardi 20 septembre 11
  57. 57. mardi 20 septembre 11
  58. 58. mardi 20 septembre 11
  59. 59. mardi 20 septembre 11
  60. 60. mardi 20 septembre 11
  61. 61. mardi 20 septembre 11
  62. 62. FRAMEWORKS Plus loin que le Web Multi plateformes : smartphones, tablettes... API propriétaire Accès hardware Caméra, GPS, RFID...mardi 20 septembre 11
  63. 63. mardi 20 septembre 11
  64. 64. mardi 20 septembre 11
  65. 65. mardi 20 septembre 11
  66. 66. Rapiditémardi 20 septembre 11
  67. 67. mardi 20 septembre 11
  68. 68. DONNÉES Que recherchent vos utilisateurs ? Exemple : Youtube N’essayez de mettre de faire rentrer toutes vos fonctionnalités sur le site mobile ! Une page complète = 20ko (W3C)mardi 20 septembre 11
  69. 69. RÉSEAU Bande passante 1 Mbit/s 380 kbit/s 180 kbit/s 50 kbit/s 10 kbit/s GSM GPRS EDGE 3G 3G+mardi 20 septembre 11
  70. 70. RÉSEAU Bande passante pour 100 ko ? 1 mn 20 s 16 s 4,5 s 2,1 s 0,8 s GSM GPRS EDGE 3G 3G+mardi 20 septembre 11
  71. 71. RÉSEAU Latence Min Max 2s 1s 700 ms 600 ms 500 ms 300 ms 300 ms 100 ms 150 ms 50 ms GSM GPRS EDGE 3G 3G+mardi 20 septembre 11
  72. 72. RÉSEAU Latence pour 10 appels ? Min Max 20 s 10 s 7s 6s 5s 3s 3s 1s 1,5 s 0,5 s GSM GPRS EDGE 3G 3G+mardi 20 septembre 11
  73. 73. mardi 20 septembre 11
  74. 74. mardi 20 septembre 11
  75. 75. mardi 20 septembre 11
  76. 76. mardi 20 septembre 11
  77. 77. JAVASCRIPT Validation côté client (BP, latence...) Ajax avec parcimonie (3G consomme la batterie) Attention aux bibliothèques... Éviter setInterval() et setTimeout() Éviter de trop manipuler le DOM Éviter les variables globalesmardi 20 septembre 11
  78. 78. CACHE CDN, Proxy Cache Expires, Cache-Control, ETag Version de fichiers “logo-v1.2.jpg“ Validateurs : Wireshark, REDBot...mardi 20 septembre 11
  79. 79. HTML5 Locale Storage (éviter les Cookies) window.localStorage.attr Préférences, compteur, panier... Application Cache => Offline manifest=“index.appcache“ avec text/cache-manifestmardi 20 septembre 11
  80. 80. REQUÊTES Concaténation de fichiers Javascript et CSS Images : CSS Sprites Éviter les redirections Utilisez Firebug, YSlow et PageSpeed Score avec les optimisations à effectuermardi 20 septembre 11
  81. 81. MINIFIER CSS et Javascript YUI Compressor RequireJS optimization tool Google Closure Compiler UglifyJSmardi 20 septembre 11
  82. 82. CONCLUSION C’est quoi optimiser ? C’est surtout penser « mobile » Avoir un bon design, les bonnes données et un site rapide ! A nous de jouer...mardi 20 septembre 11
  83. 83. mardi 20 septembre 11
  84. 84. http://home.wtal.de/FerrariRevolution/F50/FRD04_0083_Ferrari_F50.jpg http://www.flickr.com/photos/23919346@N05/4440941361/ http://www.flickr.com/photos/27326713@N02/5395248854/ http://www.flickr.com/photos/52137170@N00/56206868/ http://www.flickr.com/photos/technokitten/3729367882/ http://www.flickr.com/photos/72296542@N00/311658424/ http://www.flickr.com/photos/49462908@N00/5097039329/ http://www.flickr.com/photos/24325001@N00/4359779134/ http://www.flickr.com/photos/22258062@N00/53235940/ http://www.flickr.com/photos/29601732@N06/3378189534/ Cette oeuvre est mise à disposition selon les termes de la Licence Creative http://www.flickr.com/photos/8558831@N05/4945592650/ Commons Paternité - Pas dUtilisation http://www.flickr.com/photos/17884028@N00/2852716477/ Commerciale - Partage à lIdentique 3.0 http://www.flickr.com/photos/56502208@N00/2366162104/ non transcrit. http://www.flickr.com/photos/64121897@N00/19913607/ http://casablanca.repimmo.com/portable_imode_wap.php http://fr.wikipedia.org/wiki/Protocole_WAP http://thediscipleproject.net/?tag=once-upon-a-time http://fr.flash-screen.com/free-wallpaper/olympic-games_33722.html http://learnthemobileweb.com/2009/12/how-to-view-http-request-headers-sent-by-a-mobile-browser/ http://www.flickr.com/photos/57518661@N00/4322847975/ http://www.flickr.com/photos/30982194@N05/4046320876/ http://deadendthrills.com/?cat=199 http://iphone.appstorm.net/reviews/internet-reviews/finally-a-native-digg-iphone-app/ http://www.flickr.com/photos/ogil/1507585665/mardi 20 septembre 11
  85. 85. mardi 20 septembre 11

×