Responsive Design Patterns

“Responsive Design Patterns” est la traduction française d’un ouvrage publié originellement en 2015 chez A Book Apart.

L’auteur, Ethan Marcotte, est mondialement reconnu pour être l’inventeur du terme de “Responsive Webdesign” et l’écrivain du livre éponyme en 2010.

Son second opus dans le web Responsive témoigne d’un tournant dans nos techniques d’intégration : nous raisonnons de moins en moins en “pages web” et de plus en plus en composants modulaires tels que des navigations, des paginations, des boutons de formulaires, etc. Alors comment rendre ces composants responsive et réutilisables ?

Sommaire

1. Du plus petit au plus grand
2. Navigation
3. Images et vidéos
4. Publicité responsive
5. Concevoir la grille infinie
6. Ressources

Les plus

Après une introduction vantant les mérites de la méthodologie “Mobile First”, quatre thèmes principaux sont traités dans le détail : le menu de navigation, les images responsive, la publicité et les grilles de mise en forme.

Le choix de ces composants est pour le moins judicieux, d’autant que l’auteur les traite dans un souci constant de l’amélioration progressive et de l’accessibilité.

Le tout avec justesse dans les détails techniques et les approches. On y trouve toutes les spécifications et technologies actuellement employées en production : scrset et <picture> pour les images responsive, des navigations fonctionnant sans JavaScript, AJAX pour l’ajout de publicités, … Personnellement, j’ai beaucoup apprécié son code JavaScript de navigation responsive.

Les moins

Sa méthode de grille de mise en page, censée remplacer les frameworks trop complexes tels que Bootstrap, est vraiment trop alambiquée et laborieuse même si le principe de base est bien pensé. Les colonnes sont en float, leurs marges et largeurs en pourcentage.

Jusque là rien d’alarmant, mais l’obsession de l’auteur à se baser systématiquement sur des ratios pour le calcul de ses valeurs conduit à se confronter à des width: 47.602739726027397260 pour caser deux blocs flottants l’un à côté de l’autre, ou encore des margin-right: 3.043968432919954904. Chiffres véridiques.

Par ailleurs, et de manière générale, on reste un peu sur sa faim et on regrette rapidement un choix aussi restreint de cas concrets. On aurait bien aimé rencontrer toute une panoplie de composants responsive tels que les fenêtres modales, les slideshows ou autres formulaires. D’autant plus lorsque l’un des composants traités (la publicité par exemple) ne nous concerne pas plus que ça.

Bref, comme souvent dans ce genre de livres volontairement concis : c’est très vite lu, très intéressant et pertinent… et assez superficiel pour nous forcer à aller piocher ailleurs si l’on souhaitte véritablement approfondir l’un ou l’autre des sujets traités.