Your SlideShare is downloading. ×
0
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Optimiser votre site Web sur mobile - Devoxx France 2012 - Partie 2 sur 3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,215

Published on

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

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

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

  • Be the first to like this

No Downloads
Views
Total Views
2,215
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 16
  • 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. Mais pas que des inconvénients ! Interactions tactiles : déplacement, multitouch... Géolocalisation Appareil photo Accéléromètre 18 18
  • 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. 2020
  • 6. Au commencement...Wireless Access Protocol WAP Forum Déployé début 2000 21 21
  • 7. 22
  • 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. Normes mobilesHTML : Sous-ensemble de XHTML 1.1 CSS : Sous-ensemble de CSS 2.1 Javascript : Ecmascript MP 24 24
  • 10. Généralités 25
  • 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. URL mobile http://m.monsite.fr ? http://monsite.mobi ?http://monsite.mobile.fr ?http://monsite.fr/mobile ? http://monsite.fr ? 27 27
  • 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. Comment s’adapter ? Browser sniffing Avec : User-Agent, X-WAP-Profile et WURFLIdéal pour Javascript (Ajax,Web Worker, Géolocalisation...) 29 29
  • 15. http://learnto.mobi/ 30 30
  • 16. 3 optimisations Standards Utilisabilité Rapidité 31 31
  • 17. Église Sainte-Marie-de-la-mer, BarceloneStandards 32
  • 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. 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. 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. 36
  • 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. 38
  • 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. 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. 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. 42
  • 28. 43
  • 29. 4444
  • 30. 4545
  • 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. http://www.quirksmode.org/mobile/ 47
  • 33. Utilisabilité 48
  • 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. 50
  • 36. Frameworks Optimisés mobiles Thèmes ErgonomiquesGestion de la navigation 51 51
  • 37. 52
  • 38. 5353
  • 39. 5454
  • 40. 55
  • 41. 5656
  • 42. 5757
  • 43. 5858
  • 44. 59
  • 45. 60

×