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

Vendredi 5 décembre 2008

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

Par Eric, 5 décembre 2008 à 08:09 :: Blogs

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 ?

Tags : mise en page, rédaction, Webdesign

Article(s) sur le même sujet :

Une leçon de mise en page

[ANNULE]Concours nouveau design de Presse-citron : à vous de jouer, un iPhone à gagner

Que faut-il écrire dans le premier billet d’un blog ?

Trackbacks

Pour faire un trackback sur ce billet : Trackback URI

1. De Les liens de la semaine | ShigaBlog

[...] 7 conventions de mise en page et de présentation sur Presse-citron | Presse-Citron [...]

Commentaires

1. Le 5 décembre 2008 à 9:09, par Arnaud :: site

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. Le 5 décembre 2008 à 9:24, par Akah :: site

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

3. Le 5 décembre 2008 à 9:33, par Sylvain :: site

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. Le 5 décembre 2008 à 9:57, par Xavier :: site

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 5 décembre 2008 à 10:48, par athos99 :: site

- 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. Le 5 décembre 2008 à 11:02, par Pierre :: site

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. Le 5 décembre 2008 à 11:52, par A.rnaud :: site

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. Le 5 décembre 2008 à 12:50, par Anthony :: site

Il faut que le tout reste hamonieux, mais je me donne plus de libertés.

9. Le 5 décembre 2008 à 13:35, par Daniel :: site

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)

10. Le 5 décembre 2008 à 14:24, par Eric :: site

@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

11. Le 5 décembre 2008 à 17:16, par Targhan :: site

Les bloggers découvrent les chartes graphiques ?

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.

12. Le 5 décembre 2008 à 17:28, par Adrien :: site

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.

13. Le 5 décembre 2008 à 19:30, par olivierN :: site

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 ?

14. Le 5 décembre 2008 à 20:08, par Nono :: site

Je n’applique pas toutes les règles mais je vais essayer de m’y tenir. Merci pour ce billet utile.

15. Le 5 décembre 2008 à 21:13, par Jonathan :: site

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 ?

16. Le 6 décembre 2008 à 17:55, par MY-Couple :: site

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.

17. Le 7 décembre 2008 à 9:07, par Anonyme :: site

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.

18. Le 7 décembre 2008 à 9:10, par Anonyme :: site

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

19. Le 7 décembre 2008 à 10:13, par Alias+le+Dr+House :: site

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)

20. Le 7 décembre 2008 à 18:57, par tof :: site

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

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

Ajouter un commentaire

Article(s) sur le même sujet :

Une leçon de mise en page

[ANNULE]Concours nouveau design de Presse-citron : à vous de jouer, un iPhone à gagner

Que faut-il écrire dans le premier billet d’un blog ?

J'aime le web, et accessoirement, j'en vis . Je livre ici mon point de vue de "professionnel de la profession" sur les infos - utiles ou futiles - que je glane au fil de mes rencontres sur la toile.

Lectures recommandées :

>> Les bureaux des blogueurs du Top 20 Wikio
>> 7 façons foireuses de faire connaître son blog
>> Internet mobile, état des lieux : le futur du web est-il mobile ?
>> Mon disquaire, ce héros
>> Connaissez-vous le triple effet blog ?
>> La fable du blogueur qui aurait mangé un journaliste

Pub

Articles les plus lus

Derniers Commentaires

labilbe: Ca part en cacahuète mais le débat est intéressant. Fight !
louiz': Ceux qui ne peuvent pas, ben ils l’hébergent chez free, ou toile-libre.org. « Tu crois que les...
mapics: louiz’ Tous le monde ne peux pas héberger son site chez soit ; exemple moi je suis en zone blanche et en 56...
louiz': mapics Non, encore heureux que tout le monde n’héberge pas son site chez free, autant l’héberger...
mapics: louiz’ Tu crois que tout le monde héberge son site sur free ? Tu crois que le boulanger offre son pain ? Tu...