La grille, c’est un ensemble de repères servant à organiser les éléments d’une page : elle aide le webdesigner dans son travail de composition. Structurant la page et permettant la hiérarchisation des informations, la grille va contribuer au confort de lecture et d’interaction.
Depuis longtemps utilisée sur les supports imprimés, la grille est toujours d’actualité à l’ère du numérique. Mais attention le web n’a pas, et ne doit pas, forcément avoir les mêmes caractéristiques et contraintes que le support papier. Pour résumé : une page web n’a pas de hauteur ou de largeur prévisible contrairement à l’impression. La grille de mise en page sera donc pour nous un système de repères répartis verticalement et horizontalement, dont les écarts s’adapteront aux proportions de l’écran de l’utilisateur.
Anatomie de la grille
Il existe de nombreux modèles de grille, chacune correspondant à un besoin spécifique ou un cas concret. Nous allons donc nous attacher aux cas les plus communs dans la conception numérique. Bien entendu, il n’existe pas de règles immuables en matière de grille, il vous est tout à fait possible de créer votre propre système. Cependant, nous éviterons de réinventer la roue, l’idée est de s’appuyer sur un ensemble simple qui, d’une part, vous aidera pour votre composition de page et d’autre part, servira de référence pour l’intégrateur au moment de convertir votre création graphique en code HTML/CSS.
Par définition une grille de mise en page est constituée de repères (axes) verticaux et/ou horizontaux, séparés par des gouttières permettant de structurer le contenu. Il ne faut pas oublier les marges externes (pour les éventuels bords de la fenêtre) et internes (de chaque axe).
Il est assez facile d’imaginer différentes variantes possibles à cet exemple. Nous pourrons ajouter des axes, modifier leur largeur, ainsi que la largeur des marges et des gouttières.
Une des variantes les plus répandues est la grille du type bootstrap en 12 axes. Le nombre 12 étant divisible par 2, 3, 4, 6… il offrira de nombreuses possibilités de mise en page. Ainsi nous pourrons avoir des alternances de sections de 2, 3 ou 4 colonnes qui rythmeront notre page, tout en conservant l’équilibre et un alignement logique.
La mise en page élastique
Qui dit numérique, dit interface adaptable. Avant même de parler de mise en page responsive, la composition devra être pensée de façon élastique pour pouvoir s’adapter à une multitude d’affichage différents. C’est dans ce cadre-là que nous définirons une grille s’adaptant à la taille de l’écran de l’internaute. Il faudra alors trouver des règles simples pour conserver la qualité de composition sans tomber dans des schémas de structure ultra-complexe long à développer et impossible à faire évoluer. Le plus simple est d’avoir une structure fluide où les dimensions des gouttières et colonnes ont des valeurs exprimées en pourcentage.
C’est le cas de l’exemple suivant où nous pourrons voir sur la gauche une page affichée sur une largeur de 1400px et sur la droite un affichage sur une largeur de 980px.
Nous constatons que la structure de la grille reste identique. Les axes et les gouttières sont moins larges mais conservent strictement les mêmes proportions, seules les marges de droite et de gauche ont presque disparu sur la version 980 px. De cette façon le site conservera toute sa lisibilité et s’adaptera de façon harmonieuse aux contraintes définies par l’internaute.
Évidemment le principe fonctionne sur une certaine gamme de largeur. Sur un site totalement responsif, il sera nécessaire d’introduire des points de rupture (breakpoints) pour adapter la structure de l’interface.
La gestion de la grille en CSS
Côté intégration l’utilisation d’une grille permet un sérieux gain de temps et une meilleure compréhension de la logique de mise en page.
La logique de base est assez simple. il est important de comprendre que chaque axe possède une largeur, une marge de gauche et une marge de droite. C’est l’association de la marge de droite (margin-right) d’un axe et de la marge de gauche (margin-left) de l’axe positionné à sa droite qui définira la largeur de la gouttière.
En continuant sur l’exemple précédent en 12 colonnes, nous pourrons imager notre grille de la façon suivante :
Exemple d’application
Pour faciliter la compréhension de notre grille en CSS, passons par un petit exemple simple. Nous ne nous attarderons pas sur le positionnement des éléments l’un à côté de l’autre pour éviter de saturer notre code et mélanger les notions, pour cela, reportez-vous à l’article sur le modèle des boîtes flexibles.
Dans cet exemple, la largeur maximum de ma page est délimité par les 2 droites verticales en pointillés. Le bloc jaune, à gauche, est identifié à l’aide de class="bloc1", le bloc vert, à droite, est lui identifié à l’aide de class="bloc2". Ces 2 blocs sont regroupés dans un container identifié à l’aide de class="main_content".
Ce que nous pourrions traduire en HTML de la façon suivante :
<div class="main_content">
<div class="bloc1"></div>
<div class="bloc2"></div>
</div>La maquette fournie est dimensionnée en pixel. La largeur maximum du site est de 1200px. Chaque axe de la grille fait 70px de large, la gouttière fait 30px, la marge de chaque axe fera donc 15px.
Commençons par définir la largeur de nos blocs sans notion d’élasticité. Chaque valeur sera donc donnée en pixel (px)
.main_content{
max-width:1200px;
}
.bloc1{
width:370px;
margin-left:15px;
margin-right:15px;
}
.bloc1{
width:770px;
margin-left:15px;
margin-right:15px;
}Nous allons faire la même chose mais en appliquant la notion d’élasticité. Pour cela, il va donc falloir opérer un petit calcul pour convertir ces valeurs pixel (px) en pourcentage (%). Une simple règle de 3 nous suffira.
Largeur de l’axe : (70 * 100)/1200 = 5.833%
Largeur de la gouttière : (30*100)/1200 = 2.5%
Marge des axes : (15*100)/1200 = 1.25%
.main_content{
max-width:1200px;
}
.bloc1{
width:30.833%;
margin-left:1.25%;
margin-right:1.25%;
}
.bloc1{
width:64.166%;
margin-left:1.25%;
margin-right:1.25%;
}Nos éléments sont désormais élastiques. Quelle que soit la largeur que l’internaute donnera à sa fenêtre, nos blocs occuperont la même proportion de la page.
Trucs et astuces
Nous avons vu comment traiter notre grille dans le CSS. Cependant, force est de constater que d’opérer un calcul pour définir la largeur de chaque élément peut vite devenir laborieuse. C’est en prenant cette logique en compte que de nombreux développeurs imaginent des méthodes pour gagner du temps. Certains utilisons les modes de calcul intégrer au CSS.
.bloc1{
width:calc((100% / 3) - (1.25% * 2));
margin-left:1.25%;
margin-right:1.25%;
}D’autres laisseront les choses se positionner de façon naturelle, en s’appuyant sur le modèle flex ou grid du CSS Il existe aussi des outils de type « framework » permettant de gagner du temps dans la gestion des proportions de chaque élément. C’est notamment ce que propose Bootstrap que nous évoquions en introduction.
Côté graphiste, il existe aussi des outils pour faciliter la création de grille. C’est par exemple ce que propose le site 960 grid system ou d’autres comme hackerthemes, 1440px.com…
Pour conclure
Comme vous pourrez le constater, le sujet des grilles de mise en page est très vaste tant dans le cadre de la conception graphique que de l’intégration. C’est pour cela qu’il est important de définir ses choix en amont de la création pour faciliter le travail de chaque acteur du projet. Le bon choix d’une grille de mise en page donnera un bon point de départ au travail de conception et conditionnera le rendu visuel du site en fonction, en autre, du nombre d’axes, de leur largeur et de la largeur des gouttières