Une méthodologie pour le responsive design
Méthodologie présentée par Ethan Marcotte à la conférence "An Event Apart" à Boston.
Concernant les sites d'informations
Un journal papier comporte les informations relatives à une journée. Ces informations perdent de la valeur avec le temps. Ainsi, les lecteurs ont tendance à se tourner de plus en plus vers les applications mobiles pour avoir des informations fraîches.
Le besoin d'interface "responsive" se fait sentir.
Les trois ingrédients d'un graphisme adaptable sont :
- Une grille flexible
- Des images/media flexibles
- Des media queries
Cependant ces trois éléments se rapportent à la structure ; la structure n'est constitue pas la conception. La conception est un rapport entre la forme et le contenu.
Comment peut on se pencher sur des sites adaptables ?
Travailler adaptable
Le travail de production se résume souvent à une succession de tâches. Une après l'autre de manière linéaire.
Pour un site adaptable, la procédure ne peut pas être similaire étant donnée la multiplicité des supports de visualisation (mobile, tablette…). Le process doit être différent.
Pour le site du Boston Globe, la phase de conception a été ponctuée de nombreuses questions de la part des développeurs à propos de la manière de naviguer : à quoi ça sert ? comment le contenu s'adapte ? Si je navigue au doigt ?… Un travail collaboratif.
L'équipe s'est principalement penchée sur la question de l'affichage sur mobile : importance des zones et contenus affichés…
En anglais dans le texte : Mobile First
Mobile First
Pourquoi le mobile avant tout ?
- Le trafic a explosé
- Nouvelles manière de naviguer
- Ecran étroit oblige à aller à l'essentiel
La question de contexte de pose-t-elle vraiment ? A-t-on de réelles volontés différentes sur un mobile ou sur un ordinateur de bureau ? A vrai dire, pas forcément, la question de contexte peut être (presque) éludée.
En effet, sur un ordinateur de bureau, les utilisateurs cliquent sur certaines zones d'un site tout simplement parce qu'ils sont perdus.
Sur un mobile, on s'approprie directement le contenu, tout est là.
Le contenu va déterminer ce que la conception doit mettre en valeur. La vision "mobile first" est une façon de simplifier l'expérience à son maximum.
Maquettage
Une étape à ne pas négliger est certainement celle du maquettage afin de pouvoir apprécier ses idées. Utiliser les dernières techniques de redimensionnement automatique des contenus.
Vérifier le résultat de son travail.. Comment le contenu s'adapte ? Comment un élément peut être mis en valeur ?
Tester, vérifier, refaire, répéter, et corriger.
La fondation flexible
L'orientation graphisme adaptable permet d'affiner les points bloquants d'une page. Cela signifie surtout, moins de code à écrire et une meilleure conformité.
Le web mobile permet de discuter de l'ajout d'éléments de manière progressive. Ce qui signifie une meilleur intégration au projet pour chacun.
Les choix d'un concepteur en chef se rapproche d'une certaine forme de tyrannie. Ses décisions pour une conception adaptable pourraient ne pas correspondre aux attentes des utilisateurs.
S'orienter vers la conception adaptable c'est en grande partie laisser à une équipe la possibilité de l'expérimentation.