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.