Elle s'est imposée sur les pages de présentation des grandes marques technologiques, avant de se répandre sur de nombreux sites. La bento grid, inspirée des boîtes à repas japonaises compartimentées, organise le contenu en blocs de tailles différentes, assemblés dans une grille harmonieuse. Voici pourquoi cette mise en page séduit autant, et comment l'utiliser à bon escient.
Le principe de la bento grid
Une bento grid découpe une section en cases rectangulaires de tailles variées : certaines occupent deux colonnes ou deux lignes, d'autres une seule case. Chaque case présente une information autonome : une fonctionnalité, un chiffre clé, une image, un témoignage, une citation. L'ensemble forme une composition équilibrée qui se parcourt d'un coup d'œil.
Les cases ont généralement des coins arrondis, des espacements réguliers et des fonds légèrement différenciés, ce qui renforce l'impression de modules bien rangés.
Pourquoi ce format fonctionne
La bento grid répond à plusieurs besoins actuels du design web :
- Elle hiérarchise naturellement : les cases les plus grandes accueillent les informations principales ;
- Elle se parcourt rapidement, chaque bloc portant un message court ;
- Elle mélange les formats : texte, image, graphique, vidéo, dans une même section ;
- Elle s'adapte bien au mobile, les cases se réorganisant en une seule colonne ;
- Elle donne une impression moderne et maîtrisée.
Les usages les plus pertinents
Ce format convient particulièrement à la présentation des fonctionnalités d'un produit ou d'un service, aux chiffres clés d'une entreprise, aux portfolios et réalisations, ou aux pages de présentation d'une offre. Il est en revanche peu adapté aux contenus longs et linéaires, comme un article ou une page juridique, qui restent plus lisibles dans une mise en page classique.
Les bonnes pratiques
Pour qu'une bento grid reste efficace et ne devienne pas un patchwork confus, quelques règles s'imposent :
- Un message par case, court et clair ;
- Une case principale qui attire le regard en premier ;
- Des espacements identiques entre toutes les cases ;
- Une palette restreinte pour garder l'unité de l'ensemble ;
- Un nombre de cases limité, généralement entre quatre et neuf.
La mise en œuvre en CSS
Techniquement, la bento grid repose sur CSS Grid, qui permet de définir une grille et de faire occuper plusieurs colonnes ou lignes à certains éléments. Avec quelques lignes de CSS, on obtient une mise en page qui s'adapte à la largeur de l'écran. Les zones nommées de CSS Grid rendent la composition particulièrement lisible dans le code. Le guide MDN sur CSS Grid détaille ces techniques.
Sur mobile, la grille passe généralement à une ou deux colonnes, en conservant l'ordre logique des informations.
L'accessibilité à ne pas oublier
L'ordre visuel des cases doit correspondre à l'ordre du code, pour que les lecteurs d'écran et la navigation au clavier suivent une progression logique. Les textes placés sur des images ou des fonds colorés doivent conserver un contraste suffisant. Et chaque case cliquable doit avoir un libellé explicite.
Éviter l'effet de mode
Comme toute tendance, la bento grid peut être utilisée à tort. Une page entière construite en bento, sans respiration ni contenu de fond, finit par fatiguer et ressembler à des dizaines d'autres sites. Utilisée pour une ou deux sections bien choisies, elle apporte au contraire du rythme et de la clarté.
Mon conseil
Si vous devez présenter plusieurs atouts, fonctionnalités ou chiffres clés, essayez la bento grid à la place d'une simple liste de blocs identiques. Mettez en avant votre argument principal dans la plus grande case, limitez le nombre de blocs et soignez la version mobile. Bien utilisée, elle rend une présentation à la fois plus lisible et plus mémorable.
