Mettez du style dans vos contenus

Posted on | mars 18, 2010 | 3 Comments

Vous écrivez des contenus en ligne et trouvez souvent, une fois qu’ils apparaissent à l’écran, qu’ils manquent de relief, de punch, de style? En quête de quelques idées pour leur donner du muscle et les mettre en valeur? Voici une palette de styles succincte, efficace et universelle… Avec, à la clé, un gabarit : n’hésitez pas à le télécharger!

Mise en forme et relief

La mise en forme de vos contenus Web contribue énormément à leur lisibilité. C’est même un des principes fondamentaux de l’écriture Web, qui nécessite d’adapter ses contenus au média (oui, le Web est un média, et pas seulement un support de publication).

Ce travail d’adaptation vise à exploiter de manière optimale les caractéristiques de la lecture à l’écran, le potentiel de l’hypertexte, la profondeur des pages, etc.

Les 3 grands principes de l’écriture Web

J’ai coutume de distinguer 3 grands axes dans ce travail d’adaptation : les principes rédactionnels, les principes formels et les principes fonctionnels. L’aspect formel, qui nous intéresse ici, porte sur le rendu – la mise en page – des contenus.

Pour faciliter le balayage des pages (propre aux lecteurs pressés que nous sommes), il convient de structurer visuellement ses textes, de les organiser de manière à faire ressortir la hiérarchie, les types et les unités d’information.

Voici quelques styles que vous pourrez demander d’intégrer au graphiste, designer ou webmaster dans les CSS (feuilles de style) de votre CMS (système de gestion des contenus):

des titres de 3 à 4 niveaux à l’intérieur du texte, pour bien mettre en relief ses principales unités informationnelles et leur hiérarchie;
des paragraphes de contenu « simple« , dotés d’un interligne confortable et d’un espacement suffisant jusqu’au paragraphe suivant;
des paragraphes du type chapô, utilisés surtout pour les introductions, accroches et autres micro-contenus destinés à donner rapidement une idée de l’essence du contenu;
trois formats d’hyperlien (« vierges », survolés et visités), de sorte que le lecteur puisse directement identifier les liens, mais aussi savoir s’il les a déjà « utilisés »;
des listes à puces de deux niveaux, pour structurer clairement les énumérations et en faciliter la lecture ;
les icônes pour revenir en haut de la page, qui seront utilisées en associations avec les ancres (liens internes) ;
un style pour les citations, qui permet de mettre en relief un témoignage, un « contenu utilisateur », généralement très valorisés par les lecteurs;
et quelques styles pour des tableaux de contenu, car les tableaux sont un excellent moyen de présenter certains types de contenus, comme des consignes, des comparaisons de produits, etc.

A propos des CSS

Le langage CSS (Cascading Style Sheets) est donc utilisé pour définir les styles qui seront utilisés sur votre site, c’est-à-dire le rendu, l’aspect graphique. Ces styles comprennent, par exemple, la couleur du fond de la page, les fontes (polices de caractères) des différents éléments textuels, (titraille, paragraphes, citation), etc. Concrètement, cette feuille de styles est rassemblée en un petit fichier (« style.css », par exemple) qui comportera toutes les règles de style à appliquer. Ces styles seront ensuite repris également dans la charte graphique.

Aller plus loin

Les principes rédactionnels
Les principes formels
Les principes fonctionnels
L’html pour les rédacteurs Web
Utilisez des tableaux (mis à jour)
Téléchargez la « feuille de styles » (pdf, 244 Ko)

If you enjoyed this post, make sure you subscribe to my RSS feed!

Comments

3 Responses to “Mettez du style dans vos contenus”

Jean-Marc Hardy
mars 18th, 2010 @ 12:21

Je partage totalement ton évangélisme, Muriel… Les feuilles de style produites par les web designers restent souvent trop succinctes… Il est intéressant (pour le lecteur et également pour la motivation des contributeurs de contenus), de prévoir des feuilles de styles riches… Comme tu le modélises très bien, l’habillage d’une page ne se limite pas aux titres de niveau 1 et de niveau 2… La feuille de style est le point d’équilibre entre la cohérence et la richesse éditoriales.
Muriel Vandermeulen
mars 22nd, 2010 @ 13:57

@ Jean-Marc : outiller les contributeurs de la sorte, c’est, en effet, les aider à publier des contenus lisibles, utilisables, et c’est, comme tu le dis, assurer la cohérence globale de l’interface. On croit souvent que les chartes et feuilles de style sont contraignantes, alors qu’elles sont structurantes et contribuent pour beaucoup à la bonne expérience de l’utilisateur.
Philippe
mars 23rd, 2010 @ 10:16

C’est ce que nous essayons de réaliser sur http://www.cdurable.info/EARTH-HOUR-60-minutes-pour-la-planete-WWF-France-Eteindre-lumieres-Climat,1614.html par exemple.

Sur SPIP la gestion des tableaux n’est cependant guère agréable.

Mon livre

"Stratégie de contenu Web" sur Amazon

Bénéficiez de -5% sur Amazon

[Témoignage] "Ce livre est un véritable manuel. Si vous ne voulez pas rater une étape de votre démarche stratégique, cochez simplement chaque titre et sous-titre du manuel après avoir suivi les (bons) conseils qui y reposent." Alexandre Martinez, fondateur de GA&C.