Grid / Grille
Le CSS Grid Layout est un système de mise en page fondé sur une grille. Cette grille peut contenir des lignes et des colonnes qui facilitent la conception des pages web.
C'est quoi ?
Les grilles sont formées des alignements qui vous aident à mettre de l’ordre dans le contenu de votre site web ou application mobile. Une grille est utile pour l’organisation des éléments. Elle offre une bonne expérience utilisateur puisqu’elle vous permet de mieux contrôler les emplacements des éléments de votre contenu tels que : le logo, les titres, les images etc. De plus, la grille accélère le processus de conception.
A quel moment faut-il le faire ?
La grille est établie pendant la phase conception d’un site ou d’une application web.
Pourquoi faut-il le faire ?
Sans l’utilisation des grilles, il serait plus difficile d’organiser les éléments de votre contenu web. Elles vous aident à créer une bonne expérience utilisateur (UX) .Elles permettent également aux visiteurs de savoir comment naviguer sur votre site web et comment trouver rapidement ce dont ils ont besoin.
Comment ça se fait ?
Il existe cinq principaux types de grilles que vous pouvez appliquer lors de la conception de votre site web. Ils sont les suivants :
- La grille de ligne de base : elle se définit par rapport à l’emplacement du texte. C’est l’espacement entre les lignes de base. Cette grille est efficace quand il y a plusieurs textes à lire. En effet, quand le texte est trop serré, votre visiteur va abandonner la lecture de votre contenu.
- La grille à une seule colonne : appelée également la grille manuscrite, c’est la grille la plus simple. Il s’agit des grands blocs de texte et d’images. Généralement, elle est sous forme d’une grande zone rectangulaire à l’intérieur de la page web.
- La grille de colonnes : Ces grilles sont utiles pour la séparation du texte, des photos et des illustrations. Il est possible d’avoir jusqu’à 16 colonnes dans la même page. Les photos et les textes peuvent être placés dans une seule colonne ou bien vous pouvez les partager sur plusieurs colonnes.
- La grille modulaire : Certes , elle ressemble à la grille de colonne.Mais , elle vous offre la possibilité d’ajouter des lignes. En d’autres termes, la grille modulaire est composée de plusieurs modules qui ont une forme rectangulaire.
- La grille de hiérarchisation : l’objectif de cette grille est de classer les éléments de votre site selon l’ordre d’importance. Ainsi, le contenu de votre site web sera plus clair et accessible à votre utilisateur.
Mot de la fin
La grille joue un rôle important lors de la conception de votre site ou application. Elle est indispensable pour l’organisation de votre contenu. Vous devez l’utiliser puisqu’un site web qui propose des éléments clairs, organisés et accessibles attire plus de clients qu’un site mal organisé.