Gouttières - Rembourrage et marge pour les colonnes avec fond ou bordure

Quelles sont les directives de conception recommandées pour les gouttières lorsqu'une colonne (ou une boîte ou tout module de disposition) a sa forme clairement visible car elle a son propre arrière-plan ou bordure?

En règle générale, on mettrait de l'espace entre le bord de la boîte et son texte. Mais d'où évoquer cet espace? En agrandissant la boîte ou en réduisant le texte ?

Pour illustrer, voici quelques options (mais pas toutes) ...

(De plus, j'aurais pu utiliser n'importe quelle grille avec n'importe quel nombre de colonnes et n'importe quelle largeur - cela ne sert que d'exemple - la vraie question pourrait être posée à chaque fois qu'une mise en page chevauche des gouttières.)

J'ai parcouru une pile d'écriture sur des mises en page basées sur une grille, mais jusqu'à présent, je n'en ai vu qu'une qui traite du problème: Nudge Your Elements de Khoi Vinh.

Qu'est-ce que je rate? Ou n'y a-t-il simplement pas de ligne directrice claire?

Étant donné que l'une des motivations des mises en page basées sur la grille est d'augmenter le sens de l'alignement global, je suppose que l'on pourrait soutenir que la décision dépend de ce qui demande plus d'alignement; la boîte ou son contenu?

Sauf erreur de lecture, Khoi Vinh plaide pour l'option 3 dans son article.

Je me retrouve dans les deux sens entre l'option 3 et l'option 6. Avec l'option 3, la boîte est alignée, mais son texte semble à l'étroit. Mais en utilisant l'option 6, on se retrouve sans boîte ni texte aligné (bien que l'on puisse dire que le milieu implicite entre le bord du texte et la bordure de la boîte est la «chose» qui est maintenant alignée).

Au-delà du Web, aucune de mes lectures sur la conception de livres et les canons de construction de pages ne parle de ce problème non plus. Je peux voir comment les canons fonctionnent pour la grande majorité de l'impression de livres `` lettre noire sur fond clair '', mais à la minute où l'on ajoute de la couleur à une mise en page (ou inverse un schéma en noir et blanc), la question de la gouttière revient.

Mmm, je suppose que la question est; Existe-t-il des lignes directrices pour choisir entre les options que j'ai illustrées - ou ai-je osé aller au-delà du droit des concepteurs et la question concerne-t-elle simplement «ce qui semble et se sent bien» ?

Chaque fois que vous utilisez une grille, vous devez l'utiliser de manière cohérente, sauf si vous avez un élément (généralement pas plus d'un sur une page donnée) pour la violer pour une bonne raison - pour la faire ressortir ou pour changer l'ambiance de la page . Le contraste doit être audacieux et clairement délibéré pour que cela fonctionne. (Par «travail», je veux dire que cela ne ressemble pas à une erreur.)

Une grille, strictement suivie, est en paix. Il y a peu ou pas de tension; les choses apparaissent là où l'œil s'attend à ce qu'elles soient, et le lecteur n'est jamais surpris ni mis mal à l'aise.

Dans ce cas, si votre arrière-plan viole un peu la grille, comme dans # 4, cela ressemble à une erreur. C'est gênant. L'absence totale de gouttière encombre la boîte contre les autres colonnes. Contre la direction ouverte du texte, qui établit une attente d'ouverture, c'est clairement faux.

0 ne fournit aucun contraste, de sorte que la deuxième colonne est indifférenciée des autres. Dans certaines circonstances, c'est ce que vous voulez.

Les exemples de «demi-gouttière» des # 5 et # 6 redéfinissent la gouttière, la rendant plus étroite. Ils redéfinissent en fait la grille entière horizontalement et verticalement, car dans ce cas, la gouttière finit par être exactement la même que l'espacement des lignes. C'est mauvais pour le texte en soi, mais peut fonctionner avec la boîte. Dans # 6, cependant, vous avez un espace blanc disproportionné de chaque côté du texte par rapport au haut et au bas. C'est gênant et inconfortable car cela n'a aucun sens. # 5 serait préférable, car l'espace blanc est plus uniformément réparti. Pour la même raison, le n ° 3 est préférable au n ° 2.

Dans l'ensemble, je serais d'accord avec Lauren et recommanderais le n ° 3 comme meilleur coup. C'est également le meilleur cas général, quel que soit le nombre de colonnes.

Il y a des règles. Ils peuvent certainement être brisés si vous avez une bonne raison, mais chaque fois que vous le faites, vous devez être déterminé, audacieux et clairement "tel que conçu". Helvetica Black associée à Georgia fonctionne parce qu'elles sont différentes; Le trébuchet associé aux grilles Verdana sur les nerfs parce qu'ils ne sont pas assez différents. Une grande boîte carrée et rouge qui s'étend sur une colonne et demie pourrait fonctionner; un gris légèrement éteint ne le sera pas.

Je vote pour l'option 3. Les bords de la boîte grise définissent la colonne verticalement, de sorte que ces lignes ne peuvent pas être violées (sans raison). Les gouttières doivent être les mêmes pour les trois colonnes, insérez donc le texte dans la zone grise. L'encart de l'option 2 est un peu trop profond.

C'est ce que j'ai l'habitude de faire sur papier, donc ça a l'air "bien" sur le Web aussi.

Si c'est pour la conception Web, je déconseille fortement d'utiliser un rembourrage dans le sens horizontal si vous êtes préoccupé par la cohérence entre les navigateurs. Différents navigateurs traitent les divs et le remplissage suffisamment différemment pour que la présentation puisse se casser.

Quelle que soit la façon dont vous allez, utilisez uniquement la marge horizontalement. Cela nécessite d'ajouter une ou deux classes pour obtenir la disposition exacte que vous souhaitez (par exemple, un ensemble de marges pour le div et un autre pour le paragraphe), mais à long terme, c'est plus fiable. Le rembourrage vertical n'est généralement pas un problème, cependant.