Donnez à  vos billets une mise en page « pro » !

Des techniques existent pour prendre en compte le peu de temps dont dispose le lecteur. Elle consiste à  présenter les conclusions d’abord – dans le « chapeau » -. Et à  parsemer le corps du texte d’éléments plus visibles (« sous-titres » et « exergues »), qui soulignent les grandes lignes, ou les points forts, du contenu. De cette manière, plusieurs niveaux de lectures sont possibles, et le lecteur est plus facilement attiré vers votre contenu. Vous trouverez ici la description de ces différents éléments, et la manière de les coder en CSS.

En cherchant à  améliorer la mise en page J’ai trouvé sur Quartier Libre, les règles de mises en page d’un article typé « magazine ». Ces règles sont simples, et orientée uniquement vers la facilitation de la lecture. Il y a plusieurs niveaux de lectures lorsqu’on lit un journal : différents éléments de mise en page, et de sélection de morceaux de l’article, permettent de donner aux lecteurs des accroches pour chaque niveau de lecture. La logique de tout cela est de laisser la liberté au lecteur du niveau de détail qu’il souhaite lire : c’est le principe de la pyramide inversée (d’abord le plus important, et ensuite le détail). La conclusion doit apparaitre d’abord. J’aimerais ici passer en revue chacun de ces items, en y associant le morceau de css qui permet de le mettre en oeuvre.

Niveau 1 : les titres

Le titre, c’est le niveau 1 de lecture : ce que le lecteur voit de votre article en parcourant très rapidement votre page. Son but est d’accrocher le lecteur, et l’inciter à  aller lire l’article. Résumons les caractéristiques qu’il doit avoir pour remplir son rôle :

• Il doit être explicite sur le contenu : le lecteur ne doit pas être déçu par une inadéquation entre le titre et le contenu
• il doit être compréhensible rapidement, donc court : il vaut mieux éviter un titre de 3 lignes !
• il peut se permettre d’être un peu provocateur, pour être efficace. Grossir le trait, pour attirer le lecteur. Le reste de l’article est là  pour rentrer dans le détail et adoucir le propos

Le titre doit donc être choisi avec soin. Dans la feuille de style CSS, c’est généralement le niveau de titre h2 qui définit le style du titre.

Niveau 2 : le chapeau

Le lecteur a été intéressé par le titre, et il prolonge son interaction avec l’article. A vous de « transformer l’essai ». Le chapeau, ou lead, est un tout petit paragraphe que l’on trouve sous le titre (généralement d’un style de police différente du texte).Le rôle du chapeau est de résumer l’article en présentant, sur quelques lignes, les conclusions.Son rôle est de résumer l’article à  l’extrême en présentant, sur quelques lignes, les conclusions. Le lecteur a l’information, et il est libre de continuer sa lecture ailleurs (puisqu’il a déjà  la conclusion) ou de rentrer dans le détail de l’article. Le chapeau doit comprendre entre 2 et 4 lignes maximum, et présenter les conclusions.
En ce qui concerne la manière d’utiliser des chapeaux voilà  la marche à  suivre en 2 étapes :

1. définir dans la feuille de style une classe « chapeau », par exemple celle que j’utilise :

   .chapeau { 
           font-family: "Bitstream Vera Sans", Lucida grande, Verdana, Arial, sans-serif; 
           font-size: 100%; 
           color:#A3A3A3; 
           background-color: #FFFFFF; 
           text-align: justify; 
           font-weight: bold; 
   }

2. inclure dans votre article un chapeau (en mode code) par le biais d’un span :

   Texte du chapeau

Niveau 3 : exergues et sous-titres

Si le lecteur, ayant lu le titre et le chapeau est toujours sur l’article, c’est presque gagné ! Il reste à  placer dans le texte quelques éléments qui ressortent pour achever de convaincre le lecteur. Les exergues sont des zones de textes où sont présentées des extraits du texte, en plus gros. Les exergues sont des zones de textes où sont présentées des extraits du texte, en plus gros.Cela permet au lecteur qui parcourt le texte sans vraiment le lire d’être accroché définitivement. Les sous-titres (3 ou 4 par articles) permettent de la même manière de rythmer l’article. Il faut donc choisir avec soin les exergues et les sous-titres : ils doivent si possible être en relation avec le titre de l’article, et former une suite consistante : le lecteur doit quasiment pouvoir comprendre l’article en n’ayant lu que le titre, le chapeau et les exergues/sous-titres. Il ne lui reste plus qu’à  aller compléter sa lecture avec le texte lui-même : il a déjà  l’essentiel de la logique de l’article en tête.
Les sous-titres sont très simples à  mettre en place : il s’agit généralement des niveaux h3 dans votre feuille de style CSS.
En ce qui concerne les exergues, comme pour les chapeaux, il faut définir deux classes. Il y a une définition pour une classe exergue p pour pouvoir paramétrer une image de fond pour le conteneur « exergue » (guillemets ouvrants) et une image de fond pour le conteneur « exergue p » (guillemets fermants). Voilà  celles que j’ai définies, et la marche à  suivre pour les inclure dans votre article (en mode code) :

1. Créer les deux classes dans la feuille de style :

   .exergue { 
   float: right; 
   font-size: 2em; 
   font-family: "Bitstream Vera Sans", Lucida grande, Verdana, Arial, sans-serif; 
   color:#C2C2C2; 
   background: url(http://www.votredomaine.com/guillemet_ouvrant.jpg) no-repeat; 
   background-color: #FFFFFF; 
   width: 250px; 
   padding: 15px 0 0 42px; 
   text-align: left; 
   text-indent:27px; 
   border: none; 
   margin: 2px 15px 5px 15px; 
   padding: 1px; 
   line-height: 1em; 
   } 
   .exergue p { 
   display: inline; 
   margin: 0; 
   padding-right: 27px; 
   background: url(http://www.votredomaine.com/guillemet_fermant.jpg); 
   background-position: bottom right; 
   background-repeat: no-repeat; 
   }

   Les deux lignes où un 27px apparait sont les lignes permettant de positionner le texte par rapport aux images « guillemets » de taille 25px.

2. inclure dans votre article l’exergue (en mode code) par le biais d’un span :

   Texte de l'exergue

Le client est roi

Voilà , vous avez tous les éléments pour améliorer la mise en page de vos articles. Est-ce utile ? je pense que oui : tout cela vient évidemment du fait que le lecteur consacre peu de temps à  la lecture d’un article, et que l’auteur veut tout de même pouvoir écrire des textes de plus de 3 lignes. La solution consiste à  placer sur plusieurs niveaux de lectures l’information, donc à  vendre son texte au mieux. Qui a envie de lire un texte uniforme de 3 pages ? Certainement pas moi ! Et qui veut que ses articles soient lus ? Certainement moi ! Replacer le client (le lecteur) au centre des préoccupations est indispensable. Il faut adapter au lecteur la manière de construire son article et de le présenter. Ces astuces d’écriture et de mise en page devraient vous aider à  le faire !