Quelques notes sur les grilles de mise en page

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



6 commentaires pour “Quelques notes sur les grilles de mise en page”

  1. [...] This post was mentioned on Twitter by Proutz, Bruno Bichet. Bruno Bichet said: Quelques notes sur les grilles de mise en page — http://j.mp/6BspfM [...]

  2. giz404 dit :

    A tester aussi : 960.gs, pas trop trop verbeux, assez souple, certes moins complet que blueprint, mais un très bon point de départ pour qui veut faire une mise en page rigoureuse.

  3. [...] Quelques notes sur les grilles de mise en page [...]

  4. [...] 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 pagePostscript 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). [...] [...]

  5. [...] déjà abordé la question des paramètres par défaut pour le Webdesign dans l’article Quelques notes sur les grilles de mise en page et je me demande aujourd’hui dans quelle mesure les frameworks CSS peuvent être [...]

  6. [...] Quelques notes sur les grilles de mise en page [...]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site