Optimisation Mobile - Responsive Webdesign - 2013

11 412 vues

Publié le

La mise à jour des cours donnés à l'université de Strasbourg sur l'optimisation mobile pour 2013

Publié dans : Technologie
1 commentaire
25 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
11 412
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 370
Actions
Partages
0
Téléchargements
2 634
Commentaires
1
J’aime
25
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Optimisation Mobile - Responsive Webdesign - 2013

  1. 1. Designer web et mobile, spécialiséeen UI et UX. Intégrateur web : HTML5, CSS 3, jQuery, WordPress http://www.inpixelitrust.fr/ http://dribbble.com/stephaniewalter http://forrst.me/inpixelitrust/posts @walterstephanie
  2. 2. • Smartphone : appareil mobile « intelligent » ayantla capacité de se connecter au net, télécharger desapps, lire des mails, etc.• OS : operating system • iOs : système d’exploitation iPhone – iPad • Android : ice-cream sandwich (4), Honeycomb (3 sur tablet), Gingerbread (2.3)• UX : User experience . L’expérience de l’utilisateur,ses actions et interactions avec l’interface• UI : User interface. Le design de l’interface(boutons, drop down, etc)• User agent : Une chaine de caractère envoyée parle navigateur qui permet de l’identifier
  3. 3. Qui a un smartphone en France ?Source : http://www.ourmobileplanet.com/
  4. 4. • Naviguer sur le net 78%• E mail 77 %• Recherche générale 73 %
  5. 5. Via « The Mobile Book - smashed.by/2012-market
  6. 6. • Safari • Nokia WebKit • Obigo WebKit• Android WebKit • Ovi • BlackBerry (vieil os)• Dolfin • Palm WebKit • NetFront• BlackBerry WebKit • IE• Opera Mobile • MeeGo WebKit• Opera Mini • Firefox
  7. 7. • Safari • Nokia WebKit • Obigo WebKit• Android WebKit • Ovi • BlackBerry (viel os)• Dolfin • Palm WebKit • NetFront• BlackBerry WebKit • IE• Opera Mobile • MeeGo WebKit• Opera Mini • Firefox Attention tous les webkit ne sont pas pareils !!
  8. 8. Navigateur Parts de marché OsAndroid webkit 50% AndroidSafari 30% iOsNokia 4% SymbianOpera 3% Symbia et view OSDolfin 3% Bada (os samsung)BlackBerry 6 2% BalckberryAutres 2% Source: statts en france StatCounter.com
  9. 9. Une information est un flux de données :• xml• Json• Base de données• Etc. Possibilité de réutiliser une donnée sur différents supports.
  10. 10. • se télécharge et s’installe (appstore /android market)• utilisation fonctionnalités de l’appareil(photo, gyroscope, gps)• expérience fluide• dédiée et brandée : mon logo, mescouleurs
  11. 11. • développement spécifique : iOs, Android,Blackberry etc. (différents langages)• ciblé à un seul « appareil » : et les tablettes ?• Licence de développement + coût de mise enligne• Mises à jour de chaque app pour chaque OS• Contenu pas indexable par un moteur derecherche• La valeur ajoutée pour votre utilisateur ?
  12. 12. Renvoie vers la version desktop Serveur Envoie du user-agent « browser desktop » Renvoie vers la version mobileEnvoie du user-agent« browser mobile » Un peu de lecture : Modern Mobile Redirect Using .htaccess
  13. 13. • le user agent peut avoir des erreurs• le user agent peut mentir• vous les connaissez TOUS les user agents vous ?  même des browsers qui vont sortir demain ??• et les tablettes ? Et les tailles d’écran ?
  14. 14. http://bradfrostweb.com/blog/post/this-is-the-web/
  15. 15. 2005 - 2008 : + 400 résolutions d’écrans différents • Mobile • Pc • Tv • Tablette • Laptop • Portrait • Paysage • Et demain internet sur mon frigo ??
  16. 16. « » “ I dont care who you are or where you’re from I still Love you “
  17. 17. http://mediaqueri.es/
  18. 18. « »Un ensemble de techniques quipermettent d’afficher le contenu surdifférents appareils (grilles fluides,media-queries, images flexibles, etc.) Ethan Marcotte – Responsive Webdesign Via http://inpx.it/Y8WG4l
  19. 19. « » Un concept qui consiste à proposer la meilleure expérience possible à l’audience la plus large quelque soit son le support (à base d’amélioration progressive des pages)
  20. 20. « Le web sur mobile c’est les applications et les sites mobile dédiés » Vous avez vraiment envie de faire une application pour chacun ? Un site dédié à chacun ?!
  21. 21. Vous n’avez AUCUN contrôle sur où votre contenu finira dansquelques années, autant le préparer de suite pour le future !
  22. 22. « On utilise un site web sur mobile dans un situation de précipitation » • vrai, mais plus uniquement • 40% des utilisateurs utilisent leur téléphone au toilette • « 60% des gens ont répondu à cette question sont des menteurs » - Luke Wroblewski
  23. 23. « On utilise un site web sur mobile dans un situation de précipitation » • 28% des utilisateurs aux USA utilisent leur mobile comme moyen premier d’accéder au net • ebay vend 2500 voitures par semaine sur leur app mobile • en Afrique, 25% du traffic de Google la semaine vient des téléphone (65% le weenkend) => le mobile devient doucement l’accès primaire au web d’une partie grandissante des internautes Sources http://inpx.it/VWMugQ et http://inpx.it/Y93jnl
  24. 24. « Mobile = moins de contenu » • les utilisateurs s’attendent à trouver le même contenu sur mobile que sur desktop  ne pas retirer des fonctionnalités  « masquer » provisoirement des fonctionnalités secondaires sur mobile, mais garder la possibilité de les afficher à la demande
  25. 25. « Mobile = moins de contenu »
  26. 26. Pas de survol ( :hover ) sur les mobiles : • éviter de cacher du contenu et l’afficher au survol • adapter pour mobile les navigations au survol
  27. 27. Une utilisation « au doigt » sur les mobiles : • moins précis qu’une souris • agrandir les zones « cliquables » (au moins 44 px) Source http://www.lukew.com/ff/entry.asp?1085
  28. 28. L’utilisateur sur mobile : différentes zones plus ou moins accessibles Source http://www.lukew.com/ff/entry.asp?1649
  29. 29. L’utilisateur sur mobile : différentes zones plus ou moins accessibiles Source http://www.lukew.com/ff/entry.asp?1649
  30. 30. Difficultés d’écriture au clavier sur les mobiles : • faire remplir le moins de champs possible à l’utilisateur (input vs checkbox, radio, select) • repenser les interactions et utiliser des contrôleurs natifs HTML5 : qui permettent une adaptation du clavier Source http://inpx.it/ZvUkxH
  31. 31. Optimiser le peu d’espace : • repenser son contenu en terme de hiérarchie • revoir les tailles des textes pour qu’ils soient lisibles • généralement contenu sous forme d’un colonne (mais pas une obligation)
  32. 32. • pas de flash ! (et ses copains)• évitez le son• évitez les modales au chargement du site• par pitié par de pop-up en .js !
  33. 33. Comprendre les besoins de l’utilisateuren amont pour cibler les versions Penser le design mobile, tablette, bureau dès le début
  34. 34. « »• nous force à nous concentrer sur l’utilisateur mobile• pas de place pour les fioritures• simple => complexe // complexe => simple• se concentrer sur moins de HTML et de requêtes http Ce que ça ne veut PAS dire : • Ne s’occuper que du mobile • Que le mobile est plus important
  35. 35. • fermez Photoshop• ouvrez Notepad• expérimentez avec du CSS3 plutôt que desimages• Testez sur différentes tailles• Testez sur différents appareils mobiles• TESTEZ !
  36. 36. A prendre compte :• temps : +25%• Budget : +25 %• Performances• contenus Deux versions d’un site : • permet d’optimiser les temps de chargement • servir deux contenus différents • usage mobile vs desktop trop opposés
  37. 37. • une seule feuille de style pour les réunir tous• s’affranchir de la taille de l’appareil.• peut coûter moins cher qu’un deuxième site• peut être pensé « après » la création du site• un seul HTML à maintenir
  38. 38. • plus long que ne pas optimiser : + 25% de temps• connaissances techniques supplémentaires• connaitre les astuces (et souvent bugs) de pas mal de mobiles• beaucoup de tests• moins de créativité : finis les larges backgrounds, le flash à outrance•temps de chargement plus long : on charge des ressources inutiles pourles redimensionner ensuite (dépend du navigateur)
  39. 39. • toujours présent• cliquable (52px) et renvoie à l’accueil
  40. 40. • présente quand l’utilisateur en a besoin• réduite par défaut sur mobile pour gagnerde l’espace
  41. 41. • présente quandl’utilisateur en abesoin• <input type =search > =adaptation duclavier
  42. 42. • 79 % des utilisateurs de smartphone s’enservent en faisant des courses =>importances des notes de l’utilisateur surmobile
  43. 43. • les carrousels sous forme de slider sontdifficilement utilisables sur mobile : galeried’images• une détection du « touch » avec modernizrpour avoir un « swipe » entre les images sic’est supporté Ergonomie des carrousels : 10 principes à respecter
  44. 44. • <input type = number > + pattern = clavieroptimisé sur mobile• bouton « add to card » suffisamment grand
  45. 45. • les 3 boutons = 19 requêtes et 246.7k d de chargé !• Une solution simple, utiliser des liens HTML: <a href="http://www.facebook.com/sharer.php?u=URL&t=TITLE">link or image</a> <a href="http://twitter.com/home?status=STATUS" title="Click to share this post on Twitter">Share on Twitter</a> <a href="https://m.google.com/app/plus/x/?v=compose&content=CONTENT">Image or text</a> Social media unbuttoned
  46. 46. • mettre à profit les capacités de l’appareil• ajouter de la VA et pertinence auxinformations apportées à l’utilisateur
  47. 47. • les contenus secondaires ne sont paschargés sur mobile (mobile first)• requête ajax pour les charger « à lademande »
  48. 48. • les contenus secondaires sont chargés sur des écrans plus grands auchargement de la page
  49. 49. • Sites fluides et des designs adaptables• Un peu de code côté client, plus rien (ou presque) côté serveur••• Un peu d’inspiration : http://mediaqueri.es/
  50. 50. « » fixe• design basé sur des pourcentages• s’adapte à la taille du navigateur fluide
  51. 51. « » Fluid Layout : http://inpx.it/ZEcuLu
  52. 52. « »• se base sur la largeur duviewport • largeur du navigateur pour du desktop • largeur du mobile/tablette• basé sur un système de« paliers »• adaptation « abrupte » parfois• unités en pixels et largeurs fixes• A ne pas confondre avec« adaptive webdesign »
  53. 53. « » Adaptive layout http://inpx.it/ZEdf7i
  54. 54. « »• un mélange entre fluide et adaptive• le contenu est fluide (basé sur despourcentages• max-width pour les tailles des éléments• toujours des « paliers » via différentsviewports• des transitions parfois moins« abruptes
  55. 55. « » Responsive Layout http://inpx.it/ZEdLT4
  56. 56. Adaptive :• facile sur un site déjà existant• si on sait quelles tailles d’écran cibler (choisir sespaliers) Responsive : • couteux sur un site existant • permet de cibler n’importe quelle taille
  57. 57. Le pixel est lunité minimale adressable par le contrôleur vidéoDépend de la densité en dpi : quantité de pixel dans 1 mm. 1280 x 740 720 x 1280 96 dpi 316 dpi Pour référence : Comprendre le Viewport dans le Web mobile
  58. 58. Visual viewport = surface virtuellequ’un mobile accepte d’afficherMobile : largeur = largeur du mobileHauteur = hauteur du mobile – bars dunavigateur. viewportDesktop: largeur = largeur dunavigateur (scroll bar comprise)Hauteur = hauteur du navigateur(scroll bar comprise) – taille desdifférentes barres
  59. 59. • La valeur en pixel par défaut du viewport dépend du navigateur etnon du mobile • quelques chiffres sur iOS : • largeur physique de l’iPhone 4 : 640px • largeur en px de l’iPhone (device-width): 320px • largeur du viewport par défaut de Safari : 980 px Crédit photo
  60. 60. « » • Navigateurs récents : tentent d’afficher l’intégralité du site dans le viewport • Très peu de contrôle sur l’affichage
  61. 61. « » • zoom : adapter le contenu du site au viewport • Android 4 : 980px
  62. 62. <meta name="viewport" content=" … "><meta tag> Exemple définitionwidth width=device-width / Spécifie la largeur du viewport width=320height height=device-height / Spécifie la hauteur du viewport (peu utilisé) height=640initial-scale initial-scale=2.0 Le degré de zoom au premier affichage de la page (en général 1.0)user-scalable user-scalable=no / yes Définit si l’utilisateur peut ou non zoomerminimum-scale minimum-scale=0.5 Définit la valeur limite pour un zoom arrièremaximum-scale maximum-scale=2.5 Définit la valeur maximale pour un zoom (agrandissement)target-densityDpi target- Permet de changer la densité d’une page densityDpi=high-dpi (déconseillé)
  63. 63. <meta name="viewport" content="width=320">
  64. 64. <meta name="viewport" content="width=device-width">
  65. 65. <meta name="viewport" content="width=device-width, initial-scale=2">
  66. 66. <meta name="viewport" content="width=device-width, initial-scale=0.5">
  67. 67. • width = device-width• portrait ET paysage, un viewport de 320px• un zoom +44% en paysage Images via http://inpx.it/10EYupP
  68. 68. <meta name="viewport" content="width=device-width, initial-scale=1"><meta name="viewport" content="initial-scale=1">
  69. 69. • meta viewport = Apple• bug dans le « snap mode » IE 10 <400px• specs W3C @viewport = standard(dans le future)@viewport { width: device-width;}@-ms-viewport {width: device-width;} Aller plus loin : http://inpx.it/Z31Kr3
  70. 70. « »• CSS 2 : media = print, media = screen, media = handheld …• CSS 3 specifications : media queries• servent à définir nos « paliers »
  71. 71. Media query Utilisationmin-width: … px Quand le viewport est plus grand ou au égal à … pxmax-width: … px Quand le viewport est plus petit ou au égal à … pxmin-device-width: … px Quand la taille de l’écran est plus grande ou au égal à … pxmax-device-width: … px Quand la taille de l’écran est plus petite ou au égal à … pxorientation : portrait // orientation: Cibler l’orientation de l’appareillandscape-webkit-min-device-pixel-ratio : 1.5 Pour cibler certains appareils avec une densité de pixel élevée La liste complète sur le site du W3C.
  72. 72. Syntaxe externe :<link rel="stylesheet" type="text/CSS" media="screen and(max-width: 480px) " href="mobile.CSS" />Syntaxe interne :body { background: gray;}@media all and (max-width:480px) { body { background: blue; }}
  73. 73. Avantages InconvénientsUne taille plus petite pour la feuille Des requêtes http en plusde style des navigateurs qui nesupportent pas les media queriesOn peut cibler IE avec une feuille de Oublie de mise à jour lors de lastyle spécifique mise à jour de la CSS « normale »Plus simple pour organiser sa page
  74. 74. Avantages InconvénientsPas de requête http Téléchargement supplémentairesupplémentaire pour des browser qui vont pas utiliserPlus difficile de l’oublier puisqu’elle JavaScript pour rendre compatiblefait partie de la CSS normale IE 8- Plus difficile d’organiser la feuille de style
  75. 75. • respecte la cascade• propriétés héritées• les propriétés appliquées pour le 500 sont aussi appliquées pour le 700• il faut écraser un style si on ne veut pas qu’il soit hérité• images chargées même si on les écrase / cache
  76. 76. http://inpx.it/Z346Gm Écran inférieur à 780 pxÉcran supérieur à 780 px
  77. 77. • on applique chaque style séparément• il faut répéter les styles que l’on veut pour chaque taille : risque d’oublie• pas besoin d’écraser un style non désiré• ne télécharge que les images dans la tranche de taille
  78. 78. http://inpx.it/Z3bYYs
  79. 79. Quelques sites utiles / outils de test :• Responsive design tester (fonctionne en local)• Responsivepx.com/ (fonctionne en local)• Bookmarklet pour tester son site• Resizer Bookmarklet • Tester les mq supportés par le navigateur • Media queries for standard device (CSS tricks) • Target high dpi device
  80. 80. 950 et + Moins de 950 px Moins de 580 pxhttp://inpx.it/Z38V2t
  81. 81. « »• automatiser la tâche : ne pas ré-inventer la roue• des classes « toutes faites »• peut-être lourd• « en ai-je vraiment besoin ? »• Foundation, Bootstrap, KNACSS, Skeleton, CSSgrid, et tantd’autres…
  82. 82. Foundation http://inpx.it/Z3fyBS
  83. 83. FAUX !(enfin plutôtsuicidaire et nonfutureproof)
  84. 84. • oubliez le mythe despériphérique, on ne sait pas dequoi demain sera fait• Content is King !• « quand le contenu explose »• « quand le contenu devientillisible »• 45 - 90 caractères par ligne =bonne moyenne Définir ses points de rupture
  85. 85. Passer les liens en ligne (possible si peu de liens) http://codepen.io/bradfrost/full/vcuem
  86. 86. Cacher la navigation pour les petits écrans sous forme d’une liste déroulanteUn menu de navigation “optimal” sur mobiles http://codepen.io/bradfrost/full/sHvaz
  87. 87. « »Cacher la navigation et la faire apparaitre à gauche, droite au par le dessus viaune div « off canvas » (en dehors du viewport)Navigations mobile “off canvas” http://dbushell.com/
  88. 88. « »Descendre la navigation dans le footer, accessible via un lien « ancre ».Footer Anchor This is Responsive Luke W. Footer anchor
  89. 89. Un casse tête… http://codepen.io/bradfrost/full/qwJvF
  90. 90. Encore plus casse tête ;) http://codepen.io/inpixelitrust/full/kficJ
  91. 91. • à chaque projet sa navigation• pas de solution « parfaite »• expérimenter, expérimenter, expérimenter.
  92. 92. Masquer tous les dépassements :element{ overflow : hidden ;} Source : alsacréations
  93. 93. Découper le mot pour qu’il entre dans l’espace :element{word-wrap: break-word;}
  94. 94. Masquer la fin du mot avec une ellipse :element{text-overflow: ellipsis;}
  95. 95. img{max-width: 100%;width: auto;height: auto; /*fixing ie*/-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} Fonctionne même avec une taille fixe dans le HTML !! http://inpx.it/13VKGYK
  96. 96. • Rendre une vidéo fluide avec la balise <video> : Demo elastic video http://inpx.it/10OKCt3
  97. 97. Demo http://inpx.it/10OM9zy
  98. 98. Donner une largeur de 100% à l’iframe ? Oui mais …. Demo http://inpx.it/10OM9zy
  99. 99. 1. Encapsuler l’iframe dans un container2. tricher pour donner au container un ratio de 16/93. Appliquer le 100% sur l’iframe Responsive embeds
  100. 100. • Fonctionne avec « tout » type d’iframe :vimeo, youtube, slidershare, etc. http://fitvidsjs.com/ un plugin pour automatiser l’ajout du container sur les vidéos
  101. 101. Utilisation d’unités relatives : em ou %body {font:1em/1.5em Verdana, Arial, sans-serif;}@media screen and (max-width:800px) { body { font-size:0.8em; }}@media screen and (max-width:400px) { body { font-size:0.7em; }}
  102. 102. Utilisation d’unités relatives rem : relative au root ( = HTML)html { font-size: 14px}P { font-size: 1 rem; } /* =14px */@media screen and (max-width:800px) { html { font-size: 12px} /* => p = 12px */}@media screen and (max-width:400px) { html { font-size: 16px} /* => p = 16px */} Support de rem http://caniuse.com/#search=rem
  103. 103. • 4 x plus de pixels sur une même zone• des images « floues » sur les écrans avec un pixel ratio supérieur à 2 Source http://inpx.it/13VL2ys
  104. 104. • doubler la taille physique des images ?• réduire de 50 % l’image dans le HTML• Problème : image 2 fois plus grosses = problème de performance surles mobilesNote : @2x = convention Apple pour noter les assets en double de tailles pour dudeveloppement d’applications natives
  105. 105. Une solution en CSS : utiliser des média queries device-pixel-ratio(non standard ! ) Version standard : min-resolution( 192dpi) Problème : toujours 2 images à maintenir Source http://inpx.it/13VMkJO
  106. 106. Version standard : min-resolution( 192dpi)Problème : toujours 2 images à maintenir Source http://inpx.it/13VNCEC
  107. 107. • http://retinajs.com/• http://retina-images.complexcompulsions.com/• automatisent le remplacement des images par une version @2x sisupportée• problèmes : • dépendants du JS • problèmes de performance (retina ne veut pas dire grosse bande passante)
  108. 108. • http://adaptive-images.com/ • détecter la taille de l’écran du navigateur qui visite la page • créer automatiquement la bonne taille d’image • « cacher » l’image et envoyer la version appropriée au navigateur • Avantages : • possibilité de charger des petites images sur les petits écrans = perf • Inconvénients : • lourd à mettre en place (PHP + .htaccess + JS) • pas standards besoin d’une standardisation d’une solution d’image pour le future !
  109. 109. • proposé par http://responsiveimages.org/• une syntaxe qui permettra de charger une image en fonction de la résolutionde l’écran• syntaxe similaire à la balise <video> + des media queries
  110. 110. • d’un point de vue de la DA, proposer différentes images dans différentscontextes• en discussion et non implémenté• un polyfill « picturefill » pour tester
  111. 111. « »• Une proposition au W3C par Apple• conserver la balise <img> et lui ajouter un attribut srcset avec différentsparamètres• une syntaxe plus complexe que <picture>• possibilité de proposer différentes images basées sur la résolution et taille duviewport Scrset les spécifications http://inpx.it/13VPugH
  112. 112. • Scalable Vector Graphics• Vectoriel = agrandissable àl’infini sans pertes• pas pour des images type« photo »• générer avec du code• générer avec des logiciels Tutoriel logo cliquable en SVG
  113. 113. • possibilité d’utiliser du SVG dans la balise <img>• possibilité d’utiliser du SVG comme image en CSS (background) Resolution Independence With SVG
  114. 114. « »• remplacer les lettres d’une police par les icônes utilisées dans l’interface• plus besoin d’images et sprites• changer facilement la couleur• changer facilement la taillesans perte ni pixellisation• Inconvénients : • monochrome • pas possible d’utiliser en arrière plan • utilisation moins « sémantique » http://css-tricks.com/examples/IconFont/
  115. 115. • Chargement de la font-icon dans la CSS comme n’importe quelle autrepolice• utilisation en pseudo-classe :before• insertion via data-attribut ou classe dans le HTML En pratique http://inpx.it/Z7TOox
  116. 116. Remplacer des images par des gradient CSS 3 :background: linear-gradient(top, #1e5799 0%,#207cca 51%,#7db9e8 100%); /* W3C */background: -moz-linear-gradient(top, #1e5799 0%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */background: -webkit-linear-gradient(top, #1e5799 0%,#207cca 51%,#7db9e8 100%); /*Chrome10+,Safari5.1+ */Editeur de gradient colorzilla
  117. 117. Création de coins arrondisborder-radius : 10px ;Border-radius : 10px 5px 10px 5px ;
  118. 118. Remplacer les png24 transparents par des couleurs rgba et del’opacitécolor:#fff;opacity : 0.9 ;= rgba (255,255,255,0.9);
  119. 119. Créer des ombres portées sans imagebox-shadow: 10px 10px 5px #888; box-shadow: 0 0 0 3px red, 0 0 0 5px yellow, 0 0 0 7px grey;
  120. 120. • pas d’images utilisées• Flexible• plus léger
  121. 121. Environ 60% des utilisateurs s’attendent à ce qu’un site mobile soit chargé en 3 secondes ou moins. What users want from mobile
  122. 122. 74% des utilisateurs ne sont prêts qu’à attendre 5 secondes ou moins pour que le site secharge avant de le quitter What users want from mobile
  123. 123. 71% des utilisateurs s’attendent à ce qu’un site sur mobile soit aussi rapide que sur bureau, sice n’est plus rapide What users want from mobile
  124. 124. Vos gains de performance en mobile seront également applicables auxautres utilisateurs ! http://httparchive.org/
  125. 125. http://validator.w3.org/mobile/ http://mobitest.akamai.com/m/index.cgi
  126. 126. • voir le temps de chargement des ressources• voir l’ordre de chargement• voir les facteurs bloquants (JS, etc) « Network » panel du Dev tool de Chrome
  127. 127. • le CSS au début (bloquent le rendu) • le JS à la fin avant </body> (bloquent les téléchargements) sauf modernizr• autant que possible, une seule feuille de style = une seule requête (éviter les@import)• éviter les redirections !! http://inpx.it/XNbabn
  128. 128. • maximiser la parallélisation (jusqu’à un certain point) : héberger sesressources sur différences serveurs/ sous domaine = forcer téléchargementen parallèle• chargement en asynchrone des ressources : dès que possible où qu’il soitdans le HTML (ex google analytics)• minifiez le code en prod, compressez les fichiers, combinez vos CSS et JSpour avoir le moins de requêtes possibles http://inpx.it/XNbabn
  129. 129. • jQuery : 90Ko.• compressé + gzipé : +30Ko• utiliser une petite partie de jQuery avec sizzlejs (récupération dessélecteurs uniquement) ou http://zeptojs.com/• utiliser uniquement les parties dont on a besoin :jquip• utiliser du VanillaJS
  130. 130. • Utilisez des sélecteurs performants #header nav ul li a {...}VS.primary-link {...}• Créez du code réutilisable, des classes ré-utilisables pour éviter de ré-écrireles mêmes propriétés• Groupez les sélecteurs qui ont les mêmes propriétés.news, .social { background: #eee; border-radius: 5px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);} http://inpx.it/XNbXJq
  131. 131. • Utilisez la compression de Photoshop / Fireworks pour enregistrer• Passer ensuite les images dans un outil comme • http://imageoptim.com/ • http://www.smushit.com/ysmush.it/ • http://kraken.io/ Comparaison des outils de compression d’image en ligne
  132. 132. • Combinez les images dans un « sprite » quand c’est possible Les sprites CSS
  133. 133. • encodage d’images en base64 pour éviter une requête supplémentaire• sur de très petites images ou des patterns• peut-être utilisé dans le HTML et dans le CSS http://css-tricks.com/data-uris/
  134. 134. • activez la compression gzip sur le serveur• activez la mise en cache des ressources .htaccess .htaccess du HTML5 boiler template
  135. 135. display: none = ressources chargées. Penser lemobile en premier ?
  136. 136. • Commencer par le HTML et CSS du site mobile, utiliser les media-queriespour « ajouter » des contenus/images = progressive enhancement• Problème avec IE8 et moins => feuilles de style conditionnelles / classesconditionnelles ou un polyfill comme respond.js
  137. 137. • charger conditionnellement les ressources pour les grands écrans• éviter les display:none sur les ressources dont on a pas besoin en mobile • ne pas les charger à la base • les charger conditionnellement ensuite en fonction de la taille de l’écran Conditional Loading for Responsive Designs
  138. 138. • La technique matchMedia• la syntaxe des media queries en JS !• support : http://caniuse.com/#feat=matchmedia• un polyfill https://github.com/paulirish/matchMedia.js La méthode matchMedia ou les Media Queries pour JavaScript
  139. 139. Adaptive Maps
  140. 140. • par défaut on charge l’imagestatique (et renvoie l’utilisateursur Gmaps directement)• au dessus de 550px on vacharger la map Google Maps Adaptive Maps
  141. 141. • Ajax-Include-Pattern librairie pour du chargement de ressourcessupplémentaires en Ajax• Le concept de RESS : responsive design + server side composent • RESS: Responsive Design + Server Side Components • Getting started with RESS
  142. 142. Changer la taille de l’image de backgroundbackground-size: 100% 100%;background-size: 250px 70px;
  143. 143. « »Empêcher le zoom du texte sur browser mobile (mais pas sur bureau) :body {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: none; }
  144. 144. • préfixe vendeur : • -webkit- • -moz- • -o-
  145. 145. • Image carrée• Effet « glossy ajouté par l’appareil »<!– Iphone 4 & hdpi 114* 114 px--><link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon.png"><!– iphone 3G et mdpi 72* 72px --><link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon.png"> <!-- Plus vieux appareils : 57 * 57 px--> <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png">
  146. 146. • Rien pour IE6-8 qui n’existent « pas » sur mobile (IE9 gère les mediaqueries)• Feuille de style à part sans media queries• Feuille de style pour viser ie mobile<!--[if (lt IE 9)&(!IEMobile 7)]><link rel="stylesheet" href="desktop.CSS"media="all"><![endif]-->• Utiliser des polyfills pour « simuler » les media queries • Respond.js : https://github.com/scottjehl/Respond • CSS 3 media queries : http://code.google.com/p/CSS 3- mediaqueries-js/ • Cocher la case « media queries » de modernizr : http://www.modernizr.com/download/
  147. 147. • CSS3 Flexible box model permet de réarranger visuellement leséléments plus facilement que des flottants• propriétés pour changer l’orientation ,l’ordre des blocs, colonnes etligne CSS3 Flexbox Layout module
  148. 148. • CSS3 Multiple Column layoutgérer un nombre différents decolonnes en fonction de l’écran• CSS grid layout création d’unegrille “virtuelle” pour placer leséléments• CSS3 Template Layout: associerun élément de layout à un nom etle placer sur une grille invisible
  149. 149. • Viewport Percentage Lengths vw, vh, vmin, vmax : unités en % relatives àla dimension du viewport• CSS4 nouvelles media queries : • @media(luminosity: normal|dim|washed) adapter à la luminosité de l’écran • @media(hover) pour savoir si l’appareil supporte le :hover ou non • @media(pointer:none|coarse|fine) adapter à la précision du pointeur de l’appareil
  150. 150. Détecter des capacités « natives » de l’appareil :• deviceorientationEvent détecter l’orientation de l’appareil(gyroscope)• geolocation API détecter la position géographique de l’utilisateur• Vibration API : accéder nativement aux vibrations de l’appareil(pour du gaming HTML5)• network information API récupérer des informations sur le typede connexion de l’utilisateurMozilla WebAPI : une liste très complète des API disponibles
  151. 151. • Responsive Web Design: What It Is and How To Use It Smashingmagazine• Multi-Device Web Design: An Evolution Luke Wroblewski• Responsive Web Design Techniques, Tools and Design Strategies Smashingmagazine
  152. 152. • Fittextjs : adapter le texte à la taille de l’écran• Responsive slide js : un slideshow responsive• Iscroll : une scroll bar « native » pour ios (et android)• Photoswipe : une librairie d’image optimisée mobile• Isotope : plugin jquery pour un layout flexible• http://www.onextrapixel.com/2012/06/13/really-useful-resources-and-tools-for-responsive-web-design/ des outils, encore des outils• et encore plus d’outils http://www.onextrapixel.com/2013/02/20/55-great-and-useful-tools-for-responsive-web-design/• http://lab.goetter.fr/tagged/mobile des expérimentations mobiles
  153. 153. www.inpixelitrust.fr/caweb/opti.m.zip

×