Règles de mise en page web

CSS et mise en page

Un des nombreux problèmes de la mise en page web, c’est d’avoir un beau grisé typographique. On nous rabâche assez que les internautes, ne lisent pas sur internet (même si c’est en parti faux). On peut fournir aux lecteurs des textes agréables à lire.

Un eccueil assez connu c’est la justification des textes. Peu de site l’utilise, alors que beaucoup de graphiste l’emploi en print. Il est vrai que sans aucun paramétrage préalable en CSS l’interprétation est plutôt approximative et le résultat très décevant, la césure n’étant pas automatique sur les navigateurs, on aura des colonnes avec un grisé peu agréable à la lecture. Voici donc l’occasion de revoir quelques règles HTML et CSS nous permettant des mises en pages agréables à lire.

Un web sémantiquement beau à lire

Les citations

Je ne reviens pas sur les bases, tel que les balises H1,H2,p…En revanche si la balise <p> est un peu fourre-tout n’oublions pas le sens du propos qui doit nous indiquer l’utilisation des balises adéquates :

Dans le cas d’une citation longue, il conviendra d’utiliser les balises <blockquote>. Dans le cas d’une citation courte, utiliser les balises <q> et dans le cas d’une très courte citation à l’intérieur d’un paragraphe ou d’une phrase, utiliser les balises <cite>

Les acronymes

La balise <abbr> définit une abréviation ou un acronyme. En marquant les abréviations grâce à la balise , elles peuvent ainsi donner des informations utiles aux navigateurs et aux moteur de recherches.

les expressions et définition

Si le mot ou l’expression et sa définition sont contenu dans la même phrase, il vous faudra utiliser les balises <dfn>.

La balise <dt> définit un mot ou expression à définir dans une liste de définition
Et la balise <dd> indique la définition d’un mot à définir à l’intérieur d’une liste de définition

Baliser les images

Pour afficher la légende d’un photo on l’entoure d’une balise <figure> dans laquelle on remettra une légende <figcaption>pour définir l’image affichée

la mise en exergue des éléments

les balises présentées ci-dessous sont des balises sémantiques, google qui est un enfant apprenant reconnaîtra <strong> mais pas <b> ou class=”gras” ces balises ont un sens pour lui.
Il convient donc de les utiliser pour marquer un élément visuellement, mais aussi pour lui garder son sens intrinsèque.

<strong>Texte en Gras </strong>
<em>Texte en italique, ou emphasis </em>
<mark>Texte passé au marqueur </mark>
<dfn>Terme à définir </dfn>
<code>Portion de code </code>
<kbd>Touche de clavier </kbd>
<var>Variable</var>

Texte préformaté

La balise <pre> définit un texte préformaté. Elle affiche votre texte de façon brut.
L’élément <pre> convient parfaitement pour la mise en forme rapide de tableaux de données, de liste de prix et de références, de listings informatiques, etc…

Les coordonnées

La balise <address> permet de mettre en évidence des adresses, coordonnées et URL.

Une mise en page agréable à lire et signifiante pour les moteurs de recherche

Gérer les débordement des colonnes

CSS-débordement

La solution :
Forcer le retour à la ligne d’un mot long à l’aide de la propriété CSS3 word-wrap, appliquée au parent et qui aura pour effet de couper le mot. Cela peut rentrer dans le cadre d’une feuille de style RESET.CSS, afin de prévenir tous débordements sur les éléments p,pre et td. L’autre bonne nouvelle, c’est que notre texte justifié aura meilleure allure.

p, pre, td {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
    word-wrap: break-word;
}

Qui dit colonne, dit gouttière et si en plus vous avez déjà opté pour le “Responsive Web Design” c’est le casse-tête des width+padding+border=???
d’ailleurs on ne devrait pas dire width mais content width. Deux solutions se présentent alors : soit sortir la calculette ou utiliser la propriété box-sizing qui régle le problème et qui est aussi à mon sens à intégrer à votre feuille reset.css.

Les problèmes techniques réglés, encore faut-il offrir un texte lisible aux internautes et là quelques mauvaises habitudes sont à éviter, notamment les corps de polices trop petits, hérités du print.

Les navigateurs affichent les textes avec un corps par défaut de 16px ->1em
Les polices n’ont pas toutes la même taille et la même chasse, mais il convient de ne pas descendre sous un corps 10-11px
– Eviter les lignes trop longues. Un affichage de 45 à 75 signes par ligne semble correct. (Autre formule : largeur colonne = 30 x Corps de texte).
– Opter pour un line-height assez élevé qui ne descendra pas sous 1.2 en moyenne (là encore, tout dépend de la police utilisée et de la mise en page). En général nous voyons des valeurs comprises entre 1.3 et 1.6.
– Opter pour des polices optimisées pour les écrans avec une hauteur d’x confortable (exemple : Verdana, Georgia).
– Préférer les unités relatives (em) aux unités fixes (px, pt).
– Aérer au maximum le contenu en plaçant des espaces blancs de chaque côté du texte.
Mais comme un test en live vaut tous les explications :www.typetester.org

chien2-colonne



Laissez un commentaire