Un modèle de CSS optimisé pour l’éditorial

Téléchargez notre modèle de CSS

Ce billet a été lu 2787 fois. À votre tour?

La mise en forme de vos contenus Web contribue à leur lisibilité. C’est un des fondamentaux de l’écriture Web. Téléchargez notre modèle de CSS.

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 modèle de CSS à 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.  Nous devons adapter nos 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.

Un modèle de CSS optimisé pour l’éditorial

Un modèle de CSS (cascading stylesheet) est une feuille de style optimisée pour l’éditorial. Ce modèle regroupe les styles qui sont essentiels à la bonne lisibilité de vos contenus éditoriaux.

Dans ce modèle de CSS, qu’il faudra intégrer au CMS (système de gestion des contenus), on prévoit, a minima, les styles suivants:

  • 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

Related

A propos de Muriel Vandermeulen

Directrice associée et fondatrice de l'agence Wearethewords, Muriel prône le Web utile, attrayant et pérenne grâce notamment à la stratégie de contenu.

Auteure et conférencière, ses compétences sont largement reconnues à l'international auprès des groupes de presse (Le Monde, L’Avenir.net, … ), de grands comptes (Abritel, Airbus, Delhaize, Fnac, Lego) ou encore de hautes écoles et ministères belges et français. Son crédo: content, marketing, performance.

Sur le sujet, avez-vous lu...

9 Responses to Un modèle de CSS optimisé pour l’éditorial

  1. 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.

  2. @ 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.

  3. Philippe dit :

    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.

  4. [...] La mise en forme de vos contenus Web contribue à leur lisibilité. C'est un des fondamentaux de l'écriture Web. Téléchargez notre modèle de CSS.  [...]

  5. [...] La mise en forme de vos contenus Web contribue à leur lisibilité. C'est un des fondamentaux de l'écriture Web. Téléchargez notre modèle de CSS.  [...]

  6. [...] La mise en forme de vos contenus Web contribue à leur lisibilité. C'est un des fondamentaux de l'écriture Web. Téléchargez notre modèle de CSS.  [...]

  7. Jacques Pyrat dit :

    Sans vouloir être tatillon, ce n’est pas un modèle de CSS qui est fourni en téléchargement, mais une image qu’il faut traduire en CSS.

    Ça serait sympa de donner la version styles.CSS à télécharger ;-)

    • Cher Jacques, vous prêchez pour votre chapelle. Sans vouloir être tatillonne, l’expression modèle CSS n’implique en rien que le format du modèle proposé en téléchargement soit en css. D’autant plus lorsque le propos de l’article est d’étayer la nécessité d’une feuille de style claire pour structurer le contenu. Il s’agit bien d’un gabarit, d’un exemple à suivre, publié sur le blog d’une équipe de chefs de projet éditoriaux, et non de designers. Mais toutes les bonnes idées étant très appréciées sur notre blog, n’hésitez pas à nous envoyer cette dire style.CSS: nous nous ferons un plaisir de la proposer en téléchargement, en faisant référence à votre site. Merci pour votre réaction et au plaisir.

  8. […] Cette technique de la pyramide inversée, chère à la presse écrite est un des emprunts les plus caractéristiques des héritages de l’écriture Web. On le sait, la rédaction Web s’appuie sur des méthodes et pratiques d’une variété d’autres disciplines, dont le journalisme, mais aussi la typographie et la signalisation. […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>