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 !


Publié

dans

par

Étiquettes :

Commentaires

26 réponses à “Donnez à  vos billets une mise en page « pro » !”

  1. Avatar de daria
    daria

    Merci pour ces astuces et leurs codes respectifs ;) même si j’avoue que (moi-même personnellement) Je ;) ne lit pas les chapeaux sur les blogs et vais directement au contenu du billet.

  2. Avatar de BLOmiG
    BLOmiG

    salut Daria,merci pour ton commentaire !Oui chacun son style de lecture, de même que chacun a son style d’écriture. Mais je pense quand même qu’au final, on doit être gagnant en faisant un effort sur le billet ; surtout pour les billets longs. En tout cas, quand je tombe sur un billet long, je ne lis que s’il est bien structuré et si des sous-titres m’interpellent…on verra. Je vais essayer d’utiliser systématiquement cela, maintenant.à  bientà´t !

  3. Avatar de BLOmiG
    BLOmiG

    bon, ok les chapeaux ne serviront à  rien…mais que penses-tu des « exergues » ? regardes bien…regardes bien je te dis ! c’est super, non ? ;)

  4. Avatar de daria
    daria

    Les exergues peuvent être intéressantes voire accrocheuses sur un long article.

  5. Avatar de BLOmiG
    BLOmiG

    ahhhhhh ! tu vois que c’est utile…non, sérieusement, je pense que oui. Je suis souvent parti d’un article trop long, qui m’avait pourtant attiré par son titre, à  cause de l’uniformité trop grande du texte…En tout cas, je me suis amusé pour rajouter ces classes dans ma feuille de style, comme les lettrines et les chapeaux récemment. je m’amuse. :)à  bientà´t !

  6. Avatar de Apox
    Apox

    Merci pour ce post et les codes css qui vont je pense m’être bien utiles. En effet, je trouve que le concept d’exergue particulièrement intéressant. Bravo !

  7. Avatar de BLOmiG
    BLOmiG

    salut Apox !merci pour ton commentaire : je suis bien content si ça peut être utile à  quelqu’un…!Je n’ai fait que reprendre la mise en page classique des articles de la presse écrite. Je trouve que pour les articles long, c’est pas mal …à  bientà´t !

  8. Avatar de Matthieu M.
    Matthieu M.

    Finalement, on se retrouve à  récupérer les bonnes vieilles méthodes des journalistes, qu’on peut voir depuis des décénies dans les journaux :)Non mais ton article résume bien l’ensemble, et est plutà´t bien fait. Avec ça, on a plus aucune excuse pour ne pas avoir un blog clair et agréable à  lire :)

  9. Avatar de BLOmiG
    BLOmiG

    salut Matthieu !merci pour ton commentaire…oui c’est clairement ça : récupération totale. Je pense que les journalistes ont eu le temps de peaufiner leurs techniques depuis plus longtemps que moi ! autant en profiter justement ! :)Merci pour ton compliment ; il y a encore beaucoup de travail sur les marges du CSS, pour que la mise en page soit belle.Et puis, il y a tout de même un défaut, je viens de m’en rendre compte dans google reader : le flux rss n’est pas mis en forme, donc les exergues apparaissent au milieu du texte et le rendent un peu bizarre. Je ne pense pas qu’on puisse intégrer des mises en page complexes dans le flux RSS, si ? :s

  10. Avatar de Simon
    Simon

    Oui, ça c’est super, on retrouve un peu de journal de papa chez soi, c’est sà»r, c’est très accrocheur les exergues, mais quel nom énervant, je ne vouvrai pas le mettre en exergue mais tout de même mes ailleux.

  11. Avatar de BLOmiG
    BLOmiG

    salut Simon,merci pour ton commentaire !c’est clair que le nom est horripilant ….! :(mais bon, c’est le nom…à  bientà´t !

  12. Avatar de thibault
    thibault

    C’est super sympa, le coup des exergues. Je crois que je vais aussi me laisser tenter :)note : Lomig, tu n’es pas obligé de me remercier pour mon commentaire :)

  13. Avatar de BLOmiG
    BLOmiG

    salut Thibault,oui, pour ceux qui écrivent des articles plutà´t longs, comme toi ;), c’est plutà´t utile je pense. Je suis content si ça peut te servir … !à  bientà´t….et merci pour ton commentaire (j’y étais presque mais j’ai craqué juste avant la fin :mrgreen: )

  14. Avatar de David
    David

    Très bon article… Comme quoi, on peut toujours progresser ;-)J’ajouterai la notion de mise en forme différenciée selon les parties de l’article. Exemple: dans une interview, il y a le chapeau, la présentation globale, puis, quand je passe aux questions, je le fais sous forme d’encart avec un aplat de couleur différente. Cela permet aussi de varier le rythme pour l’oeil du lecteur…

  15. Avatar de BLOmiG
    BLOmiG

    salut David,merci beaucoup pour ton commentaire…!Oui tu as raison la mise en forme différenciée peut être utile. Je vais justement publier une interview (au moins) en septembre, et c’est intéressant de se pencher à  l’avance sur la manière optimale de retranscrire cela sur un blog. Je fonce voir le tien !à  bientà´t !

  16. Avatar de jb kechi
    jb kechi

    Je trouve ce type de mise en page très intéressante pour ceux qui se consacrent à  un blog « magazine ». J’ai par exemple trouvé ton billet exemple très facile à  lire et rapide pour ceux qui comme moi lisent en diagonale.Il ne me reste plus qu’à  trouvé une mise en page aproprié pour les astuces de mon blog :)

  17. Avatar de BLOmiG
    BLOmiG

    salut jb Kechi,merci beaucoup pour ton commentaire élogieux…ça me fait plaisir de savoir que l’article est facile à  lire « en diagonale ». Surtout si celui qui l’a lu en diagonale a tout de même pris la peine de laisser un commentaire ! :)à  bientà´t !

  18. Avatar de thibault
    thibault

    à‡a-y-est, j’ai appliqué ta mise en page sur mon blog. Je suis content, l’effet rend plutà´t bien. Merci pour ces précieux conseils, donc.

  19. Avatar de thibault
    thibault

    Argh ! Je viens de me rendre compte que ça fout le b**del dans mon RSS. :'(

  20. Avatar de Facilitez-vous l’écriture : utilisez Post-Templates !
    Facilitez-vous l’écriture : utilisez Post-Templates !

    […] utile d’utiliser une mise en page relativement constante d’un article à  l’autre. La structuration des articles mise en place ici fait appel à  plusieurs “classes” CSS, créées pour mettre en forme un chapeau, une […]

  21. Avatar de Le lecteur est roi ! (2/4 : Structuration des articles)
    Le lecteur est roi ! (2/4 : Structuration des articles)

    […] des intertitres, et éventuellement des exergues (ou accroches) : cela permet au lecteur qui a été captivé par le titre de parcourir très rapidement […]

  22. Avatar de Iconique.net : Au sujet des plugins Wordpress utilisés…
    Iconique.net : Au sujet des plugins Wordpress utilisés…

    […] mais d’une feuille de style. Vous trouverez toutes les explications nécessaires (ou presque) ici.Note(s) :Il convient aujourd’hui de faire une distinction parmi les internautes entre […]

  23. Avatar de Au sujet des plugins WordPress utilisés | iconique.net
    Au sujet des plugins WordPress utilisés | iconique.net

    […] mais d’une feuille de style. Vous trouverez toutes les explications nécessaires (ou presque) ici7 .Notes :Il convient aujourd’hui de faire une distinction parmi les internautes entre les […]

  24. Avatar de Est-ce que vous aimez… ? » daria blogue
    Est-ce que vous aimez… ? » daria blogue

    […] chapeaux sont recommandés notamment dans la presse traditionnelle écrite…comme le rappelle Blomig. 3) Est-ce que vous aimez avoir plusieurs articles de différents blogueurs sur un même sujet […]

  25. Avatar de VincentB

    Simple et efficace ! Je cherchais justement un moyen de mieux mettre en avant mes articles via une mise en forme particulière, c’est vrai que le chapeau de ce type, ça claque !

    1. Avatar de BLOmiG

      salut VincentB, et merci pour le commentaire. je suis content que cet article soit toujours utile. d’ailleurs c’est normal, il y aura toujours besoin de structure l’information pour la rendre attractive, et lisible facilement…

      à  bientà´t

N'hésitez pas à partager votre avis ! (Markdown ok)

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.