Un smartphone et un ordinateur

Responsive & content design

 

Responsive design? Content Design ?

Le responsive design, maintenant bien ancré dans les pratiques web, est une méthode de design qui consiste à fournir un design web pour plusieurs supports (ordinateur de bureau, smartphones, tablettes, téléviseurs … ). On parle alors de sites web « adaptatifs ».

Quand on conçoit une version adaptée d’un site pour un autre support, on ne se contente pas que de modifier le design pour qu’il « rentre » dans tout l’écran du support.

C’est là qu’intervient le « content design ». Cette discipline s’occupe de veiller à la bonne compréhension du contenu par l’internaute, et ce, sur n’importe quelle version (mobile, desktop, tablette). Cela induit de faire des choix d’organisation du contenu (ordre, mise en avant de certaines sections, voire suppression de contenus), selon les attentes des visiteurs sur chaque support.

Dans un cas concret, par exemple un bloc d’informations de contact présent en pied de page en version bureau, devrait idéalement se situer en haut de page en version mobile, puisqu’en situation de navigation sur smartphone, l’internaute, souvent en déplacement peut visiter votre site seulement pour avoir des coordonnées précises. Le but : donner à l’internaute ce qu’il veut afin de ne pas le frustrer.

Des méthodes pour améliorer le processus de conception d’un design responsive

Sur le papier, le responsive design c’est génial, mais dans la réalité comment procéder? Incontournable aujourd’hui, il bouleverse tout de même nos façons de concevoir les design web et entraîne une modification inévitable du processus de création, à la fois en interne dans les équipe de production mais également en relation client.

Vitaly Friedman, lors du Web2Day 2014,  nous a fait part de ses suggestions pour nous adapter au mieux à ces changements.

« Atomic Design », le design atomique

Le design atomique est une approche du design qui nous invite non pas à designer des pages comme nous le faisions avant mais à designer des « systèmes ».

Atomic Design

L’idée est de designer et coder des petits bouts de contenus, indépendants les uns des autres et facilement dupliquables et interchangeables. On distingue différents niveaux:

* les atomes : un bouton, un champ texte …

* les molécules: un module de recherche, un formulaire de contact

* les organismes : une barre latérale (sidebar), une entête de page (header), un pied de page (footer)

* les templates ou modèles : un modèle de de page institutionnelle, un modèle de page catégorie

* les pages : une page entreprise, une page services

Vitaly nous conseille donc de d’abord concevoir les composants. Pourquoi ? Parce que si votre design de site doit s’adapter à des dizaines de supports, il ne sert à rien de trop s’attacher au « tout », à la manière dont les éléments s’imbriquent entre eux. Une marge de 20 pixels sur la droite d’un élément sera éphémère dans un design responsive et vouée à s’adapter.

Cette manière de concevoir crée une nouvelle forme de livrable, le style guide ou style tile qui va présenter le style des composants. C’est une sorte de planche tendance qui indique les polices d’écriture, les couleurs, rendus de boutons, champs de formulaires, etc.

Klout Style Guide

Exemple de style guide du site klout.com

Beaucoup de sites diffusent en ligne leurs style guides, comme Starbucks, AListApart ou encore Yelp.

Quelque outils pour générer des style guides:

http://livingstyleguide.org
http://jacobrask.github.io/styledocco
https://github.com/kneath/kss

Construire des équipes de production complémentaires et soudées

« Build smaller tactical teams that are capable of executing multiple rounds of planing, design and code quickly and independantly. » Citation de Trent Walton, directeur de Paravel, agence web américaine.

Dans les entreprises de communication, on a tendance à diviser géographiquement l’équipe de production selon les domaines de compétences. Un étage pour les commerciaux, un étage pour les designers, etc. voire même dans des bâtiments différents.

équipes non complémentaires

Des équipes organisées par domaines de compétences. (Source: trentwalton.com)

Les projets responsive encore plus que les projets classiques, nécessitent pourtant de nombreux retours et itérations entre les différentes parties prenantes. Les chargés d’UX design (ceux qui s’assurent de la bonne utilisabilité du site), plus que jamais, ont besoin d’intervenir tout au long du projet.

Pour mener à bien un projet responsive, l’idéal serait de composer des équipes de production aux compétences complémentaires et surtout géographiquement proches dans leur environnement de travail. Les échanges seraient ainsi facilités. Les projets responsive gagneraient en rapidité et leur coût diminuerait en conséquence.

Équipes complémentaires de production web

Des équipes composées d’intervenants aux compétences complémentaires et géographiquement proches. (Source: trentwalton.com)

 

Adopter la méthode mobile-first

Penser mobile-first, c’est concevoir les versions mobiles du design en amont des versions bureaux. En design mobile, on réfléchit aux informations qui doivent être obligatoirement véhiculées, on s’occupe de traiter l’essentiel.

En commençant par les versions mobiles, la conception sera tournée vers une démarche d’amélioration progressive, en partant d’une structure aux fonctionnalités essentielles pour aller vers des versions bureaux plus complexes et abouties. Ainsi, la création web gagne en logique en ne négligeant aucun medium, comme ce pourrait être le cas quand on designe les versions mobiles à la toute fin. Car il est difficile de faire rentrer un design classique de bureaux dans un tout petit support sans heurts!

Prendre en compte la performance

Quand il s’agit d’e-commerce, la performance web est incontournable. Il est primordial que les pages s’affichent rapidement, car un internaute qui attend trop est un internaute qui n’achète pas sur votre site. Pour exemple, Amazon a déclaré qu’un ralentissement d’une seconde fait perdre à l’entreprise 1,6milliards de ventes en dollars chaque année.

Accroissement de l'abandon d'une page avec le temps de chargement de celle-ci

Plus une page met du temps à charger, plus l’abandon est important (Source: OnlineGraduatePrograms.com)

Sur les plus petits sites au contenu moins considérable, la performance web est un sujet moins sensible. Mais elle est tout de même à prendre en compte dans le cas des versions mobiles visualisables sur smartphones et tablettes. Souvent consultées avec des connexions plus lentes et plus instables et des mediums moins performants que les versions bureaux, il est nécessaire de vérifier le temps d’affichage sur ces versions.

Il ne s’agit pas de faire en sorte que tout le contenu soit chargé le plus rapidement possible, mais de prioriser ce qui devra s’afficher dès l’arrivée du site, et de s’assurer que le chargement de certaines ressources ne bloque pas le chargement du contenu essentiel. On peut ainsi catégoriser le contenu en trois ordres d’importance.