Retour d’expérience sur le responsive design

Au-delà de notre satisfaction d'avoir sorti un site dont nous sommes particulièrement fiers, nous avons voulu partager notre retour d'expérience sur la refonte de notre site en responsive design.

Refondre son site web est toujours un défi pour une agence web. Notre précédent site fêtant son 3ème anniversaire, il n’était plus très en phase, ni avec notre discours, ni avec nos méthodologies et commençait à être technologiquement obsolète. Avec l’arrivée du HTML5, des CSS3 (media queries, @font-face, multi-columns, animations…) et l’expansion du javascript (à travers jQuery ou Mootools…), nous possédons désormais les outils nécessaires pour pouvoir mettre en ligne simplement des sites à la fois agréables,  accessibles,rapides et portables.Avec cette refonte, nous avons voulu construire un site qui soit en phase avec notre image,nos méthodes de travail et notre vision du Web. Au-delà de notre satisfaction d’avoir sorti un site dont nous sommes particulièrement fiers, nous avons voulu partager notre retour d’expérience sur la refonte de notre site en responsive design.

Faire les bons choix

Après la lecture de « Responsive Web Design » de Ethan Marcott, « Mobile Design and Development » de Brian Fling chez O’Reilly, après plusieurs ateliers « nealite campus » (NDLR : nos formations internes du vendredi) sur la mobilité ou le Responsive Design, nos experts ont pu échanger afin d’établir les grands principes de la refonte.
Trois points cruciaux ont émergé de ces discussions :
  • Etre portable – Le site doit être consultable sur tous les supports connus (et à venir).
  • Etre visuel – Communiquer grâce à des textes courts, des images et de la vidéo, d’autant plus que ce type de consultation est très apprécié sur mobile, tablette et télévision.
  • Rester simple – Car la simplicité est devenue comme une seconde nature dans la façon dont nous abordons et présentons notre travail.
    • A partir de ces principes, notre équipe s’est installée dans une war room dédiée afin de pouvoir collaborer efficacement et régulièrement.

    Responsive Design, mais jusqu’à quel point ?

    La principale question, lorsque l’on conçoit un site responsive, est de déterminer les points de bascule (NDLR : « Break Points » en anglais), résolution d’écran à partir de laquelle la conception doit évoluer. En règle générale, les points de bascules correspondent aux grandes familles d’appareils (mobile, smartphone, tablette, pc de bureau…)Pour déterminer nos points de bascule, nous avons croisé les statistiques de notre précédent site avec d’autres données (taux d’équipement mobile et tablette en France et dans le monde, résolutions d’écrans moyennes du W3C, données des constructeurs Hi-tech, données des opérateurs français…) Nous avons pu ainsi déterminer 4 points de bascule : 
    Schéma Breakpoints Responsive Design
  • De 0 à 500px — Mobiles (la plupart sont situé entre 320 et 480px)
  • De 501 à 959 px — Tablettes, notepad, anciens pc…
  • De 960 à 1279px – PC portable, anciens pc…
  • Plus de 1280px – PC de bureau (beaucoup de professionnels du milieu consultent notre site Web, beaucoup sont dotés d’écrans supérieurs à 23″, d’où l’intérêt de leur fournir une version améliorée du site)
    • Nous avons aussi établi un point de rupture spécifique, qui permet de faire basculer la navigation dans le footer pour les mobiles et les tablettes lorsque celle-ci ne tient plus dans le header.
    • De 0 à 680px – Mobiles et tablettes
      • Le mobile d’abord !Forcément, après avoir accueilli Luke Wroblewski lors du UX Book Club l’an dernier pour son livre « Mobile First » , nous ne pouvions qu’être convaincus de démarrer une démarche de responsive design en concevant d’abord l’expérience mobile…
      En partant du principe que les mobiles et les tablettes sont, pour l’instant, peu puissants (faible processeur, cache navigateur < 2 Mo,…) et plus susceptibles de se connecter via des réseaux limités comme la 3G ou l’Edge, l’absence d’images, de vidéo ou d’élements en Javascript est un avantage ! Partant du principe qu’un utilisateur ferme un onglet si la page n’est pas affichée sous 5 secondes, nous nous devions de limiter la durée de chargement, les latences et les crashes.Grâce à cette approche, nous avons pu nous concentrer sur l’essentiel pour la version mobile : des prototypes légers, des parcours simplifiés, une mise en page basique et une navigation minimaliste.Pour concevoir les pages tablettes et PC, nous avons simplement ajouté des images ou des vidéos à la base mobile et modifié la mise en page afin de rendre le site plus graphique et visuel. Pour cela nous avons conçu un document de chorégraphie de contenu (lire l’article sur le blog de Trent Walton).Chorégraphie des contenus Responsive
      Ce document (en croquis) permet d’imaginer la façon dont les contenus se déplacent, apparaissent ou disparaissent en fonction des différentes résolutions. Cela permet d’avoir rapidement un aperçu de chaque page, sans avoir à les concevoir une à une, dans Axure par exemple…

      Non les écrans HD d'abord !

        Lors de la phase de design mieux vaut inverser le processus : aller du plus grand écran vers le plus petit, surtout lorsque le site valorise de grandes images ! Pour un UI Designer, les éléments d’identité sont d’abord des contenus.  Il a donc besoin de jouer avec tous les éléments présents dans la plus grande version pour pouvoir être créatif. Il acceptera ensuite d’adapter le graphisme dans les versions de plus faibles résolutions, mais devra toujours s’assurer que le site soit lisible, utilisable et hierarchisé.
      Développer en Responsive DesignLe Responsive Design est une technologie émergente, de ce fait, il n’existe pas encore beaucoup de ressources pour concevoir un site de ce type et les meilleures pratiques ne sont pas encore nécessairement identifiées. De plus, les technologies des terminaux mobiles n’en finissent pas d’évoluer, compliquant la tâche des développeurs (ex : la sortie récente des écrans Retina d’Apple).Le développement d’un site web en responsive design demande un peu plus de préparation et de recherche qu’un site classique. Il est aussi souvent nécessaire d’expérimenter certains outils pour s’assurer de leur compatibilité avec les différents appareils. Enfin, nous avons pu constater que même si cette technologie est à la base très performante, elle possède quelques limites :Un contrôle d’apparence seulementLes medias queries permettent de modifier l’apparence d’une page HTML en fonction de la résolution ou de la densité de pixels d’un appareil (téléphone, console de jeux, tablettes, ordinateur, …). Ces conditions permettent de modifier l’aspect de la page au niveau des CSS mais pas de contrôler le code HTML. Ainsi, si votre page contient une vidéo (balise HTML5) elle est chargée par le navigateur même si celle-ci est masquée en CSS! Dommage pour vos visiteurs mobiles en Edge qui ne verront jamais la page s’afficher ! Cependant, grâce au script mobile detect, il est possible de poser des conditions en PHP.Pris dans le fluxLes medias queries n’ont pas d’impact sur le code HTML. Ainsi, on reste dépendant de l’ordre dans lequel a été écrit le HTML. Impossible donc d’intervertir une boîte avec une autre ou d’associer dans un même ensemble deux informations complètement séparées dans le code, à moins de tricher en CSS, mais cette technique est quasi incontrôlable sur tous les appareils…
      La vérification cross-browser, cross-device, cross-resolution…
      Il est impératif de tester l’affichage sur chaque appareil et de ne pas se fier au rendu du navigateur desktop. En effet, les navigateurs mobiles possèdent leurs propres moteurs de rendus. Il y a donc beaucoup de différences entre une page rendue par Safari sur Mac et sur Safari iOS par exemple. De plus, les appareils mobiles sont souvent moins puissants que les PCs, certains scripts (un carrousel Jquery par exemple), ou certaines animations CSSpeuvent faire planter certains terminaux mobiles !Une seule solution : l’itération & la collaborationLorsque l’on code en responsive design, la meilleure façon de procéder reste d’expérimenter, de tester et d’améliorer jusqu’à ce que le résultat soit satisfaisant sur unmaximum de supports. Dans certains cas, les choix effectués en conception ne fonctionnent pas lors de l’intégration ( ex : un paragraphe qui occupe plus de place que prévu lors du passage en desktop et qui casse le colonage imaginé en conception). Les développeurs/intégrateurs doivent être capables d’interagir rapidement avec les designers afin de trouver des solutions au cas par cas. Pour notre site, nous avons souvent pris des décisions de mise en page en modifiant directement les CSS.Choisir les bons outilsMedia Queries
      Pour construire rapidement la trame d’une feuille de style en Responsive Design avec plusieurs break points, nous vous conseillons d’utiliser Gridpak, outil fourni par Erskine Design.

      Site  officiel : http://gridpak.com/

      Adaptive Images
      Essentiel, ce script permet de redimensionner les images en fonction de la résolution de l’écran, ainsi, il suffit de produire les images dans la plus haute résolution, elles seront automatiquement générées en taille inférieure pour les faibles résolutions. Cette technologie basée sur du Javascript, du PHP et un .htaccess est assez simple à mettre en place et permet de réduire considérablement le poids des images.

      Site officiel : http://adaptive-images.com/

      Mobile detect
      Ce script PHP permet de détecter le type de device utilisé par le client. Il est ainsi possible de poser des conditions en PHP pour chaque appareil ou chaque famille d’appareil (mobile, tablette, desktop…). Ainsi, il est possible de ne pas charger les balises <video> pour un mobile… par exemple. Cette technique, n’est pas vraiment responsive, mais elle est nécessaire afin de garder le contrôle sur le poids des pages.

      Site officiel : http://code.google.com/p/php-mobile-detect/

      Adobe Shadow
      Nous avons utilisé Adobe Shadow afin de synchroniser les navigateurs de nos devices mobiles avec le navigateur Desktop. Cet outil permet  de rafraîchir plusieurs appareils à partir d’un navigateur desktop, c’est un grand gain de productivité !

      Site officiel : http://labs.adobe.com/technologies/shadow/

      Edit : Adobe a renouvelé sa gamme de logiciel pour le développement Web. Adobe Shadow est devenu Adobe Edge Inspect. Vous pouvez vous procurer le logiciel et les applications pour tablette et mobile sur le site d’Adobe.

      Site officiel : http://html.adobe.com/edge/inspect/