Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3

2 901 vues

Publié le

Présentation donnée lors de la conférence Devoxx France 2012 (partie 2 sur 3).

Lien : http://www.devoxx.com/display/FR12/Optimiser+votre+site+Web+sur+mobile

Partie 1 : http://www.slideshare.net/rmat0n/optimiser-votre-site-web-sur-mobile-devoxx-france-2012-partie-1-sur-3
Partie 2 : http://www.slideshare.net/rmat0n/optimiser-votre-site-web-sur-mobile-devoxx-france-2012-partie-2-sur-3
Partie 3 : http://www.slideshare.net/rmat0n/optimiser-votre-site-web-sur-mobile-devoxx-france-2012-partie-3-sur-3

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3

  1. 1. 16
  2. 2. Web Kit : iPhone, iPod, Android, Palm Pre, Nokia, Blackberry... Opera Mobile et Opera MiniIE Mobile, Firefox Mobile, Bolt, Skyfire... Android : Chrome arrive ! 17
  3. 3. Mais pas que des inconvénients ! Interactions tactiles : déplacement, multitouch... Géolocalisation Appareil photo Accéléromètre 18 18
  4. 4. Web vs. Natif ? Pas le but de cette session :p Avantages applications natives... ... mais avantages applications web !Facebook, GMail, Twitter, Maps... les 2 ? 19 19
  5. 5. 2020
  6. 6. Au commencement...Wireless Access Protocol WAP Forum Déployé début 2000 21 21
  7. 7. 22
  8. 8. Et en 2000...WAP Forum OMA (Open Mobile Alliance) WAP HTML MP (HTML Mobile Profile) WML HTML, CSS, Javascript... Web Mobile 23 23
  9. 9. Normes mobilesHTML : Sous-ensemble de XHTML 1.1 CSS : Sous-ensemble de CSS 2.1 Javascript : Ecmascript MP 24 24
  10. 10. Généralités 25
  11. 11. Bonnes pratiques W3C Mobile Web Best Practices 1.0 http://www.w3.org/TR/mobile-bp/XHTML 1.1, taille du site (HTML + images + CSS) à 20 Ko, peu de scrollbars, pas d’auto-refresh, pas de pop-ups,pas de javascript, pas de frames, CSS 1, JPEG et GIF, fonts ... Un must read de bonnes pratiques ! 26 26
  12. 12. URL mobile http://m.monsite.fr ? http://monsite.mobi ?http://monsite.mobile.fr ?http://monsite.fr/mobile ? http://monsite.fr ? 27 27
  13. 13. URL mobile Par un moteur de rechercheOu par un clic depuis un site, mail, app, réseau social... Adresse principale adaptative ! Attention : référencement site Web mobile difficile <link rel=«canonical» href=«http://monsite.fr» />Attention à la dégradation irréversible côté serveur ! 28 28
  14. 14. Comment s’adapter ? Browser sniffing Avec : User-Agent, X-WAP-Profile et WURFLIdéal pour Javascript (Ajax,Web Worker, Géolocalisation...) 29 29
  15. 15. http://learnto.mobi/ 30 30
  16. 16. 3 optimisations Standards Utilisabilité Rapidité 31 31
  17. 17. Église Sainte-Marie-de-la-mer, BarceloneStandards 32
  18. 18. 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> 33 33
  19. 19. VIEWPORT Taille de la fenêtre (largeur) Zoom initial <meta name=«viewport» content=«...» />Valeure idéale : width=device-width,initial-scale=1.0 Blocage du zoom avec user-scalable=no 34 34
  20. 20. 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> 35 35
  21. 21. 36
  22. 22. CSS Plusieurs CSS en cascade (spécialisation ou cancel) CSS media queries @media Mobile : handheld, only screen and (max-device-width:480px)Tablette : only screen and (min-device-width: 481px) and (max-device-width: 800px) html5rocks : http://www.html5rocks.com/en/mobile/mobifying/ 37 37
  23. 23. 38
  24. 24. Mise en pagePetit écran souvent en portraitFini les layout sur 3 colonnes ! Préférez 1 colonne Et bien sûr pas de pop-up 39 39
  25. 25. Images Attention à la taille de vos images Réduisez le plus possible !Une image HD sur ordinateur et LD sur mobile (CSS MD) Spécifiez la taille dans le HTML PNGCrush... pour optimiser la taille 40 40
  26. 26. 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é) switch sans break après chaque case Eval() et With() interdits, if(a=b) détecté, ++ et -- interdit ...JavaScript Performance MythBusters : https://docs.google.com/present/view? id=0Ac0YlG9vMA2LZHE1MnpycF8yMGZ6ZnZxa2hy&pli=1 41 41
  27. 27. 42
  28. 28. 43
  29. 29. 4444
  30. 30. 4545
  31. 31. JavascriptSéparez vos données HTML et votre comportement Javascript Scripts en fin de HTML (first-byte receiver) Toujours vérifier l’existence d’une API !!! 46 46
  32. 32. http://www.quirksmode.org/mobile/ 47
  33. 33. Utilisabilité 48
  34. 34. Outils Émulateurs : A Guide to Mobile Emulatorshttp://mobiforge.com/testing/story/a-guide-mobile-emulators ...mais rien ne vaut le déploiement ! 49 49
  35. 35. 50
  36. 36. Frameworks Optimisés mobiles Thèmes ErgonomiquesGestion de la navigation 51 51
  37. 37. 52
  38. 38. 5353
  39. 39. 5454
  40. 40. 55
  41. 41. 5656
  42. 42. 5757
  43. 43. 5858
  44. 44. 59
  45. 45. 60

×