Physical Graffiti : blog d’un webdesigner curieux

M’intéressant depuis un petit moment sur les outils disponibles pour une mise en page optimale d’un site, je suis tombé sur pléthore de sites proposant chacun son outil et sa méthodologie. Pour y voir plus clair, je vais essayer de synthétiser mes trouvailles.

D’abord, un Framework kézako ? On peut être le définir comme un cadre de travail, intégrant une structure ou squelette, que vous utilisez pour démarrer vos projets de sites. Par exemple, au lieu de définir une remise à zéro globale, à chaque fois que vous commencez un nouveau projet, vous pouvez (devez, dans un souci d’efficacité) mettre en place des styles par défaut (neutres) qui seront modifiés au fur et à mesure de l’avancement du projet. C’est-à-dire :
- des CSS déjà remplies avec vos besoins en attributs bloc, texte, titre, etc.
- des pages vides appelant les CSS, JS et autres
- des pages appelant les divers formulaires
- des gabarits pour la mise en forme de catalogue produits
- etc.
C’est ce que nous appelons un environnement (gabarit) de travail CSS.
Vous ne voyez pas bien l’intérêt d’un Framework de ce style, et bien détrompez-vous.

La mise en place optimisée d’éléments ne date pas d’hier, dans le monde du Print, les graphistes s’aident de grilles pour caler les éléments et harmoniser la disposition des blocs, tout en facilitant la lecture. Car le rythme de lecture est lui aussi très important, comme l’explique très bien David Larlet sur Biologeek :

Si je le rapproche ici du rythme vertical c’est qu’il procure exactement la même sensation d’harmonie et de stabilité à un site, on peut passer ainsi d’un design amateur à quelque chose de plus professionnel, le rythme vertical peut même parfois se suffire à lui-même.
Mais de quoi parle-t-on concrètement ?
C’est une notion ancienne qui vient de l’imprimerie et qui prend en compte l’alignement et l’esthétique typographique en dosant judicieusement la taille des lignes (font-size) et des interlignes (line-height) mais aussi des marges (margin et padding) afin d’obtenir un résultat agréable et régulier. On parle de rythme car c’est vraiment ce qui va donner sa dynamique à la page et retirer toute notion de cacophonie de tailles de polices et de marges inadéquates.
source : www.biologeek.com

Personnellement, je n’utilisais pas de grille dans Photoshop jusqu’à récemment, en fait jusqu’à ce qu’un ami me démontre son efficacité.
L’avantage étant que l’on peut choisir la taille exact de son gabarit, et non pas comme 960.gs se trouver limité à ce format. Personnellement, en général je fais ma maquette en 980px voir 990.

Beaucoup de discutions passionnantes sur les avantages de certains et les inconvénients des autres, d’ailleurs je ne vois pas l’engouement pour Blueprint que je trouve assez sommaire dans ses possibilités.

Les frameworks CSS proposent donc un panel d’outils pour le développement web, en suivant des règles de mise en forme. Ces frameworks contiennent en général :

• une feuille de style permettant de supprimer les valeurs par défaut de certains attributs tel que les marges, les padding … (Reset CSS).
• un ensemble de styles de positionnement, tenant compte des proportions des blocs de la structure de la page (Grid CSS).
• un ensemble de styles, dits de typographie, qui fixent les tailles de différents éléments, du type titres et textes, afin de respecter le rythme vertical (Font CSS).

L’objectif des Frameworks est de nous soulager de choses comme :

• la gestion des subtilités de positionnement CSS
• la compatibilité du code avec les navigateurs

Ils permettent également de définir une structure standard plus facilement lisible.
Malheureusement le revers de la médaille existe. Car si le Framework apporte une rapidité de développement et un respect des règles du design, il apporte une certaine rigidité et une complexité supplémentaire dont personne n’a pas besoin.

Pour ma part, je trouve plus pratique de partir d’une grille dans Photoshop, ainsi chaque élément aura sa place, et la CSS aura des noms choisis, pas de surplus de code ou de noms exotiques.

Pour aller plus loin :

L’article de Mark Boulton explique bien pourquoi utiliser des grilles :
http://www.markboulton.co.uk/articles/
Et comment partir de zéro, en 5 étapes :
http://www.markboulton.co.uk/journal/

J’ai un petit faible aussi pour les générateurs de grilles qui vous laisse un peu plus de liberté :
http://www.gridsystemgenerator.com/
http://www.yaml.de/

Voici un tutoriel pour la prise en main de 960 et Blueprint :
http://www.lafermeduweb.net/billet/

The grid system propose 15 templates pour vos grilles :
http://www.thegridsystem.org/categories/templates/

Trip wire magazine propose carrément 45 Frameworks CSS, à trier :
http://www.tripwiremagazine.com

Très bon article chez Emmanuel Georjon sur les Frameworks CSS :
http://www.emmanuelgeorjon.com/

Sur La case de l’Oncle Tom, l’efficacité des Frameworks :
http://case.oncle-tom.net/

Deux bons articles aussi sur CSS4Design :
http://www.css4design.com/blog/
http://www.css4design.com/blog/frameworks