Quelques notes sur les grilles de mise en page

A mesure que les techniques des langages du web l’ont permis, des designers web talentueux ont travaillé à l’élaboration d’environnement de travail permettant de mettre en place des systèmes de grille adaptés aux contraintes de la création de pages web. Contrairement à l’imprimé où le langage de description de page Postscript d’Abode est un standard, il n’existe pas sur le web de dispositif « officiel » pour créer des colonnes à l’épreuve des différences de rendu entre les agents utilisateurs (les navigateurs).

L’arrivée des frameworks CSS a popularisé le placement des blocs en se basant sur une grille et le monde du webdesign découvre peu à peu que le design graphique est une pratique plusieurs fois millénaire qui a forgé ses propres règles pour faire en sorte que le contenu devienne message grâce au contenant (la forme au service du fond et vice-versa).

Si les grilles s’imposent rapidement c’est qu’on les trouve dans les meilleures productions graphiques (sur le web ou ailleurs). Leur absence n’est pas synonyme de travail de moindre qualité (loin de là), mais il est indéniable qu’elles permettent de donner un aspect professionnel à un design banal.

Ces grilles sont une habitude pour celles et ceux qui viennent du monde de l’imprimé où des logiciels comme XPress ou InDesign encouragent la mise en place de gabarits à partir de marges, de colonnes et de gouttières. C’est d’ailleurs une pratique courante dans les logiciels professionnels de permettre le réglage des paramètres initiaux dès la création d’un nouveau document.

Or, sur les web, les professionnels ont tendance à se servir d’éditeurs plus ou moins sophistiqués pour saisir le code des différents langages nécessaires pour l’intégration d’une charte graphique. Un logiciel comme Dreamweaver peut passer pour un logiciel professionnel pour la création de site web, mais le code produit en mode Création ne m’a pas encore convaincu.

Cette idée de réglages initiaux à la création d’un nouveau document m’a fait penser aux options proposées par la petite application Boks qui permet en quelques clics de générer l’ensemble des fichiers du framework CSS Blueprint après avoir déterminé la largeur de l’empagement et de la gouttière ainsi que le nombre de colonnes.

Le seul problème de Boks c’est qu’il ne propose rien d’autre que Blueprint que je trouve assez verbeux. Je préfère par exemple un framework comme Boilerplate qui n’impose pas de système de grille et qui est plus léger.

Pour tout savoir ou presque sur les grilles de mise en page, voici l’excellent The Grid System qui propose des tonnes de ressources sur le sujet : sélection d’articles, outils, livres, modèles de grilles, etc. Profitez-en pour afficher la grille du site et admirer comment l’auteur la faire vivre en fonction des rubriques.