Je suis récemment tombé sur ce site Web, Gridless Design, et il a immédiatement touché une corde sensible. C’est quelque chose auquel je pense depuis longtemps – la façon dont le processus de conception habituel, où les concepteurs transmettent des maquettes statiques basées, si souvent, sur une grille à 12 colonnes, n’est pas adapté à l’objectif. Je sais que je suis loin d’être la première personne à penser de cette façon, mais de plus en plus avec les progrès de la mise en page CSS ces dernières années, la grille de conception ressemble plus que jamais à une gueule de bois de l’impression. Une solution à un problème que, sur le web, nous n’avons tout simplement pas.
Les fonctionnalités de mise en page CSS telles que flexbox et Grid nous permettent de créer des mises en page plus flexibles qui donnent la priorité au contenu. Nous parlons de dimensionnement intrinsèque et extrinsèque en CSS – dimensionnement basé à la fois sur le contenu et le contexte. La spécification promise des requêtes de conteneur donnera encore plus de pouvoir aux développeurs. Mais j’ai l’impression que le processus de conception est toujours bloqué dans le passé.
Les concepteurs prescrivent souvent qu’un élément doit couvrir (par exemple) quatre colonnes sur 12 sur un écran de bureau, sans savoir que leur idée de “colonnes” sur le Web n’a aucun rapport avec la manière dont la mise en page peut être réellement construite. Ce n’est pas un affront à un designer individuel, mais il semble que l’industrie dans son ensemble a du rattrapage à faire. Il y a un échec collectif à penser aux composants en termes de comportement – comment les mises en page répondront aux différents types de contenu et aux tailles de fenêtre d’affichage atypiques – par opposition aux points d’arrêt fixes.
Cela signifie que les développeurs jouent un rôle important pour combler les lacunes. Même si vous êtes un développeur qui ne se considère pas comme un designer, vous sont un designer. C’est à nous de décider comment une mise en page se comporte au niveau des tailles “intermédiaires”, des cas extrêmes, ou là où le contenu diffère de ce qui est fourni dans la conception. Cela nécessite de l’imagination et de la réflexion conceptuelle de la part du développeur.
Considérez le composant suivant, composé d’un titre, d’une image et d’un paragraphe de texte. Si nous avons pour instruction stricte de suivre une grille de conception, dès que nous commençons à redimensionner l’écran, la mise en page commence à être moins agréable.
Mais étant donné la liberté de construire une mise en page plus flexible, nous pouvons donner la priorité au contenu – en utilisant les tailles intrinsèques des éléments pour dicter la distribution de l’espace. Dans cette vidéo, le premier composant force chaque élément à coller à une grille prescrite. Presque immédiatement, la mise en page commence à sembler brisée lorsque nous redimensionnons la fenêtre, car chaque enfant de la grille devient proportionnellement plus étroit. Le deuxième composant conserve la largeur des éléments, mais comble l’écart entre eux à mesure que l’écran se rétrécit, ce qui donne une disposition sans doute plus agréable (sans parler de la lisibilité), bien qu’elle ne respecte pas une grille stricte.
Voir Pen Comparing rigid and flexible grids de Michelle Barker (@michellebarker) sur CodePen.
De même, cette citation du site Gridless Design résume bien comment une mise en page de carte peut répondre au contexte, plutôt que des colonnes fixes dictées par un design.
La syntaxe de grille CSS permet aux enfants de se redistribuer dans de nouvelles colonnes selon les besoins. Les colonnes peuvent être informées de leur taille par le contenu de leurs enfants ou une fraction de l’espace disponible. Cette technique est très puissante pour les mises en page de cartes, permettant aux cartes d’être aussi grandes qu’une colonne spécifiée le permet et de passer à la ligne suivante lorsqu’elle devient trop petite.
De nombreux développeurs adoptent l’innovation dans notre ensemble d’outils CSS. Andy Bell et Heydon Pickering ont créé Every Layout, qui aide les développeurs à apprendre à embrasser la flexibilité inhérente et l’inconnu du Web, pour créer des mises en page résilientes qui fonctionnent pour un contenu variable. Ce serait formidable de voir plus d’innovation dans les outils de conception pour encourager les concepteurs à penser de la même manière. Une bonne communication pendant le processus de conception et de développement peut également aider, même si tout le monde n’a pas ce luxe.
Mais les développeurs ne sont pas entièrement sans reproche. Une partie du problème réside également dans les frameworks CSS. Tailwind, Bootstrap et bien d’autres sont livrés avec des classes qui rendent simple la construction d’une mise en page qui adhère à une grille simple. Mais si nous voulons créer une mise en page flexible, robuste et sensible au contenu, vous devez regarder au-delà des cadres et écrire du CSS personnalisé. Paradoxalement, là où CSS Grid brille, ce n’est pas seulement dans la construction de mises en page qui adhèrent à une grille de conception stricte, mais dans la flexibilité d’intégration de nos composants. Mais la tentation de choisir la solution simple et rapide, plutôt que la meilleur un, est difficile de résister.
Il semble que nous ayons besoin d’un grand bouleversement de l’industrie ici. Nous ne devrions pas forcer le contenu dans une grille de conception rigide au détriment de l’expérience utilisateur. Les utilisateurs ne remarqueront pas si votre conception ne s’aligne pas parfaitement sur une grille à 12 colonnes. Ils sera remarquez s’ils ne peuvent pas utiliser le site que vous avez construit. Dans ces cas, la grille ne sert personne d’autre que l’ego du concepteur. C’est pourquoi je suis heureux de voir le site Gridless Design préconiser d’abandonner complètement la grille. Cela peut sembler une proposition radicale pour certains, mais l’article explique très bien comment d’autres dispositifs, tels que les principes gestalt d’espace, de proximité et de continuité, peuvent contribuer à une bonne conception sans grille.
Le site fournit une bien meilleure explication que celle que j’ai ici, alors jetez-y un coup d’œil.