I. Qu'est-ce qu'une grille ?▲
Une grille est par définition un « quadrillage » composé de repères :
- les colonnes, véritable armature, servent à positionner les éléments à l'horizontale ;
- les gouttières représentent les espaces entre chaque colonne ;
- les marges sont aussi appelées « blanc tournant ». Surtout utilisées en PAO dans le domaine du prépresse, les marges servent à aérer le texte, il en est de même pour les marges d'une grille ;
- les lignes (axes horizontaux), moins récurrentes mais tout aussi importantes, servent à positionner les éléments à la verticale.
II. Pourquoi utiliser une grille ?▲
Une grille a pour fonction de structurer un site Internet. Elle représente l'armature générale sur laquelle s'organise votre page Web et le positionnement de votre contenu est logiquement influencé par cette pratique favorisant ainsi sérieusement votre intégration CSS en la rendant plus rapide. Elle permet entre autres d'y voir plus clair lors de la conception d'une maquette.
Les éléments qui la composent sont parfaitement alignés et ce de façon proportionnelle. Tout est plus harmonieux et l'œil humain aime ça.
Pour finir, la grille se veut également utile dans l'adaptation de la structure d'un site Internet sur smartphone et tablette via les points de rupture qui améliorent sa lisibilité. Peu importe l'appareil utilisé, vous n'aurez aucun mal à anticiper le comportement de ces paliers d'adaptation vous garantissant ainsi un affichage optimal sur la grande majorité des résolutions (320px, 640px, 768px, 1280px…).
III. Les dimensions d'une grille ?▲
Certains standards existent, avec par exemple la valeur de 960px de largeur qui revient couramment pour s'adapter aux petites résolutions. N'étant pas une règle absolue, il est possible de prendre comme exemple le phénomène « responsive » qui s'accroît de jour en jour dû aux supports numériques dont le nombre augmente de façon fulgurante. Certaines estimations placent à 40 % la part du marché mobile en 2016. Ce fait, certains sites l'ont pris très au sérieux, ils utilisent donc des grilles adaptées.
Le nombre de colonnes qui composent une grille est souvent de 12, 16 ou encore 24, mais encore une fois, rien ne vous oblige à suivre cette tendance. Certains de vos projets forts en contenu nécessiteront sûrement plus de 24 colonnes avec des dimensions personnalisées, ceci s'applique également aux lignes, aux gouttières et aux marges.
IV. Quelle grille choisir ?▲
Le monde d'aujourd'hui étant source de disparités technologiques, il en résulte une diversité d'affichages écran allant du simple au triple… Vous comprendrez qu'il est difficile dans un cas comme celui-là de vous conseiller une grille en particulier. Il vous faudra par conséquent adapter cette dernière par rapport à votre projet.
Nous pouvons penser de la manière suivante : plus le site a de contenu textuel et imagé, plus le nombre de colonnes est important. À l'inverse, moins il y a de contenu, moins il y a de colonnes. C'est un principe de base.
Notez également que le nombre de colonnes impacte directement leur largeur respective. En effet, pour une grille composée de 12 colonnes, leurs largeurs sont bien supérieures à celles d'une grille composée de 24 colonnes (mathématiquement deux fois plus large sauf modification éventuelle des gouttières).
Dans le cas où vous avez une idée concrète de l'architecture qu'aura votre site, construisez ou téléchargez votre grille sur Photoshop et amusez-vous à placer vos premiers blocs comme vous l'imaginez en tenant compte du quadrillage.
Si à l'inverse vous semblez être victime du syndrome de la « page blanche », amusez-vous à placer toutes sortes de grilles. Quelquefois, le simple fait d'avoir sa grille positionnée devant soi suffit à stimuler votre créativité, vous commencerez à placer un bloc, puis un autre… Au bout du compte, vous trouverez votre armature plus facilement qu'avec un document vierge sur fond blanc.
V. Des outils sur le Web pour générer vos grilles▲
Pour les plus fainéants, il est possible de générer des grilles en ligne très facilement. Plusieurs sites proposent cet outil, nous en retiendrons cependant quatre qui sont selon moi les meilleurs.
V-A. ModularGrid.org▲
Vous entrez les valeurs qui vous chantent et vous téléchargez votre grille sur Photoshop. Trois choix de grilles vous sont proposés :
- PNG ;
- motif ;
- masque.
Vous choisissez celle qui convient au mieux, selon vos habitudes.
Vous pouvez également l'utiliser en tant qu'extension Photoshop.
Pour tester l'outil, rendez-vous sur ModularGrid.
V-B. Guideguide.me▲
Puisque nous parlons de Photoshop, il existe une extension appelée GuideGuide (compatible CS5 & CS6) permettant de générer des grilles à l'aide des repères (CTRL + : pour les afficher). Depuis le panneau GuideGuide, vous pouvez contrôler gouttières, lignes, colonnes, marges… Vous y trouverez d'autres fonctionnalités intéressantes que nous vous laissons découvrir sur le site officiel.
V-C. 960.gs▲
Un site complet qui vous propose un framework CSS simple mais sacrément efficace. Vous générez simplement votre grille avec les valeurs de votre choix et exportez votre code en CSS. Des grilles par défaut sont également téléchargeables où chaque fichier CSS contient une grille.
Chaque colonne est définie via une <div> et chaque div est en float. Les gouttières quant à elles sont définies par un simple margin-right, annulables par une surcharge avec les classes .alpha et .omega.
Pour tester l'outil, rendez-vous sur 960.gs
V-D. 978.gs▲
Il s'agit là d'une alternative au site précédent.
Concrètement qu'est-ce qui change ?
Déjà ce site est plus intuitif, plus convivial… Mais la véritable différence réside dans le fait que la grille 978.gs est légèrement plus large que celle proposée par 960.gs (18 pixels de différence).
Pourquoi choisir la grille 978px plutôt que la grille 960px ?
Cette nouvelle grille est issue d'un constat mettant en cause la largeur des gouttières de la grille 960 qui rendrait le montage des blocs difficile. Ce nouveau « standard » aérerait davantage votre structure en intégrant des gouttières plus larges.
Pour tester l'outil, rendez-vous sur 978.gs.
VI. Quelques exemples▲
Pour que vous perceviez mieux l'intérêt de cette technique de webdesign, voici quelques exemples de sites Internet dont les structures se basent sur des grilles :
Le site de Netmacom utilise le principe de grille. Il suffit d'observer la structure globale pour s'en rendre compte.
Le célèbre site marchand de produits High-tech, Materiel.net, connu pour la qualité de ses services, utilise également un système de grille sur son site Internet. La quantité de texte est telle qu'il aurait été très délicat d'outrepasser cette règle de bonne pratique.
La page d'accueil de 960.gs expose aussi différents exemples de sites Internet basés sur des grilles plus ou moins différentes.
VII. Conclusion et remerciements▲
Outre ses vertus bienfaisantes pour vos petits yeux, la grille vous permet finalement de gagner un temps précieux et n'est en aucun cas un obstacle à votre créativité. Bien au contraire, elle vous ouvre la porte à une analyse de l'espace plus précise et incontestablement plus facile ! De cette manière vous placez correctement vos blocs même si au départ vous ne saviez pas vers quelle structure vous tourner.
Souvenez-vous qu'une grille n'est pas qu'un moyen de remplir l'espace dont vous disposez, elle représente l'armature qui va vous aider à organiser cet espace.
Une fois que vous aurez saisi tout l'intérêt d'appliquer une telle méthodologie et que vous comprendrez son fonctionnement, vous pourrez alors vous tourner vers des constructions de grilles moins rigides pour créer des sites Internet plus élégants qui ne laisseront pas transparaître au premier coup d'œil la méthode avec laquelle ils ont été conçus.
Un des critères importants sur lequel on évalue la qualité d'un site Internet se concentre sur cette méthode de travail. Autrement dit c'est ce qui peut faire la différence entre un site professionnel et un site amateur.
Cet article a été publié avec l'aimable autorisation de Kévin Pinto. L'article original (Le webdesign selon les grilles) peut être vu sur le blog Netmacom.
Nous tenons à remercier f-leb et ClaudeLELOUP pour leur relecture attentive de cet article.