Pourquoi les différentes grilles de conception négligent-elles l'espacement horizontal?
Qu'il s'agisse de systèmes de grille à colonnes 960grid ou Fluid ou 9/12/16/20 ... ils tiennent tous compte de l'espacement vertical, mais jamais de l'espacement horizontal. Il est vrai que nous visionnons les sites de haut en bas et que nous ne concevons pas nécessairement pour une hauteur limitée, mais je voudrais tout de même savoir comment appliquer de manière fiable un espacement horizontal correct afin de compléter un design vertical. Quelles ressources sont disponibles pour les grilles horizontales?
Comme vous l'avez dit, les sites sont généralement vus verticalement, ce qui explique pourquoi l'accent est mis sur les systèmes de grille qui sont populaires aujourd'hui.
Le problème avec l'espacement horizontal est que vous êtes limité à ce que vous pouvez réellement contrôler. Les navigateurs permettent aux utilisateurs d’agrandir/réduire facilement le texte et d’autres éléments. Lorsque cela se produit, le contenu reste dans le système de grille configuré, mais sa hauteur augmente en bas de la page.
Les grilles de conception Web se concentrent sur les grilles verticales en raison de la nature du rendu du navigateur. Le contenu n'est pas connu, ni la taille du texte. L'espace utilisé par du texte arbitraire est donc inconnu. Ceci est géré dans le rendu du navigateur en faisant passer le texte, d'abord à droite, et lorsque l'extrémité droite du conteneur est atteinte, verticalement vers le bas jusqu'à une nouvelle ligne. Cela signifie que la direction verticale est celle qui doit être flexible et non contrainte. Vous ne pouvez pas contraindre les deux dimensions à moins de savoir ce que sera chaque pixel. Dans ce cas, vous pouvez simplement envoyer une image avec la disposition exacte souhaitée au lieu du texte html.
Essayez de baser votre texte. Cela lui donnera un très bon rythme vertical qui, en conjonction avec le système de grille, devrait vous donner à peu près tout ce que vous recherchez.
Voici quelques liens pour vous aider à démarrer:
http://baselinecss.com/ http://www.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/ - http://www.smashingmagazine.com/2008/04/23/5-principles-and-ideas-of-setting-type-on-the-web/
Juste comme une mise à jour: Smashing Magazine have n post contenant beaucoup d'informations sur la typographie sur le web et il y a des infos là à propos de grilles de rythme vertical et de ligne de base