16
Web Kit : iPhone, iPod, Android, Palm Pre, Nokia, Blackberry...     Opera Mobile et Opera MiniIE Mobile, Firefox Mobile, B...
Mais pas que des inconvénients !     Interactions tactiles : déplacement, multitouch...                     Géolocalisatio...
Web vs. Natif ?     Pas le but de cette session :p   Avantages applications natives... ... mais avantages applications web...
2020
Au commencement...Wireless Access Protocol      WAP Forum  Déployé début 2000                           21                ...
22
Et en 2000...WAP Forum       OMA (Open Mobile Alliance)  WAP         HTML MP (HTML Mobile Profile)  WML             HTML, C...
Normes mobilesHTML : Sous-ensemble de XHTML 1.1  CSS : Sous-ensemble de CSS 2.1     Javascript : Ecmascript MP            ...
Généralités   25
Bonnes pratiques W3C           Mobile Web Best Practices 1.0          http://www.w3.org/TR/mobile-bp/XHTML 1.1, taille du ...
URL mobile  http://m.monsite.fr ?  http://monsite.mobi ?http://monsite.mobile.fr ?http://monsite.fr/mobile ?   http://mons...
URL mobile             Par un moteur de rechercheOu par un clic depuis un site, mail, app, réseau social...            Adr...
Comment s’adapter ?                    Browser sniffing    Avec : User-Agent, X-WAP-Profile et WURFLIdéal pour Javascript (A...
http://learnto.mobi/                       30                       30
3 optimisations    Standards    Utilisabilité     Rapidité                    31                    31
Église Sainte-Marie-de-la-mer, BarceloneStandards                                                   32
DOCTYPE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://         www.w3.org/TR/xhtml-basic/xhtml-basic11.dt...
VIEWPORT           Taille de la fenêtre (largeur)                   Zoom initial     <meta name=«viewport» content=«...» /...
XHTML / HTML5             Fermer vos « attributs »  Fermer vos <br />, <hr />, <img />, <input />...Ne fermez pas vos <scr...
36
CSS               Plusieurs CSS en cascade (spécialisation ou cancel)                          CSS media queries @media   ...
38
Mise en pagePetit écran souvent en portraitFini les layout sur 3 colonnes !     Préférez 1 colonne  Et bien sûr pas de pop...
Images           Attention à la taille de vos images              Réduisez le plus possible !Une image HD sur ordinateur e...
Javascript                         Mode strict : «use strict»;                         Point-virgule obligatoire          ...
42
43
4444
4545
JavascriptSéparez vos données HTML et votre comportement Javascript         Scripts en fin de HTML (first-byte receiver)    ...
http://www.quirksmode.org/mobile/                                47
Utilisabilité   48
Outils      Émulateurs : A Guide to Mobile Emulatorshttp://mobiforge.com/testing/story/a-guide-mobile-emulators          ....
50
Frameworks  Optimisés mobiles        Thèmes    ErgonomiquesGestion de la navigation                           51          ...
52
5353
5454
55
5656
5757
5858
59
60
Prochain SlideShare
Chargement dans…5
×

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

2 686 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
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
2 686
Sur SlideShare
0
Issues des intégrations
0
Intégrations
12
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×