{"id":6115,"date":"2016-12-08T17:41:50","date_gmt":"2016-12-08T16:41:50","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=6115"},"modified":"2016-12-08T17:41:50","modified_gmt":"2016-12-08T16:41:50","slug":"responsive-design-patterns-dethan-marcotte","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/conseil-critique-livre\/responsive-design-patterns-dethan-marcotte","title":{"rendered":"Responsive Design Patterns d’Ethan Marcotte"},"content":{"rendered":"

Dans la s\u00e9rie des A Book Apart je voudrais le n\u00b015 ! Ce bouquin d’Ethan Marcotte, pr\u00e9fac\u00e9 par Mandy Brown nous invite \u00e0 voir un site web (sa conception pour \u00eatre pr\u00e9cis) sous un tout nouvel angle. L’auteur ne souhaite plus parler de pages web, mais de patterns\u2026 regardons \u00e7a ensemble.<\/p>\n

<\/p>\n

L’auteur<\/h2>\n

Ethan Marcotte<\/a> est designer ind\u00e9pendant, vivant \u00e0 Boston. Ethan est \u00e0 l’origine du terme \u00ab\u00a0responsive web design\u00a0\u00bb qui sert aujourd’hui \u00e0 la fois \u00e0 qualifier un site web et \u00e0 la fois \u00e0 d\u00e9finir une nouvelle fa\u00e7on de concevoir un site web en constante \u00e9volution. Il a d\u00e9j\u00e0 \u00e9crit le n\u00b04 des A Book Apart intitul\u00e9 tr\u00e8s sobrement Responsive web design.
\n<\/em>Son travail de design, ses \u00e9crits et ses allocutions ont aid\u00e9 de nombreux designers et organisations \u00e0 exploiter la flexibilit\u00e9 du Web afin de concevoir \u00e0 la fois pour les mobiles, les tablettes, les ordinateurs et tous les appareils qui pourraient voir le jour \u00e0 l’avenir.<\/p>\n

Depuis de nombreuses ann\u00e9es, Ethan Marcotte intervient lors de conf\u00e9rences, notamment An Event Apart, SXSW Interactive et Webstock. Parmi ses clients, il compte le New York Magazine<\/em>, le festival du film de Sundance, le Boston Globe<\/em> et People Magazine<\/em>.<\/p>\n

Le livre<\/h2>\n

Je ne vais pas vous faire l’affront de vous lister le sommaire du bouquin, mais plut\u00f4t vous pr\u00e9senter les diff\u00e9rents points qui ont retenu mon attention.
\nSi je devais r\u00e9sumer le bouquin avec une seule id\u00e9e du Web, \u00e7a serait avec un extrait en une phrase :<\/p>\n

\u00ab\u00a0La seule constante du Web est qu’il est en perp\u00e9tuel changement.\u00a0\u00bb
\n\u2014Ethan Marcotte<\/p><\/blockquote>\n

Toutes les id\u00e9es de l’ouvrage tournent autour de ce mouvement constant du Web.<\/p>\n

\"book-apart-15-cover\"La vision et m\u00e9thodologie de Marcotte c’est d’arr\u00eater de visualiser le Web comme un ensemble de pages<\/strong>. Cet h\u00e9ritage de l’imprimerie est depuis longtemps d\u00e9pass\u00e9, mais il reste grav\u00e9 dans nos habitudes. Son id\u00e9e est plut\u00f4t de traiter les pages comme un ensemble de composants et donc traiter les composants et leurs sp\u00e9cificit\u00e9s plut\u00f4t que les pages.
\nLe concept de page est \u00e0 abandonner lors de la construction d’un site web. Bien s\u00fbr l’ensemble d’une page doit avoir un sujet et un agencement coh\u00e9rent, mais la construction des \u00e9l\u00e9ments qui la composent doit pouvoir se faire ind\u00e9pendamment du reste.<\/p>\n

Il compl\u00e8te cette r\u00e9flexion en traitant le cas des grilles responsives<\/strong> disponibles sur le march\u00e9 du framework CSS, et donne des exemples concrets. Il aborde m\u00eame le sujet int\u00e9ressant de la potentielle obsolescence de ces grilles (Bootstrap et cons\u0153urs) : le contenu ne devrait pas avoir \u00e0 s’adapter \u00e0 la grille, mais la grille devrait se d\u00e9finir par rapport aux contenus (modules, pattern). Le module et ses variantes doivent cr\u00e9er des points de rupture, ce ne sont pas les appareils que l’on utilise qui doivent le faire, puisque ces appareils sont vou\u00e9s \u00e0 dispara\u00eetre ou \u00e9voluer avec le temps.<\/p>\n

Pour rester sur le contenu et les points de ruptures visuels du design, l’auteur s’attarde sur une r\u00e9flexion sur la densit\u00e9 visuelle des \u00e9l\u00e9ments<\/strong>. Pour faire court les break-points de chaque module doivent permettre de modifier l’agencement du contenu pour \u00e9viter les surcharges visuelles et faciliter la lecture ou l’utilisation de celui-ci.<\/p>\n

L’auteur part de cette id\u00e9e pour d\u00e9finir un processus diff\u00e9rent lors de la conception d’un site web : proposer un prototype fonctionnel<\/strong> au plus t\u00f4t dans le processus cr\u00e9atif, en utilisant donc HTML, CSS et \u00e9ventuellement JS pour d\u00e9montrer les interactions possibles. Les avantages cit\u00e9s sont nombreux, mais je vous laisse lire le bouquin pour les d\u00e9couvrir.<\/p>\n

Il propose ensuite plusieurs analyses et cas concrets comme les avantages et inconv\u00e9nients du burger icon<\/strong> et de la navigation cach\u00e9e<\/strong>, les techniques concernant les images et la vid\u00e9o responsive<\/strong> (rien de bien neuf ici), et l’\u00e9tude d’une vraie probl\u00e9matique : la publicit\u00e9 sur le web<\/strong> et ses dimensions fixes. L’\u00e9tude ne va pas tr\u00e8s loin et semble plut\u00f4t rester dans l’impasse, non faute de solution mais plut\u00f4t de volont\u00e9 de normalisation par les organismes normalisateurs.<\/p>\n

Bref, ce bouquin est un bon petit condens\u00e9 d’informations pour ses quelques (seulement) 170 pages.<\/p>\n

Voir le livre sur Amazon<\/a> Version num\u00e9rique sur IziBook<\/a><\/p>\n

Ressources qui ont retenu mon attention<\/h3>\n

Il y a dans ce bouquin un certain nombre de ressources tr\u00e8s int\u00e9ressantes \u00e0 explorer et exploiter. J’en ai retenu deux pour vous donner une id\u00e9e du contenu et ne pas spoiler tout le livre.<\/p>\n