Excepté certains sites Web très créatifs, rien ne ressemble plus à un site Web qu’un autre site Web. Et cela ne fait que s’amplifier depuis l’utilisation massive des blogs et CMS. Nous faisons et refaisons sans cesse les mêmes opérations de préparation, de structuration et de répartition du contenu.
Chacune des zones de la page doit également être à des dimensions qui respectent une harmonie visuelle globale afin de préserver la lisibilité de l’ensemble. Ces règles de proportionnalité ne s’appliquent pas qu’au Web, on les retrouve pour définir tout type d’interface, qu’il s’agisse d’un magazine, d’un écran de télévision ou de téléphone, etc.
C’est là qu’interviennent les grilles ou l’art et la manière de répartir le contenu dans une matrice, à la façon d’un journal qui voit ses articles structurés en colonnes. D’ailleurs, Photoshop lui-même ne le propose-t-il pas lui aussi ?
Utilisation d’un framework
On trouve sur le Web divers frameworks pour travailler en mode grille. Sachant que tous fonctionnent sur le même principe, arrêtons-nous sur l’un des plus communs, 960. Celui-ci se présente sous forme de trois fichiers CSS : 960, reset et text. Dans l’ordre, le premier contient l’ensemble des règles nécessaires au fonctionnement de la grille, le deuxième réinitialise les déclarations par défaut des navigateurs et le troisième propose une mise en forme du texte… Libre à vous de le modifier, de le compléter et de l’adapter selon vos besoins.
Première prise en main
L’utilisation d’un framework est très basique, il suffit dans un premier temps d’importer les trois CSS dans le document HTML puis de construire la structure de la page. Prenons un exemple classique avec un header, un nav, un content et un footer, le tout contenu dans un main-content (cf. schéma 1 et code 1).
Tout passe par l’utilisation des classes du document 960.css. Le framework propose deux modes de travail en 12 ou 16 colonnes, il suffit donc d’ajouter la classe “container_12” (ou 16) à main-content pour définir le mode choisi. Ensuite, pour attribuer une pleine largeur au header, ajoutez-lui la classe “grid_12”. Pour répartir nav et content, disons en un tiers/deux tiers, il suffit d’ajouter une classe “grid_4” à nav et une “grid_8” à content (4 + 8 = 12). Et ainsi de suite…
Vous pouvez imbriquer autant de conteneurs enfants que vous souhaitez dans les conteneurs parents. Usez de la classe “grid_N” afin d’occuper le nombre de colonnes voulues. Vous risquez d’avoir quelques soucis de marges, vous avez pour cela accès à des classes alpha et omega qui suppriment respectivement les marges gauche et droite de l’élément affecté.
Enfin, il existe également des classes prefix_N et suffix_N qui apportent des padding gauche et droit aux éléments... Voilà, nous pourrions aller encore plus loin, mais cela dépasserait l’objectif de ce sujet.
Conclusion ?
Le Web n’est pas comparable à un écran de télé ou à un format standard de magazine. Il voit sa représentation étroitement liée au type d’écran de l’utilisateur et surtout à l’espace sans cesse redimensionné de la fenêtre du navigateur. Malgré cela, l’utilisation des grilles peut parfois nous être d’une grande utilité…
Par
Birnou Sébarte, extrait de
Web Design n°15