OPTIMISER VOTRE SITE                  WEB MOBILEmardi 20 septembre 11
Romain MATON                        @rmat0n      #Craftsmanship #Scrum #XP                                     #Java #Scal...
mardi 20 septembre 11
Optimiser                          votre                        application                          mobilemardi 20 septem...
mardi 20 septembre 11
mardi 20 septembre 11
mardi 20 septembre 11
Dan Appelquist                        Évangéliste internet                          chez Vodafonemardi 20 septembre 11
Web Mobile != Web Ordinateur                                  Penser expérience utilisateur !                             ...
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
mardi 20 septembre 11
mardi 20 septembre 11
mardi 20 septembre 11
mardi 20 septembre 11
Web Kit : The King !                   iPhone, iPod, Android, Palm Pre,                         Nokia, Blackberry...      ...
mardi 20 septembre 11
PAS QUE DES                        INCONVÉNIENTS !!!                              Déplacement                             ...
mardi 20 septembre 11
WEB VS. NATIF ?                              Pas le but de cette session :p                                      Sujet à #...
mardi 20 septembre 11
mardi 20 septembre 11
mardi 20 septembre 11
mardi 20 septembre 11
mardi 20 septembre 11
IL ÉTAIT UNE FOIS...                          Wireless Access Protocol                               WAP Forum            ...
ET EN 2000...                        WAP Forum     OMA (Open Mobile Alliance)                          WAP       HTML MP (...
NORMES MOBILES                                   OMA / W3C                        XHTML Mobile Profile / XHTML Basic       ...
Généralitésmardi 20 septembre 11
W3C BONNES PRATIQUES                                   Mobile Web Best Practices 1.0                               http://...
URL MOBILE                                http://m.monsite.fr ?                                http://monsite.mobi ?      ...
URL MOBILE                         Comment vous rendez-vous sur un site mobile ?                                      Mote...
COMMENT S’ADAPTER ?                                   Des frameworks le font mais...                               User-Ag...
http://learnto.mobi/mardi 20 septembre 11
3 OPTIMISATIONS                             Standards                            Utilisabilité                            ...
Église Sainte-Marie-de-la-mer, Barcelone          Standardsmardi 20 septembre 11
DOCTYPE                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://                            www.w...
XHTML / HTML5                                     Fermer vos “attributs“                         Fermer vos <br/>, <hr/>, ...
mardi 20 septembre 11
mardi 20 septembre 11
VIEWPORT                                Taille de la fenêtre (largeur)                                        Zoom initial...
IMAGES                              Attention à la taille de vos images                                 Réduisez le plus p...
JAVASCRIPT                                   Mode strict : “use strict“;                                   Point-virgule o...
mardi 20 septembre 11
mardi 20 septembre 11
mardi 20 septembre 11
Utilisabilitémardi 20 septembre 11
DÉFINITION                        le degré selon lequel un produit peut être utilisé, par                          des uti...
mardi 20 septembre 11
mardi 20 septembre 11
mardi 20 septembre 11
POUR TESTER...                           Émulateurs : A Guide to Mobile Emulators                        http://mobiforge....
mardi 20 septembre 11
mardi 20 septembre 11
FRAMEWORKS                        Optimisés mobiles : écran, clavier...                                      Thèmes       ...
mardi 20 septembre 11
mardi 20 septembre 11
mardi 20 septembre 11
mardi 20 septembre 11
mardi 20 septembre 11
mardi 20 septembre 11
mardi 20 septembre 11
FRAMEWORKS                                    Plus loin que le Web                        Multi plateformes : smartphones,...
mardi 20 septembre 11
mardi 20 septembre 11
mardi 20 septembre 11
Rapiditémardi 20 septembre 11
mardi 20 septembre 11
DONNÉES                              Que recherchent vos utilisateurs ?                                      Exemple : You...
RÉSEAU                                           Bande passante                                                           ...
RÉSEAU                                Bande passante pour 100 ko ?                   1 mn 20 s                            ...
RÉSEAU                                                   Latence                           Min      Max                   ...
RÉSEAU                                      Latence pour 10 appels ?             Min      Max                          20 ...
mardi 20 septembre 11
mardi 20 septembre 11
mardi 20 septembre 11
mardi 20 septembre 11
JAVASCRIPT                              Validation côté client (BP, latence...)                        Ajax avec parcimoni...
CACHE                               CDN, Proxy Cache                          Expires, Cache-Control, ETag                ...
HTML5                            Locale Storage (éviter les Cookies)                                 window.localStorage.a...
REQUÊTES                              Concaténation de fichiers                                   Javascript et CSS        ...
MINIFIER                             CSS et Javascript                             YUI Compressor                        R...
CONCLUSION                            C’est quoi optimiser ?                        C’est surtout penser « mobile »       ...
mardi 20 septembre 11
http://home.wtal.de/FerrariRevolution/F50/FRD04_0083_Ferrari_F50.jpg                   http://www.flickr.com/photos/2391934...
mardi 20 septembre 11
Prochain SlideShare
Chargement dans…5
×

Optimiser votre site Web sur mobile

4 986 vues

Publié le

Publié dans : Technologie
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

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

Aucune remarque pour cette diapositive

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

×