Responsive Design Patterns d’Ethan Marcotte

Dans la série des A Book Apart je voudrais le n°15 ! Ce bouquin d’Ethan Marcotte, préfacé par Mandy Brown nous invite à voir un site web (sa conception pour être précis) sous un tout nouvel angle. L’auteur ne souhaite plus parler de pages web, mais de patterns… regardons ça ensemble.

L’auteur

Ethan Marcotte est designer indépendant, vivant à Boston. Ethan est à l’origine du terme « responsive web design » qui sert aujourd’hui à la fois à qualifier un site web et à la fois à définir une nouvelle façon de concevoir un site web en constante évolution. Il a déjà écrit le n°4 des A Book Apart intitulé très sobrement Responsive web design.
Son travail de design, ses écrits et ses allocutions ont aidé de nombreux designers et organisations à exploiter la flexibilité du Web afin de concevoir à la fois pour les mobiles, les tablettes, les ordinateurs et tous les appareils qui pourraient voir le jour à l’avenir.

Depuis de nombreuses années, Ethan Marcotte intervient lors de conférences, notamment An Event Apart, SXSW Interactive et Webstock. Parmi ses clients, il compte le New York Magazine, le festival du film de Sundance, le Boston Globe et People Magazine.

Le livre

Je ne vais pas vous faire l’affront de vous lister le sommaire du bouquin, mais plutôt vous présenter les différents points qui ont retenu mon attention.
Si je devais résumer le bouquin avec une seule idée du Web, ça serait avec un extrait en une phrase :

« La seule constante du Web est qu’il est en perpétuel changement. »
—Ethan Marcotte

Toutes les idées de l’ouvrage tournent autour de ce mouvement constant du Web.

La vision et méthodologie de Marcotte c’est d’arrêter de visualiser le Web comme un ensemble de pages. Cet héritage de l’imprimerie est depuis longtemps dépassé, mais il reste gravé dans nos habitudes. Son idée est plutôt de traiter les pages comme un ensemble de composants et donc traiter les composants et leurs spécificités plutôt que les pages.
Le concept de page est à abandonner lors de la construction d’un site web. Bien sûr l’ensemble d’une page doit avoir un sujet et un agencement cohérent, mais la construction des éléments qui la composent doit pouvoir se faire indépendamment du reste.

Il complète cette réflexion en traitant le cas des grilles responsives disponibles sur le marché du framework CSS, et donne des exemples concrets. Il aborde même le sujet intéressant de la potentielle obsolescence de ces grilles (Bootstrap et consœurs) : le contenu ne devrait pas avoir à s’adapter à la grille, mais la grille devrait se définir par rapport aux contenus (modules, pattern). Le module et ses variantes doivent créer des points de rupture, ce ne sont pas les appareils que l’on utilise qui doivent le faire, puisque ces appareils sont voués à disparaître ou évoluer avec le temps.

Pour rester sur le contenu et les points de ruptures visuels du design, l’auteur s’attarde sur une réflexion sur la densité visuelle des éléments. Pour faire court les break-points de chaque module doivent permettre de modifier l’agencement du contenu pour éviter les surcharges visuelles et faciliter la lecture ou l’utilisation de celui-ci.

L’auteur part de cette idée pour définir un processus différent lors de la conception d’un site web : proposer un prototype fonctionnel au plus tôt dans le processus créatif, en utilisant donc HTML, CSS et éventuellement JS pour démontrer les interactions possibles. Les avantages cités sont nombreux, mais je vous laisse lire le bouquin pour les découvrir.

Il propose ensuite plusieurs analyses et cas concrets comme les avantages et inconvénients du burger icon et de la navigation cachée, les techniques concernant les images et la vidéo responsive (rien de bien neuf ici), et l’étude d’une vraie problématique : la publicité sur le web et ses dimensions fixes. L’étude ne va pas très loin et semble plutôt rester dans l’impasse, non faute de solution mais plutôt de volonté de normalisation par les organismes normalisateurs.

Bref, ce bouquin est un bon petit condensé d’informations pour ses quelques (seulement) 170 pages.

Voir le livre sur Amazon Version numérique sur IziBook

Ressources qui ont retenu mon attention

Il y a dans ce bouquin un certain nombre de ressources très intéressantes à explorer et exploiter. J’en ai retenu deux pour vous donner une idée du contenu et ne pas spoiler tout le livre.

• OverthrowJS – permet d’harmoniser le comportement de overflow: auto.
• AjaxInclude – permet d’inclure des pattern dans votre code sous certaines conditions.

Je vous laisse regarder le détail de ces ressources qui me semblent plutôt bien utiles dans la conception d’un site web performant sur toutes les plateformes.

Bonne lecture !