7 conventions de mise en page et de présentation sur Presse-citron

Quand on édite un blog depuis quelques années, il n’est pas interdit de se contraindre à appliquer quelques règles de présentation, de mise en page et de hiérarchisation de l’information afin d’offrir des repères au lecteur. Ces conventions ont en outre l’avantage d’inciter le rédacteur à être plus clair et plus concis. Ainsi sur Presse-citron

Quand on édite un blog depuis quelques années, il n’est pas interdit de se contraindre à appliquer quelques règles de présentation, de mise en page et de hiérarchisation de l’information afin d’offrir des repères au lecteur. Ces conventions ont en outre l’avantage d’inciter le rédacteur à être plus clair et plus concis.

Ainsi sur Presse-citron sont arrivées au fil du temps des règles infographiques que j’essaie de respecter dans la mesure du possible, selon la nature et la densité des billets, dont voici un récapitulatif, au cas où cette notion vous inspirerait :

  • les billets longs (plus de 5 paragraphes de 10 lignes) sont coupés avec un « Lire la suite »
  • les images montrant des captures d’écrans de sites web ont, sauf rare exception, toujours la même dimension et la même présentation : 510×220 pixels, image inclinée sur la gauche, encadrée d’un liseré gris de 4 pixels
  • les autres images (produit, capture de site mobile…) ont un format plus disparate mais j’essaie dans la mesure du possible de les tailler à 510 pixels de large (dimension maxi)
  • L’image illustrant un article est toujours placée entre le premier et le deuxième paragraphe, sauf dans deux cas : si le premier paragraphe est trop court où ne cite pas encore le service, ou s’il s’agit d’un billet d’humeur (perso) illustré par une image conceptuelle, comme ici ou ici, où elle est placée en tête de l’article
  • les noms des sites web chroniqués sont toujours en gras dans la première citation, et liés au site en question
  • les interviews (notamment les Métiers du web) font apparaître une photo de la personne en incrustation à gauche dans le texte , une capture d’écran de son site et une citation en exergue, comme ici
  • les citations sont toujours en italique et entre guillemets, mais cela pourrait changer au profit de la fonction citation de l’éditeur WordPress, que je n’ai encore jamais utilisée

Je ne souhaitais pas conclure ce billet par un appel à commentaires, mais je crois que vais y sacrifier quand même car les réponses peuvent être d’utilité publique : et vous, est-ce vous appliquez des règles immuables pour la rédaction et la présentation de vos billets ?

22 commentaires

  1. Sur mon blog j’essaye de commencer par une image 600px de large auquel j’ajoute une marge de 5 px blanche puis un effet ombré.

    Pas de coupure « lire la suite »

    Citation « à la wordpress ».

    En gras ce que je veux mettre en avant.

    Rien ne vient de moi j’ai pompé les idées à gauche et à droite ;)

  2. Pour ma part, j’essaie surtout d’être cohérent avec mes articles précédents, histoire que l’ensemble soit homogène.

  3. De mon coté, chaque article est plus ou moins structuré de la même façon depuis quelques temps : Un chapeau, une image de 450px, des paragraphes précédés d’intertitres. Les liens en gras et la source en bas d’article…

  4. Moi je n’applique pas vraiment de règles immuable, s ce n’est les citations guillemets italique. Les images & les videos sont soit a droites soit a gauche en fonction de ce que je veux mettre en avant. Et ce n’est pas si mal, si ?

  5. - Le format des photos est standard avec un cadre et un mention de ©.
    - J’essaie d’aérer mes paragraphes et photo en insérant des retour de ligne.
    - Coupure de ligne si il y a plus de deux photos ou le texte dépasse 20 ligne pour ne pas chargé la page principal et inciter à ouvrir l’article.
    - Dans mes textes, utilisation d’un maximum de référence lien avec d’autres articles de mon blog pour inciter le lecteur à rester sur le blog

  6. mes images et vidéo sont de 530 pixel de large dont 5 pixel ombré pour les images
    mes images si elle egaie l article je les place en haut si c est une image precise je la place la ou la precision d article commence si mon article est court je cherche une image longitudinale pour la mettre a droite ou a gauche tout au long de l article
    j ai horreur des articles ou faut cliquer sur suite bien que je le reconnais graphiquement cela permet d harmoniser plus facilement

  7. Eric ? Je veux bien savoir comment tu fais pour mettre la citation en exergue sur la droite comme une image ? C’est directement dans le TinyMCE de WordPress ou un plugin en plus ? :)

  8. toujours mettre en gras les mots qui doivent ressortir sur Google :-)

    j’ai arrêté les découpages « lire la suite » car ça faisait chuter les visites (bizarrement)

  9. Eric

    @Daniel
    les découpages “lire la suite” font probablement monter les pages vues (normal !) mais peuvent peut-être lasser les visiteurs qui n’y sont pas habitués, et donc chuter les visites

  10. Les bloggers découvrent les chartes graphiques ? :P

    Mais la quasi totalité des points présentés devraient être transparents pour celui qui écrit l’article. En principe, si on utilise des éléments/classes correctement définis dans la CSS tout ça est fait automatiquement…

    Pour le coupage d’un article avec un lien « la suite », ce n’est bon que si le code de la suite est réellement dans la page sinon le référencement en pâti.

  11. Pour ma part, j’essaie de mettre en place quelques conventions pour assurer quelques points de repères aux lecteurs. (largeurs des images, « lire la suite » pour les articles trop long, affichage des liens…)

    On ne peut que gagner en qualité je pense.

  12. Interessant comme sujet.

    Je pense qu’on ne trouve son style qu’aprés quelques versions (ce qui oblige à remodifier l’ensemble des posts précédents… pas cool !).

    Pour moi, une photo illustre chaque article (qui vient se mettre automatique dans les « latests »). Puis chaque article est illustré d’une ou deux photos de présentation, la taille reste non défini, par contre, les adsenses sont toujours placés en début et en fin d’article.

    Pour ma part, je pense avoir trouvé le framework qui me convient, et c’est cela l’important non ?

  13. Moi j’ai des régles que j’essaye de suivre pour la plus part de mes articles comme les titres ou les images. Mais je bosse frénétiquement sur mon css donc sa chamboule souvent bcp de chose. Vous en pensez quoi de la mise en page chez moi ?

  14. C’est minim et sans grand intérêt pour les lecteurs, mais lorsque on publie des vidéos sur notre blog (dailymotion/youtube) on configure les couleurs de bordures et boutons pour que ça se marie mieux avec notre charte graphique.

  15. Je suis graphiste et ces règles de mise en page (bien que sur le web cette notion soit anachronique) sont des phases élémentaires de la conception d’un site (qu’il s’agisse d’un bloc ou autre). C’est marrant car cette évidence de traitement du contenu pour sa lisibilité peut être très riche et variée. Plus que le permet les CMS de blocs, d’ailleurs. Et c’est pas toujours évident à la base pour mes clients ; je dois judicieusement argumenter pour faire accepter certains choix parfois moins commun bien que je respecte toujours les règles typographiques dans la limite des possibilités du web et toujours avecun bonne hiérarchie d’information et d’une lisibité générale.
    Ce qui est marrant c’est que grâce au blocs, des gens se sensibilisent peu à peu avec ces questions, voire vont finir par s’amuser avec ces hiérarchies en sortant peut-être des lieux communs. Merci Éric de souligner cette importance évidente mais tellement ignorée.

  16. Bien entendu sur mon billet ci-dessus, il faut lire blogs et non blocs… Cochonerie de correction automatique de l’iPhone.

  17. J’applique moi aussi des règles immuables pour la présentation de mes billets sur ctn-music.com:
    1- photo en 480×320
    2- bio + critique
    3- pochette de l’album + lien amazon
    4- widget audio
    5- clip video
    6- éventuellement lien sur la page de l’artiste

    mais tous ces efforts passent completement inaperçus par des connards de zappeurs incapables de passer l’étape de la première page (homepage) et qui ose me dire que mon site est sans âme (Eric Boisson) ou que mon design est moche et que la chartre graphique (rouge/noir) est un symbolisme des couleurs de l’enfer dixit un lecteur de Techcrunch (apparemment il avait pas bien vu que mon graphisme était décoré de fleurs)

  18. j’essaie toujours de faire les phrases a l’inverse de balzac : Le plus court possible = sujet+verbe + complement. Et avec le moins d’adverbe. Bref, tout l’inverse de ce comm :D

    A ce propos, une question qui me titille : combien de relecture avant tes publications et quel est le taux de redaction=publication sans retouches ?

  19. Pingback: Les liens de la semaine | ShigaBlog

  20. Pingback: Presse-citron en mode vacances | Presse-Citron

Lire les articles précédents :
Twitter expliqué au Monde

Si vous peinez un peu à expliquer ce qu'est exactement Twitter à une personne qui n'est pas très au fait...

Fermer