Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Optimisation mobile et responsive web design : mediaqueries, images et performance

5,454 views

Published on

Comme chaque année depuis 4 ans, je donne un cours aux étudiants de différentes filières en présentiel et à distance de l'Université de Strasbourg sur l'optimisation mobile et le responsive web design. Le cours se découpe en deux parties : une première partie consacrée au design et à l'ergonomie où les étudiants voient les bonnes pratiques accompagnés d'exercices concrets qui leur permettent de réaliser un concept de site responsive, de la première idée à la réalisation finale en passant par la création de personas, d'une architecture d'information cohérente, du contenu des différentes pages et vues au wireframe. Une seconde plus technique consacrée à comment construire un site responsive en HTML/CSS en prenant en compte la performance, les problématiques d'images, de médias complexes, etc.

Optimisation mobile et responsive web design : mediaqueries, images et performance

  1. 1. 1 Responsive Web Design – Code – Stéphanie Walter Responsive Web Design mediaqueries, images & performance Stéphanie Walter — @WalterStephanie
  2. 2. 2 Responsive Web Design – Code – Stéphanie Walterwww.inpixelitrust.fr @WalterStephanie Designer web et mobile, spécialisée en interface et expérience utilisateurs
  3. 3. 3 Responsive Web Design – Code – Stéphanie Walterwww.inpixelitrust.fr @WalterStephanie Partagés sous licence Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
  4. 4. 4 Responsive Web Design – Code – Stéphanie Walter Application, site dédié, site responsive, adaptive Mais de quoi on parle au juste ?
  5. 5. 5 Responsive Web Design – Code – Stéphanie Walter
  6. 6. 6 Responsive Web Design – Code – Stéphanie Walter lesgrosmotsdumobile.com
  7. 7. 7 Responsive Web Design – Code – Stéphanie Walter Part de marché par pays http://www.kantarworldpanel.com/smartphone-os-market-share/
  8. 8. 8 Responsive Web Design – Code – Stéphanie Walter Comportement utilisateur http://think.withgoogle.com/mobileplanet/fr/
  9. 9. 9 Responsive Web Design – Code – Stéphanie Walter http://www.themobileplaybook.com/fr/
  10. 10. 10 Responsive Web Design – Code – Stéphanie Walter L’application dédiée Téléchargement sur un store/market et installation
  11. 11. 11 Responsive Web Design – Code – Stéphanie Walter L’application dédiée Accès aux fonctionnalités « natives » de l’appareil
  12. 12. 12 Responsive Web Design – Code – Stéphanie Walter L’application dédiée Branding : mon logo, mes couleurs
  13. 13. 13 Responsive Web Design – Code – Stéphanie Walter L’application dédiée Impression de performance et utilisation hors ligne
  14. 14. 14 Responsive Web Design – Code – Stéphanie Walter L’application dédiée – les limites Développement spécifique : iOS, Android, Windows, etc. (différents langages)
  15. 15. 15 Responsive Web Design – Code – Stéphanie Walter L’application dédiée – les limites Passage par la case « Validation »
  16. 16. 16 Responsive Web Design – Code – Stéphanie Walter L’application dédiée – les limites Mises à jour non transparentes
  17. 17. 17 Responsive Web Design – Code – Stéphanie Walter L’application dédiée – les limites Partage de contenu à prévoir dans l’application
  18. 18. 18 Responsive Web Design – Code – Stéphanie Walter Une solution mobile « en ligne » Un développement unifié et multiplateforme
  19. 19. 19 Responsive Web Design – Code – Stéphanie Walter Une solution mobile « en ligne » Des mises à jour transparentes pour les utilisateurs
  20. 20. 20 Responsive Web Design – Code – Stéphanie Walter Site mobile dédié Une URL différente par version http://m.flickr.com/#/home http://www.flickr.com/
  21. 21. 21 Responsive Web Design – Code – Stéphanie Walter Site mobile dédié
  22. 22. 22 Responsive Web Design – Code – Stéphanie Walter Site mobile dédié Ne nécessite pas une refonte totale = cohabitation avec site desktop
  23. 23. 23 Responsive Web Design – Code – Stéphanie Walter Site mobile dédié – les limites Sur optimisation = perte de repères visuels parfois pour l’utilisateur
  24. 24. 24 Responsive Web Design – Code – Stéphanie Walter Site mobile dédié – les limites Partages sociaux et marketing plus compliqué
  25. 25. 25 Responsive Web Design – Code – Stéphanie Walter Et redirection hasardeuse
  26. 26. 26 Responsive Web Design – Code – Stéphanie Walter Site mobile dédié – les limites SEO : duplicate content, URL multiples et redirection, Google n’aime pas ça !
  27. 27. 27 Responsive Web Design – Code – Stéphanie Walter Site mobile dédié – les limites Maintenance d’une liste d’appareils détectés // faux positifs (les navigateur mentent) http://bradfrostweb.com/blog/post/this-is-the-web/
  28. 28. 28 Responsive Web Design – Code – Stéphanie Walter Site mobile dédié – les limites wtfmobileweb.com
  29. 29. 29 Responsive Web Design – Code – Stéphanie Walter “ I don't care who you are or where you’re from I still Love you « « S’adapter à n’importe quel type d’appareil et support de manière transparente pour l’utilisateur » Le concept de Responsive Web Design
  30. 30. 30 Responsive Web Design – Code – Stéphanie Walter http://mediaqueri.es/
  31. 31. 31 Responsive Web Design – Code – Stéphanie Walter http://zurb.com/responsive
  32. 32. 32 Responsive Web Design – Code – Stéphanie Walter Hausse de 211 % des ventes sur mobile. skinnyties.com
  33. 33. 33 Responsive Web Design – Code – Stéphanie Walter www.brice.fr
  34. 34. 34 Responsive Web Design – Code – Stéphanie Walter www.liberation.fr
  35. 35. 35 Responsive Web Design – Code – Stéphanie Walter Pourquoi partir sur un site responsive ?
  36. 36. 36 Responsive Web Design – Code – Stéphanie Walter Un processus unifié Un seul développement = maintenance facilitée sur le long terme
  37. 37. 37 Responsive Web Design – Code – Stéphanie Walter SEO friendly SEO friendly : une seule URL, une seule stratégie, partages simplifiés
  38. 38. 38 Responsive Web Design – Code – Stéphanie Walter SEO friendly Un label « mobile-friendly » sur les sites pour Google
  39. 39. 39 Responsive Web Design – Code – Stéphanie Walter
  40. 40. 40 Responsive Web Design – Code – Stéphanie Walter Business friendly Un impact non négligeable sur le ROI • + 42% d’augmentation de revenu tout support • + 13.6% taux de conversion global • + 377.6% augmentation de revenus sur iPhone • + 71.9% taux de conversion sur iPhone • 24 % du trafic vient du mobile Source
  41. 41. 41 Responsive Web Design – Code – Stéphanie Walter Un site responsive – les limites • Moins d’accès au hardware de l’appareil • souvent perçu comme « moins performant » • Des compétences techniques poussées et spécialisées Photo Dave Catchpole
  42. 42. 42 Responsive Web Design – Code – Stéphanie Walter Quelle stratégie pour quel usage ?
  43. 43. 43 Responsive Web Design – Code – Stéphanie Walter Site en m. dédié (ou beta en m. responsive) Planter l’idée d’une stratégie mobile à plus long terme, solution de transition Source
  44. 44. 44 Responsive Web Design – Code – Stéphanie Walter BBC news beta responsive : m.bbc.com/news
  45. 45. 45 Responsive Web Design – Code – Stéphanie Walter Retrofitting Prendre un site existant, détruire les largeurs, le faire “rentrer” au chausse pied pour petits écrans
  46. 46. 46 Responsive Web Design – Code – Stéphanie Walter Site Responsive Mobile First On repart de zéro et on refond tout le site avec une approche mobile first
  47. 47. 47 Responsive Web Design – Code – Stéphanie Walter Page par page Aka “on commence par une portion du site” (budget, temps, etc.)
  48. 48. 48 Responsive Web Design – Code – Stéphanie Walter Cohabitation application / site responsive Site responsive // app iOS // app Android
  49. 49. 49 Responsive Web Design – Code – Stéphanie Walter Un site responsive, la base technique • Grilles fluides • CSS3 pour ré-agencer les blocs • Images flexibles Ethan Marcotte – Responsive Webdesign
  50. 50. 50 Responsive Web Design – Code – Stéphanie Walter Le concept de viewport et de pixel sur mobile
  51. 51. 51 Responsive Web Design – Code – Stéphanie Walter Un pixel n’est pas un pixel • Le pixel est l'unité minimale adressable par le contrôleur vidéo 720 x 1280 316 dpi 1280 x 740 96 dpi Comprendre le Viewport dans le Web mobile
  52. 52. 52 Responsive Web Design – Code – Stéphanie Walter Le viewport Surface virtuelle qu’un mobile accepte d’afficher par défaut sur l’écran = fenêtre d’affichage de notre navigateur viewport Sur bureau = largeur de la fenêtre de navigation
  53. 53. 53 Responsive Web Design – Code – Stéphanie Walter Le viewport Comment expliquer qu’allocine.fr rentre en entier sur mon mobile ?
  54. 54. 54 Responsive Web Design – Code – Stéphanie Walter Le viewport La taille du viewport dépend du navigateur : entre 800 et 1024 px 980px980px
  55. 55. 55 Responsive Web Design – Code – Stéphanie Walter La balise meta viewport • Se place dans le <head> et permet de prendre le contrôle de la dimension de notre fenêtre d’affichage <meta name="viewport" content=" … ">
  56. 56. 56 Responsive Web Design – Code – Stéphanie Walter Sans contrôle du viewport Largeur du « viewport » = 980 px (Android)
  57. 57. 57 Responsive Web Design – Code – Stéphanie Walter Prendre le contrôle du viewport <meta name="viewport" content=" width=device-width, initial-scale=1.0 ">
  58. 58. 58 Responsive Web Design – Code – Stéphanie Walter En résumé La première étape pour créer un site responsive est de prendre le contrôle de la fenêtre d’affichage en insérant dans la balise <head> de votre site ce qui suit : <meta name="viewport" content="width=device-width, initial-scale=1.0"> 58
  59. 59. 59 Responsive Web Design – Code – Stéphanie Walter D’autres valeurs possibles <meta tag> Exemple définition width width=device-width / width=320 Spécifie la largeur du viewport height height=device-height / height=640 Spécifie la hauteur du viewport (peu utilisé) initial-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 zoomer minimum-scale minimum-scale=0.5 Définit la valeur limite pour un zoom arrière maximum-scale maximum-scale=2.5 Définit la valeur maximale pour un zoom (agrandissement) target-densityDpi target-densityDpi=high- dpi Permet de changer la densité d’une page (déconseillé)
  60. 60. 60 Responsive Web Design – Code – Stéphanie Walter Attention à ne pas désactiver le zoom • Il est tentant d’utiliser ce qui suit pour désactiver le zoom – minimum-scale = 0 – maximum-scale = 0 – user-scalable = no • Rappelez-vous que désactiver le zoom peut causer des soucis d’accessibilité à vos utilisateurs 
  61. 61. 61 Responsive Web Design – Code – Stéphanie Walter Les standards • Meta viewport = Apple • Bug dans le « snap mode » IE 10 < 400px • Specs W3C @viewport = standard (dans le futur) @viewport { width: device-width; } @-ms-viewport { width: device-width; } Aller plus loin : http://inpx.it/Z31Kr3
  62. 62. 62 Responsive Web Design – Code – Stéphanie Walter Des unités fluides pour un design fluide !
  63. 63. 63 Responsive Web Design – Code – Stéphanie Walter Une mise en page fluide pour du responsive La première étape pour passer d’un site à largeur fixe à un site responsive (ou pour construire un site responsive) est d’utiliser des unités fluides pour construire sa grille fixe fluide
  64. 64. 64 Responsive Web Design – Code – Stéphanie Walter Liquide, adaptive, responsive layout liquidapsive.com
  65. 65. 65 Responsive Web Design – Code – Stéphanie Walter Unité fixe • Le Pixel - px – Unité « fixe » – Dépendance à la résolution du périphérique – Valeur « compilée » finale en CSS
  66. 66. 66 Responsive Web Design – Code – Stéphanie Walter Unités fluides • Le Cadratin – em – Unité « fluide » – Sur une police : taille relative à la taille de la police de l’élément parent. – Sur une largeur / hauteur : relative à la taille de la police de l’élément – Répercutions en cascade
  67. 67. 67 Responsive Web Design – Code – Stéphanie Walter Unités fluides • Pourcentage - % – Unité « fluide » – Sur une police : taille relative à la taille de la police de l’élément parent. – Sur une largeur : relative à la taille en pixel de l’élément parent
  68. 68. 68 Responsive Web Design – Code – Stéphanie Walter Unités fluides • Root EM – rem – Unité « fluide » – Sur une police : taille relative à la taille de la police de HTML – Sur une largeur / hauteur : relative à la taille la taille de la police de HTML – Pas de cascade
  69. 69. 69 Responsive Web Design – Code – Stéphanie Walter Unités fluides Support de rem
  70. 70. 70 Responsive Web Design – Code – Stéphanie Walter Unités fluides • vw vh – Relatives à la taille du viewport (fenêtre de navigation) – 100 vw = 100% de la largeur du navigateur – 100 vh = 100% de la hauteur du navigateur! http://cdpn.io/vrfDG
  71. 71. 71 Responsive Web Design – Code – Stéphanie Walter Unités fluides vmin = plus petite entre vw ou vh vmax = plus grande entre vw ou vh  Sensibles aux changements d’orientation
  72. 72. 72 Responsive Web Design – Code – Stéphanie Walter Unités fluides Support de vw, vh, vmin, vmax
  73. 73. 73 Responsive Web Design – Code – Stéphanie Walter Les largeurs fluides • min-width : pour une largeur minimum • max-width : pour une largeur maximum • min-height : hauteur minimum • max-height : hauteur maximum
  74. 74. 74 Responsive Web Design – Code – Stéphanie Walter En résumé .wrapper { max-width: 1000px; } .sidebar { width: 20% } .main { width: 80%; } .wrapper { width: 1000px; } .sidebar { width: 200px; } .main { width: 800px; } Pas responsive
  75. 75. 75 Responsive Web Design – Code – Stéphanie Walter Adapter son contenu et mise en page flexible : les media-queries
  76. 76. 76 Responsive Web Design – Code – Stéphanie Walter Les media queries • CSS2 : media = print, media = screen, media = handheld … • CSS3 spécifications : media queries • Servent à définir nos « paliers » « Permet d’appliquer différentes styles en fonction des spécificités du navigateur qui consulte la page ».
  77. 77. 77 Responsive Web Design – Code – Stéphanie Walter Cibler selon la taille Les media-queries permettent d’écrire du CSS en fonction de la taille du navigateur > 850 px < 790px < 380px
  78. 78. 78 Responsive Web Design – Code – Stéphanie Walter Deux syntaxes, comme en CSS2 <link rel="stylesheet" type="text/CSS" media="(max-width: 480px)" href="mobile.CSS" /> « Si ma fenêtre de navigation est inférieur ou égal à 480px » Syntaxe externe :
  79. 79. 79 Responsive Web Design – Code – Stéphanie Walter Deux syntaxes, comme en CSS2 body { max-width: 1024px; } @media (max-width:480px) { body { width: auto; /* et pleins d’autres trucs super cool qui s’appliqueront aux petits écrans ! */ } } Syntaxe interne :
  80. 80. 80 Responsive Web Design – Code – Stéphanie Walter Les media queries en pratique body{ background-color:rgb(211, 189, 204); } @media (max-width :780px) { body{ background-color:rgb(233, 215, 163); } } http://codepen.io/stephanie_cours/full/btAEi
  81. 81. 81 Responsive Web Design – Code – Stéphanie Walter Les plus utilisées Media query Utilisation min-width: … px Quand le viewport est plus grand ou au égal à … px max-width: … px Quand le viewport est plus petit ou au égal à … px min-device-width: … px Quand la taille de l’écran est plus grande ou au égal à … px max-device-width: … px Quand la taille de l’écran est plus petite ou au égal à … px orientation : portrait // orientation: landscape Cibler l’orientation de l’appareil 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.
  82. 82. 82 Responsive Web Design – Code – Stéphanie Walter Les media queries mutuellement exclusifs • On applique chaque style séparément • Il faut répéter les styles que l’on veut pour chaque taille : risque d’oubli • Pas besoin d’écraser un style non désiré  Le texte ne passera en blanc qu’entre 500 et 699 px
  83. 83. 83 Responsive Web Design – Code – Stéphanie Walter Concept de point de rupture Le design se réadapte à la taille du navigateur à chaque point de rupture Source
  84. 84. 84 Responsive Web Design – Code – Stéphanie Walter Choisir les points de rupture FAUX ! (enfin plutôt suicidaire et non futureproof)
  85. 85. 85 Responsive Web Design – Code – Stéphanie Walter Concept de point de rupture Définir les points de rupture (breakpoints) en fonction du contenu Voir la démo en ligne
  86. 86. 86 Responsive Web Design – Code – Stéphanie Walter Choisir les points de rupture • Oubliez le mythe des périphériques, on ne sait pas de quoi demain sera fait • Placer les points de rupture : – « Quand le contenu casse » – « Quand le contenu devient illisible » • 70 - 80 caractères par ligne = bonne moyenne • Pensez à des points de rupture secondaires pour des micro-optimisation (navigation, typographie, etc.) Définir ses points de rupture
  87. 87. 87 Responsive Web Design – Code – Stéphanie Walter En pratique, conception mobile first matrioshka dolls. retro filter via Shutterstock
  88. 88. 88 Responsive Web Design – Code – Stéphanie Walter En pratique, conception mobile first http://codepen.io/inpixelitrust/pen/qEKgOy
  89. 89. 89 Responsive Web Design – Code – Stéphanie Walter En pratique, conception mobile first • Sur Mobile, le flux « normal » de la page (aka on fait rien)
  90. 90. 90 Responsive Web Design – Code – Stéphanie Walter En pratique, conception mobile first @media (min-width:480px) and (max-width:639px) { .sidebar { display: flex; } .first { margin-right: 20px; } }
  91. 91. 91 Responsive Web Design – Code – Stéphanie Walter En pratique, conception mobile first @media (min-width: 640px){ .wrapper { display: flex; } .content { flex-grow: 1; flex-shrink: 0; flex-basis: 70%; } }
  92. 92. 92 Responsive Web Design – Code – Stéphanie Walter En pratique, conception mobile first @media (min-width:480px) and (max-width:639px), (min-width: 1024px){ .sidebar { display: flex; } .first { margin-right: 20px; } }
  93. 93. 93 Responsive Web Design – Code – Stéphanie Walter En pratique, conception mobile first @media (min-width: 1024px){ .content { flex-basis: 60%; } }
  94. 94. 94 Responsive Web Design – Code – Stéphanie Walter Flexbox FTW http://www.alsacreations.com/tuto/lire/1659-une-grille- responsive-avec-flexbox-et-LESS.html http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout- module.html
  95. 95. 95 Responsive Web Design – Code – Stéphanie Walter Flexbox FTW https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  96. 96. 96 Responsive Web Design – Code – Stéphanie Walter https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
  97. 97. 97 Responsive Web Design – Code – Stéphanie Walter Les « grid framework » • 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 tant d’autres… 97
  98. 98. 98 Responsive Web Design – Code – Stéphanie Walter En résumé • Utiliser des media-queries pour créer du style adaptatif et des styles appliqués spécifiquement à certaines tailles de fenêtre de navigation • Baser les points de rupture sur le contenu (et non les appareils) • Préférer min-width et construire en mobile-first pour assurer une plus grand comptabilité
  99. 99. 99 Responsive Web Design – Code – Stéphanie Walter L’adaptation au-delà de la mise en page
  100. 100. 100 Responsive Web Design – Code – Stéphanie Walter Gérer les débordements de texte : overflow hidden • Masquer tous les dépassements : element{ overflow : hidden ; } Source : alsacréations
  101. 101. 101 Responsive Web Design – Code – Stéphanie Walter Gérer les débordements de texte : word-wrap: break- word • Découper le mot pour qu’il entre dans l’espace : element{ word-wrap: break-word; }
  102. 102. 102 Responsive Web Design – Code – Stéphanie Walter Gérer les débordements de texte : text-overflow: ellipsis • Masquer la fin du mot avec une ellipse : element{ overflow : hidden ; text-overflow: ellipsis; }
  103. 103. 103 Responsive Web Design – Code – Stéphanie Walter Des images responsive Fonctionne même avec une taille fixe dans le HTML !! img{ max-width: 100%; width: auto; } http://inpx.it/13VKGYK
  104. 104. 104 Responsive Web Design – Code – Stéphanie Walter Les vidéos responsive • Rendre une vidéo fluide avec la balise <video> : Demo elastic video http://inpx.it/10OKCt3
  105. 105. 105 Responsive Web Design – Code – Stéphanie Walter Le problème des iframes … http://codepen.io/inpixelitrust/pen/myKveY
  106. 106. 106 Responsive Web Design – Code – Stéphanie Walter Le problème des iframes … • Donner une largeur de 100% à l’iframe ? Oui mais on perd le ratio http://codepen.io/inpixelitrust/pen/myKveY
  107. 107. 107 Responsive Web Design – Code – Stéphanie Walter Le problème des iframes … le gros vilain hack 1. Encapsuler l’iframe dans un container 2. Tricher pour donner au container un ratio de 16/9 3. Appliquer le 100% sur l’iframe http://codepen.io/inpixelitrust/pen/myKveY
  108. 108. 108 Responsive Web Design – Code – Stéphanie Walter Le problème des iframes la version viewport units @video-width: 780px; iframe { width: 100vw; max-width: @video-width; height: 56.25vw; } @media (min-width:@video-width) { iframe { height: calc(@video-width * 0.5628205128205128); } } Conserver le ratio 16/9 des images fullscreen et vidéos
  109. 109. 109 Responsive Web Design – Code – Stéphanie Walter Le problème des iframes … Résolu 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
  110. 110. 110 Responsive Web Design – Code – Stéphanie Walter Embed Responsively http://embedresponsively.com/
  111. 111. 111 Responsive Web Design – Code – Stéphanie Walter Les cartes (Google Maps) Utiliser le même « hack » que les vidéos ? http://bradfrostweb.com/blog/post/adaptive-maps/
  112. 112. 112 Responsive Web Design – Code – Stéphanie Walter Les cartes (Google Maps) Utiliser une carte « statique » (= image) pour mobile ?
  113. 113. 113 Responsive Web Design – Code – Stéphanie Walter Typographie Responsive un peu de lecture Responsive Typography:The Basics A More Modern Scale for Web Typography
  114. 114. 114 Responsive Web Design – Code – Stéphanie Walter Et tellement plus … • Gestion des tableaux ?? – Supprimer des colonnes : http://elvery.net/demo/responsive- tables/#unseen – Afficher un choix de colonnes : http://filamentgroup.com/examples/rwd-table-patterns/ – Ajouter un ascenseur : http://zurb.com/playground/playground/responsive- tables/index.html – Déconstruire les colonnes : http://jquerymobile.com/demos/1.3.0- beta.1/docs/tables/table-reflow.html#
  115. 115. 115 Responsive Web Design – Code – Stéphanie Walter Et tellement plus … Voir le cours d’ergonomie mobile pour plus de composants responsive http://bradfrost.github.io/this-is-responsive/patterns.html
  116. 116. 116 Responsive Web Design – Code – Stéphanie Walter Pour aller plus loin consultez ma formation Formation Design et Ergonomie mobile
  117. 117. 117 Responsive Web Design – Code – Stéphanie Walter Le problème des images en mobilité
  118. 118. 118 Responsive Web Design – Code – Stéphanie Walter Le « problème » des images en responsive • Plusieurs choses qu’on « aimerait » pouvoir prendre en compte : – Taille de l’écran – Résolution de l’écran (retina) – Bande passante – Besoins de la direction artistique Why Responsive Images Is So Hard
  119. 119. 119 Responsive Web Design – Code – Stéphanie Walter Les problème du retina • 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
  120. 120. 120 Responsive Web Design – Code – Stéphanie Walter Les problème du retina • 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 sur les mobiles Note : @2x = convention Apple pour noter les assets en double de tailles pour du developpement d’applications natives 120
  121. 121. 121 Responsive Web Design – Code – Stéphanie Walter [CSS] image @2x uniquement pour les écrans HDPI • 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
  122. 122. 122 Responsive Web Design – Code – Stéphanie Walter [CSS] image @2x uniquement pour les écrans HDPI • Version standard : min-resolution( 192dpi)  Problème : toujours 2 images à maintenir Source http://inpx.it/13VNCEC
  123. 123. 123 Responsive Web Design – Code – Stéphanie Walter Les solutions futures : <picture> • Proposée par http://responsiveimages.org • Une syntaxe qui permettra de charger une image en fonction de la résolution de l’écran et taille du navigateur • Syntaxe similaire à la balise <video> + des media queries
  124. 124. 124 Responsive Web Design – Code – Stéphanie Walter Les solutions futures : <picture> • D’un point de vue de la direction artistique, proposer différentes images dans différents contextes • Un polyfill « picturefill » pour tester • Démo
  125. 125. 125 Responsive Web Design – Code – Stéphanie Walter Can I use <picture> ? http://caniuse.com/#search=picture
  126. 126. 126 Responsive Web Design – Code – Stéphanie Walter Les solutions futures : attribut « srcset » • Une proposition au W3C par Apple • Conserver la balise <img> et lui ajouter un attribut srcset avec différents paramètres • Une syntaxe plus complexe que <picture> • Possibilité de proposer différentes images basées sur la résolution et taille du viewport Scrset les spécifications http://inpx.it/13VPugH
  127. 127. 127 Responsive Web Design – Code – Stéphanie Walter « srcset » et images retina • On peut utiliser des descripteurs 1x, 2x qui correspondent à une densité de pixel • On va charger l’image large.jpg pour les écrans rétina dans ce cas
  128. 128. 128 Responsive Web Design – Code – Stéphanie Walter « srcset » et le descripteur « w » • On peut ajouter à notre liste d’images un descripteur « w » dans lequel on renseigne la largeur « réelle » de l’image – Ex : l’image large.jpg fait 1920px x 768px • Le navigateur va « piocher » dans cette liste d’images celle qui lui convient le mieux en fonction de, euh, bah en fait il fait ce qu’il veut !
  129. 129. 129 Responsive Web Design – Code – Stéphanie Walter « srcset » et « size » • L’attribut « size » permet de spécifier la largeur d’affichage de l’image (aka de combien de pixels on a besoin dans la mise en page) • On peut également y ajouter des points de rupture pour spécifier différentes largeurs d’affichage en fonction du gabarit de la page • Par défaut sizes="100vw" l’image prend toute la taille de la fenêtre d’affichage
  130. 130. 130 Responsive Web Design – Code – Stéphanie Walter « srcset » et « size » « si la fenêtre d’affichage est plus grande que 790px, mon image fait la moitié de la taille de son parent, sinon elle fait 100% de la taille du viewport » Et le navigateur se débrouille. Yeahy !
  131. 131. 131 Responsive Web Design – Code – Stéphanie Walter Can I use srcset ? http://caniuse.com/#search=srcset
  132. 132. 132 Responsive Web Design – Code – Stéphanie Walter Et on peut mélanger picture et srcset Bon, ok, c’est peut-être un poil complexe mais c’est possible
  133. 133. 133 Responsive Web Design – Code – Stéphanie Walter Un peu de lecture • Responsive Images Done Right: A Guide To <picture> And srcset • Responsive Images in Practice • Responsive Images: If you’re just changing resolutions, use srcset. • L’attribut srcset pour des images responsive
  134. 134. 134 Responsive Web Design – Code – Stéphanie Walter La bidouille de compression JPG • Compresser l’image en double de taille avec un gros taux de compression • La redimensionner en HTML http://www.netvlies.nl/blog/design-interactie/retina-revolution
  135. 135. 135 Responsive Web Design – Code – Stéphanie Walter Aller plus loin … Which responsive images solution should you use?
  136. 136. 136 Responsive Web Design – Code – Stéphanie Walter Les « font-icons » c’est flexible ! • Plus besoin d’images et sprites • Changer facilement la couleur • Changer facilement la taille sans perte ni pixellisation http://css-tricks.com/examples/IconFont/
  137. 137. 137 Responsive Web Design – Code – Stéphanie Walter Les « font-icons » c’est flexible ! • Inconvénients : – Monochrome – Pas possible d’utiliser en arrière plan – Utilisation moins « sémantique » http://css-tricks.com/examples/IconFont/
  138. 138. 138 Responsive Web Design – Code – Stéphanie Walter icomoon.io
  139. 139. 139 Responsive Web Design – Code – Stéphanie Walter Utilisation • Chargement de la font-icon dans la CSS comme n’importe quelle autre police • Utilisation en pseudo-classe :before • Insertion via data-attribut ou classe dans le HTML En pratique http://inpx.it/Z7TOox
  140. 140. 140 Responsive Web Design – Code – Stéphanie Walter Le SVG : s’abstraire des pixels • Scalable Vector Graphics • Vectoriel = agrandissable à l’infini sans pertes • Pas pour des images type « photo »
  141. 141. 141 Responsive Web Design – Code – Stéphanie Walter Le SVG : s’abstraire des pixels Tutoriel logo cliquable en SVG • Générer avec du code • Générer depuis des logiciels (Illustrator, Inkscape et même Photoshop depuis la CC 2014
  142. 142. 142 Responsive Web Design – Code – Stéphanie Walter Le SVG : s’abstraire des pixels Resolution Independence With SVG • Possibilité d’utiliser du SVG dans la balise <img> • Possibilité d’utiliser du SVG comme image en CSS (background)
  143. 143. 143 Responsive Web Design – Code – Stéphanie Walter Un SVG responsive Making SVGs Responsive with CSS • On peut ajouter des media-queries dans le SVG et le rendre responsive
  144. 144. 144 Responsive Web Design – Code – Stéphanie Walter Un système d’icônes SVG réutilisables https://lincolnloop.com/blog/svg-sprites-and-icon-systems-are-super/ • Déclarer les icônes • Utiliser les icônes
  145. 145. 145 Responsive Web Design – Code – Stéphanie Walter Un système d’icônes SVG réutilisables On peut même en changer les couleurs directement en CSS https://lincolnloop.com/blog/svg-sprites-and-icon-systems-are-super/
  146. 146. 146 Responsive Web Design – Code – Stéphanie Walter https://useiconic.com/icons/
  147. 147. 147 Responsive Web Design – Code – Stéphanie Walter Animations d’icônes SVG http://www.transformicons.com/ http://livicons.com/
  148. 148. 148 Responsive Web Design – Code – Stéphanie Walter Quelques ressources pour découvrir le SVG • The Ultimate guide to SVG • A Compendium of SVG Information • Creating SVG vector graphics for maximum browser compatibility • Pocket Guide to Writing SVG • svg-news.com • Working with SVG • Building better interface with SVG
  149. 149. 149 Responsive Web Design – Code – Stéphanie Walter Se passer des images : gradient • Remplacer des images par des gradients 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
  150. 150. 150 Responsive Web Design – Code – Stéphanie Walter Se passer des images : border-radius • Création de coins arrondis border-radius : 10px ; Border-radius : 10px 5px 10px 5px ;
  151. 151. 151 Responsive Web Design – Code – Stéphanie Walter Se passer des images : box-shadow • Créer des ombres portées sans image box-shadow: 10px 10px 5px #888; box-shadow: 0 0 0 3px red, 0 0 0 5px yellow, 0 0 0 7px grey;
  152. 152. 152 Responsive Web Design – Code – Stéphanie Walter Créer des boutons en pure CSS • Pas d’images utilisées • Flexible : on peut changer le texte facilement • Plus léger
  153. 153. 153 Responsive Web Design – Code – Stéphanie Walter Et la performance dans tout ça ?
  154. 154. 154 Responsive Web Design – Code – Stéphanie Walter Chaque seconde compte • ¼ des utilisateurs quittent un site qui met plus de 4 secondes à charger Via Kissmetrics
  155. 155. 155 Responsive Web Design – Code – Stéphanie Walter Mobile VS desktop • 31% des utilisateurs interrogés s’attendent à ce qu’un site sur mobile soit aussi rapide que sur bureau, si ce n’est plus rapide Via Kissmetrics
  156. 156. 156 Responsive Web Design – Code – Stéphanie Walter Taille de la page moyenne Vos gains de performance en mobile seront également applicables aux autres utilisateurs ! 2 MB Source
  157. 157. 157 Responsive Web Design – Code – Stéphanie Walter La composition d’une page Les images sont au final ce qui pèse le plus lourd http://httparchive.org/interesting.php#bytesperpage
  158. 158. 158 Responsive Web Design – Code – Stéphanie Walter Pagespeed http://developers.google.com/speed/pagespeed/insights/
  159. 159. 159 Responsive Web Design – Code – Stéphanie Walter Dareboost https://www.dareboost.com/fr/home
  160. 160. 160 Responsive Web Design – Code – Stéphanie Walter Webpagetest http://www.webpagetest.org/
  161. 161. 161 Responsive Web Design – Code – Stéphanie Walter Un besoin de performance – tester les sites ! • 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
  162. 162. 162 Responsive Web Design – Code – Stéphanie Walter Quelques généralités (valables pour tous) • CSS au début (bloquent le rendu) • Chargement de certains JS en asynchrone quand possible http://inpx.it/XNbabn
  163. 163. 163 Responsive Web Design – Code – Stéphanie Walter Quelques généralités (valables pour tous) • Autant que possible, une seule feuille de style (3 max) = une seule requête (éviter les @import) • Eviter les redirections !! http://inpx.it/XNbabn
  164. 164. 164 Responsive Web Design – Code – Stéphanie Walter Quelques généralités (valables pour tous) http://refresh-sf.com/yui/ • Minifier le code en prod, compressez les fichiers, combinez vos CSS et JS pour avoir le moins de requêtes possibles
  165. 165. 165 Responsive Web Design – Code – Stéphanie Walter Réduire les dépendances aux scripts extérieurs • jQuery : 94Ko. • Compressé + gzipé : +30Ko • Utiliser une petite partie de jQuery avec sizzlejs (récupération des sélecteurs uniquement) ou http://zeptojs.com • Utiliser uniquement les parties dont on a besoin :jquip • Utiliser du VanillaJS
  166. 166. 166 Responsive Web Design – Code – Stéphanie Walter Réduire les dépendances aux scripts extérieurs Is jQuery Too big for mobile ?
  167. 167. 167 Responsive Web Design – Code – Stéphanie Walter Evitez les dépendances aux boutons sociaux Pleins de JS et ressources externes chargées qui alourdissent le site http://zurb.com/article/883/small-painful-buttons-why-social-media-bu
  168. 168. 168 Responsive Web Design – Code – Stéphanie Walter http://simplesharingbuttons.com/
  169. 169. 169 Responsive Web Design – Code – Stéphanie Walter http://kraken.io/
  170. 170. 170 Responsive Web Design – Code – Stéphanie Walter Réduire les requêtes en utilisant des sprites • Combinez les images dans un « sprite » quand c’est possible Les sprites CSS
  171. 171. 171 Responsive Web Design – Code – Stéphanie Walter Utiliser des data URIs pour les toutes petites images • 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 • A utiliser avec parcimonie ! http://css-tricks.com/data-uris/
  172. 172. 172 Responsive Web Design – Code – Stéphanie Walter172
  173. 173. 173 Responsive Web Design – Code – Stéphanie Walter Optimisation côté serveur • Activez la compression gzip sur le serveur • Activez la mise en cache des ressources  .htaccess
  174. 174. 174 Responsive Web Design – Code – Stéphanie Walter Mobile first display: none = ressources chargées. Penser et intégrer le mobile en premier ?
  175. 175. 175 Responsive Web Design – Code – Stéphanie Walter Mobile first • Commencer par le HTML et CSS du site mobile, utiliser les media- queries pour « ajouter » des contenus/images = progressive enhancement @media (min-width: 640px){ … }
  176. 176. 176 Responsive Web Design – Code – Stéphanie Walter Mobile first • Charger conditionnellement les ressources lourdes uniquement pour les grands écrans • Eviter 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
  177. 177. 177 Responsive Web Design – Code – Stéphanie Walter Mobile first • La technique matchMedia • La syntaxe des media queries en JS ! • Support : http://caniuse.com/#feat=matchmedia • Polyfill https://github.com/paulirish/matchMedia.js La méthode matchMedia ou les Media Queries pour JavaScript
  178. 178. 178 Responsive Web Design – Code – Stéphanie Walter Un exemple de carte Google Adaptive Adaptive Maps
  179. 179. 179 Responsive Web Design – Code – Stéphanie Walter Un exemple de carte Google Adaptive • Par défaut on charge l’image statique (et renvoie l’utilisateur sur Gmaps directement) • Au dessus de 550px on va charger la map Google Maps Adaptive Maps
  180. 180. 180 Responsive Web Design – Code – Stéphanie Walter Quelques ressources pour aller plus loin dans l’optimisation • Ajax-Include-Pattern librairie pour du chargement de ressources supplémentaires en Ajax • Velocity 2011 • Le concept de RESS : responsive design + server side composent • RESS: Responsive Design + Server Side Components • Getting started with RESS
  181. 181. 181 Responsive Web Design – Code – Stéphanie Walter Pour aller plus loin Beginner’s Guide to Website Speed Optimization
  182. 182. 182 Responsive Web Design – Code – Stéphanie Walter Pour aller plus loin Formation Performance Web
  183. 183. 183 Responsive Web Design – Code – Stéphanie Walter Quelques autres astuces et propriétés qui vous seront utiles
  184. 184. 184 Responsive Web Design – Code – Stéphanie Walter Propriétés utiles pour l’optimisation : Background-size • Changer la taille de l’image de background background-size: 100% 100%; background-size: 250px 70px;
  185. 185. 185 Responsive Web Design – Code – Stéphanie Walter Favicons sur mobile ? http://realfavicongenerator.net/
  186. 186. 186 Responsive Web Design – Code – Stéphanie Walter Le futur et tout ce dont je n’ai pas le temps de vous parler …
  187. 187. 187 Responsive Web Design – Code – Stéphanie Walter D’autres layouts et propositions • CSS3 Multiple Column layout gérer un nombre différents de colonnes en fonction de l’écran • CSS grid layout création d’une grille “virtuelle” pour placer les éléments • CSS3 Template Layout: associer un élément de layout à un nom et le placer sur une grille invisible
  188. 188. 188 Responsive Web Design – Code – Stéphanie Walter D’autres propriétés qui commencent à devenir intéressantes • 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
  189. 189. 189 Responsive Web Design – Code – Stéphanie Walter Les APIs • 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 type de connexion de l’utilisateur Mozilla WebAPI : une liste très complète des API disponibles
  190. 190. 190 Responsive Web Design – Code – Stéphanie Walter Tester son site sur mobile
  191. 191. 191 Responsive Web Design – Code – Stéphanie Walter Firefox « vue adaptative » CTRL + SHIFT + M // ALT + CMD + M
  192. 192. 192 Responsive Web Design – Code – Stéphanie Walter Chrome et l’inspecteur d’élément Chrome permet d’inspecter l’élément en vue mobile et d’émuler un User Agent En savoir plus
  193. 193. 193 Responsive Web Design – Code – Stéphanie Walter Bookmarklet navigateur http://lab.maltewassermann.com/viewport-resizer/
  194. 194. 194 Responsive Web Design – Code – Stéphanie Walter Bookmarklet navigateur http://breakpointtester.com/
  195. 195. 195 Responsive Web Design – Code – Stéphanie Walter Émulateurs • http://www.responsinator.com • http://quirktools.com/screenfly • http://bradfrostweb.com/demo/ish/ • http://responsivepx.com/
  196. 196. 196 Responsive Web Design – Code – Stéphanie Walter SDK officiels http://www.mobilexweb.com/emulators http://www.opera.com/fr/developer/mobile-emulator
  197. 197. 197 Responsive Web Design – Code – Stéphanie Walter Browserstack - responsive http://www.browserstack.com/responsive
  198. 198. 198 Responsive Web Design – Code – Stéphanie Walter Sur des « vrais » appareils
  199. 199. 199 Responsive Web Design – Code – Stéphanie Walter Open Device Lab http://opendevicelab.com/
  200. 200. 200 Responsive Web Design – Code – Stéphanie Walter Débug à distance
  201. 201. 201 Responsive Web Design – Code – Stéphanie Walter Mixture.io Live Refressh Multi Device http://docs.mixture.io/mixture
  202. 202. 202 Responsive Web Design – Code – Stéphanie Walter Mixture + Weinre • mixture.io + weinre
  203. 203. 203 Responsive Web Design – Code – Stéphanie Walter Prepros Prepros avec du multidevice testing
  204. 204. 204 Responsive Web Design – Code – Stéphanie Walter Tester son site sur plusieurs appareils http://www.browsersync.io/ http://mixture.io/
  205. 205. 205 Responsive Web Design – Code – Stéphanie Walter Allez plus loin Techniques for mobile and responsive cross- browser testing: An Envato case study. Mobile Workflow by Addy Osmani
  206. 206. 206 Responsive Web Design – Code – Stéphanie Walter Bibliographie • The Mobile Book – Smashing Magazine • Responsive Web Design – Ethan Marcotte • Mobile First – Luke Wrobkewski • Contrent Strategy for Mobile – Karen Mcgrane • Design process in the responsive age • Designing for Touch – Josh Clark • Ma liste d’articles sur diigo.com
  207. 207. 207 Responsive Web Design – Code – Stéphanie Walterwww.inpixelitrust.fr @WalterStephanie Partagés sous licence Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

×