La grille infinie
Par Chris Armstrong
Aujourd’hui, nous créons pour un média dépourvu de dimensions fixes, un média qui peut et qui pourra s’adapter pour mieux coller à son environnement. Un média capable d’afficher une mise en page unique sur un smartphone, un panneau d’affichage dans Times Square et tout ce qui existe entre les deux.
Nous concevons pour un canevas sans limites, qui nécessite un système de grilles infini.
On pense souvent que pour faire un design réactif il faut prévoir plusieurs mises en page : mobile, tablette, ordinateur de bureau… Mais les supports de dimensions intermédiaires ont tendance à souffrir. Ainsi nous parvenons à des mises en pages qui paraissent bonnes dans des dimensions spécifiques (320, 720, 960) mais beaucoup moins bonnes pour toutes les autres tailles. Si votre site semble parfait sur votre iPhone 4 (640x960), ce sera un peu différent pour un visiteur muni d’un Nokia Lumia (480x800), ou pour la fenêtre de votre navigateur mesurant 685x308 que vous venez d’ouvrir sur votre ordinateur de bureau. Il se peut même qu’il ait une drôle de tête sur le tout nouvel iPhone 5 (640x1136) que votre cousin vient d’acquérir, et je ne parle même pas des innombrables autres périphériques plus anciens et moins répandus.
À mesure qu’apparaissent des écrans de dimensions intermédiaires, focaliser notre attention sur quelques « dimensions clés » n’offrira qu’une expérience médiocre pour un nombre croissant d’utilisateurs. À la place, nous avons besoin de créer un système de grilles qui tienne compte de l’absence de dimensions fixes de ce médium : une mise en page unique aux états multiples permettant de passer, sans heurts, de l’un à l’autre et de fournir une structure à notre contenu, quelle que soit la taille de l’écran.
Qu’est-ce qu’un système de grille infini ?
Les grilles sont simplement des outils pour résoudre visuellement des problèmes. Créer une mise en page peut s’apparenter à un puzzle. Vous avez un paquet de pièces et vous devez imaginer comment elles pourraient s’emboîter. Quand vous construisez une grille, vous créez les limites de la mise en page : les relations et les contraintes qui définissent un environnement dans lequel il est possible de définir une solution adaptée. Quand vous construisez une grille infinie, vous ne mettez pas en place les limites pour une mise en page donnée, mais un système de mise en page, avec plus d’inconnues que nous ne pouvons imaginer. Si vous définissez les relations importantes, les valeurs intermédiaires se calculeront d’elles-même.
Pour qu’une grille soit utilisable, elle doit être basée sur ce que nous connaissons. Dans les médias traditionnels, les dimensions du canevas sont une contrainte connue. Il est donc logique de partir des bords et de définir une grille proportionnelle à ceux-ci... Avec le numérique le support est inconnu, fournissant de piètres fondations sur lesquelles baser une mise en page. Basez-vous plutôt sur ce que vous connaissez : le contenu.
Pour concevoir des designs réellement adaptés au web – quel que soit l’appareil – nous devons nous débarrasser de l’idée que nous créons des mises en page pour un canevas donné. Nous devons aborder le problème dans l’autre sens, et créer des mises en page à partir de leur contenu.
Mark Boulton, A Richer Canvas
Lorsque l’on conçoit en partant des bords, les dimensions du canevas constituent la constante sur laquelle se base toute la grille. Tout est mesuré et positionné par rapport à elles. Concevoir à partir du contenu signifie repérer une constante dans votre contenu –cela peut être la taille idéale d’un paragraphe ou les dimensions d’une annonce– et construire votre grille à partir de celles-ci en investissant l’espace restant.
Ceci dit, les mises en pages qui s’agrandissent pour utiliser l’espace disponible existent depuis longtemps –après tout, les mises en pages fluides sont quasiment nées avec le web– mais très peu de mises en page peuvent être étirées ou compressées indéfiniment sans que les relations entre les composants ne se cassent. C’est là que les états rentrent en jeu.
Les états
Les mises en page fluides peuvent être le plus souvent comparées à l’eau, mais l’eau n’est pas constamment fluide. La molécule H2O possède trois états distincts. Selon la température, elle peut être solide, liquide, gazeuse, passant sans heurts de l’un à l’autre en des points spécifiques (0°C, 100°C). Une grille infinie aussi possède de multiples états (colonne simple, colonnes multiples…) et les transitions devraient également s’effectuer sans problèmes de l’un à l’autre. Par exemple, l’état glacé est un état approprié pour l’eau quand la température est basse. Une mise en page composée d’une colonne simple devrait être l’état approprié issu d’une grille infinie sur les petits appareils.
Le changement d’état de l’eau est causé par la réorganisation de ses molécules. Quand une grille infinie change d’état, nous réorganisons ses composants.
Composants
Chaque état dans une mise en page réactive a tendance à être constitué des mêmes composants, comme une galerie d’images ou un menu de navigation. Cependant, comme Ethan Marcotte l’a récemment souligné, l’aspect que peuvent prendre ces composants peut dramatiquement varier d’un état à un autre, engendrant un changement au niveau d’une ou plusieurs des caractéristiques suivantes :
- Hiérarchie : quels sont l’ordre et la prééminence dans la mise en page ?
- Densité : combien de détails doit-on montrer ?
- Interaction : doit-on mettre en place une liste de liens ou une liste déroulante ? Un carrousel ou un groupe d’images ?
- Largeur : est-elle fixe (une largeur spécifique), flexible (précisée avec
max-width), ou proportionnelle (indiquée à l’aide de pourcentages) ?
Garder à l’esprit que les caractéristiques de chaque composant peuvent changer d’un état à l’autre permet de s’assurer que notre système de grille produira la mise en page adéquate pour l’espace disponible. Observez dans cet exemple comment les différents composants adaptent leur largeur (entre fixe et flexible) et leur position selon les états.
Concevoir un système de grilles infini
Nous découvrons à peine le principe de grille infinie, mais quelques techniques ont déjà prouvé leur efficacité. Pour débuter, voici quelques règles pour vous guider :
1 – Utiliser des unités proportionnelles
Concevoir une grille consiste à décider quels éléments doivent être proportionnels et par rapport à quoi. Quand vous choisissez une unité, vous attachez une dimension à des variables particulières :
- En pixel, les dimensions d’un élément sont liées à une résolution particulière.
- En
em, les dimensions de l’élément sont proportionnelles à sa taille de police ; une valeur enremest relative à la taille de police de base du document. - En pourcentage, les dimensions d’un élément dépendent de son conteneur.
- Avec les unités
vwetvh, les dimensions de l’élément dépendent de celles de la fenêtre du navigateur (le viewport).
Avec les pixels et autres unités absolues, une mise en page ne fonctionne que dans certaines situations précises : ces unités imposent donc une sorte de date de péremption. Les unités proportionnelles (em, rem et pourcentages) vous permettent de définir les relations importantes entre les éléments, et sont un premier pas indispensable pour aboutir à une grille indépendante des dimensions du navigateur.
2 – Débuter avec les extrêmes, puis travailler les intermédiaires
Chaque mise en page possède un éventail naturel de solutions optimales pour son contenu. Jusqu’où pouvez-vous l’étirer avant qu’elle ne commence à casser ? Jusqu’où pouvez-vous la réduire avant qu’elle ne commence à s’effondrer ? Par exemple, si la largeur disponible est inférieure à 45 caractères par ligne, votre mise en page va commencer à se sentir à l’étroit. S’il y a de part et d’autre de votre mise en page un espace vide qui est plus large qu’une colonne, le contenu donne une impression d’écrasement. Ces situations extrêmes diffèrent en fonction de chaque design et dépendent largement de votre contenu.
Concevoir d’abord pour les extrêmes vous contraint à imaginer la manière la plus optimale de présenter votre contenu à chaque extrémité de l’éventail. Tenez compte de la hiérarchie, de la densité, des interactions et de la largeur de chaque composant dans l’état le plus étroit, puis procédez de la même manière pour l’état le plus large.
Par exemple, mon état le plus large fait 75em de large (si je vais au-delà, l’espace vide commencera à faire paraître le contenu trop petit) et le plus étroit mesure 34em (si je descends en-dessous, on n’est plus dans les mesures optimales).
Dans l’état le plus large, afficher une liste horizontale (interaction) pour le menu en haut (hiérarchie) est la solution la plus porteuse de sens. Mais dans l’état le plus petit, il sera plus logique de déplacer le menu en bas de la mise en page (hiérarchie) ou de l’inclure dans une liste déroulante dont les items seraient tour à tour montrés ou cachés (interaction). Si vous concevez ces deux situations indépendamment, cela vous permettra d’être plus objectif quant à la meilleure solution pour chaque état, plutôt que de vous obliger à appliquer une solution qui devra s’adapter à n’importe quel état.
3 – Changer d’état lorsque les relations se rompent
Une fois que vous avez travaillé sur les extrêmes, il est temps de déterminer à quel moment un état donné doit laisser sa place à l’autre. Comme l’eau se transforme en vapeur quand ses molécules s’éloignent trop, un état doit laisser sa place à un autre lorsque les relations entre ses composants commencent à se rompre : par exemple, lorsque les dimensions sont devenues trop larges ou que le logo aligné à gauche est maintenant trop loin du menu aligné à droite, au point que le lien visuel entre les deux est cassé.
C’est là que des prototypes de tests sont bien utiles. Il est incroyablement difficile de prévoir exactement à quelle largeur (par rapport au contenu) une mise en page doit passer d’un état à un autre. Un prototype vous autorise à redimensionner facilement votre navigateur en vue de trouver le point où les relations se rompent et ainsi y ajouter un point de rupture. De nouveaux outils (comme Gridset ou Responsive.is) rendent plus faciles que jamais la création et le test de prototypes réactifs. Vous n’avez donc aucune excuse pour ne pas le faire.
Le nombre d’états qui vous sera nécessaire dépendra du niveau de changement de votre mise en page, d’un extrême à l’autre. Par exemple, mon état le plus petit possède une colonne simple avec un menu déroulant et mon état le plus large trois colonnes et un menu étendu. Cependant aucun des deux ne rend vraiment bien entre 34 et 53em. J’ai donc ajouté un état intermédiaire qui garde la colonne simple du plus petit état, mais étend le menu et scinde le pied de page en trois colonnes pour tirer parti au maximum de l’espace disponible. Cela constitue une bonne transition entre les deux extrêmes.
A chaque changement d’état, souvenez-vous qu’il convient de reconsidérer la hiérarchie, la densité, les interactions et la largeur de chaque composant. Peut-être que votre colonne de contenu principal devrait maintenant posséder une largeur fixe pour être sûr que ses dimensions ne seront pas trop vastes, ou peut-être avez-vous de la place pour ajouter d’autres informations (densité) à votre navigation ?
4 – Transcender les extrêmes
Vous avez maintenant une mise en page réactive aux états multiples, grâce à laquelle les transitions s’effectuent harmonieusement de l’état le plus petit au plus large. Mais elle possède seulement un éventail de tailles compris entre 34 et 75em. Qu’en est-il lorsque l’espace disponible est plus petit ou plus grand que dans ces états ? Comment réaliser une mise en page qui s’étend réellement de zéro à l’infini ?
Dans l’état le plus étroit l’espace est précieux, nous avons donc besoin de l’optimiser au maximum. En dessous de 20em j’ai réduit (mais pas enlevé) les marges, diminué l’espace entre les lignes (line-height) et décalé les listes à puces. En gros, j’ai fait ce que j’ai pu pour optimiser la lisibilité, même si l’espace disponible est loin d’être optimal.
A l’autre extrémité du spectre, notre problème est le trop-plein d’espace, et surtout d’espaces vides. Cela rend notre contenu minuscule, nous avons donc besoin de trouver des solutions pour contrebalancer cela. Malheureusement, augmenter simplement la taille de notre mise en page sans réfléchir ne marche pas toujours, car nous commençons à nous heurter à la distance de lecture. Si vous augmentez la taille de votre texte pour maintenir à peu près 60 caractères par ligne, les caractères seront si grands que je devrai tourner la tête pour lire une ligne d’un bout à l’autre, ce qui n’est pas bon du tout.
Intéressez-vous plutôt à des éléments comme les titres, les séparateurs ou les images que vous pouvez agrandir avec le canevas, ce qui vous aidera à ancrer visuellement votre mise en page sans détruire sa lisibilité. Dans mon exemple, l’image de la règle qui s’étend sur toute la largeur permet d’ancrer le design au sein de l’espace vide et à 75em je commencerai à agrandir les éléments relatifs à la taille de la surface de la fenêtre du navigateur (viewport) en utilisant les unités vh. Le corps du texte commence à être trop large pour une lecture confortable à 90em, j’utilise donc l’unité rem pour permettre une taille de lecture confortable pendant que les autres éléments s’agencent autour de lui.
Dans chaque cas, le but est de tirer parti au maximum de l’espace disponible, par rapport au contenu, pour optimiser la lisibilité et la présentation.
Vers l’infini, et au-de—
En fait non, l’infini suffira déjà bien.
Utiliser une grille prédéfinie est pour moi aussi étrange que de vouloir partir d’une palette de couleurs prédéfinies.
Je n’ai pas voulu parler de cas particuliers ici, parce que ça n’existe pas. Chaque mise en page est différente et il n’y a pas de nombre magique qui fonctionne à tous les coups.
Ce qu’il faut c’est plutôt déterminer les relations entre les éléments, et les cas particuliers se résoudront d’eux-mêmes. Nous n’avons pas encore toutes les réponses, mais nous pouvons ainsi commencer à poser les bonnes questions.
C’est un problème qui mérite qu’on s’y intéresse et qu’on le résolve. Pas uniquement pour nous, mais aussi pour tous ceux qui travaillent sur les médias numériques de demain – et cela pourrait représenter beaucoup de monde. Un nombre infini même.
http://www.alistapart.com/articles/the-infinite-grid/