Charte graphique et écriture web

Une charte graphique est le document qui fixe les règles de l'identité visuelle d'une organisation : son logo et ses variantes, ses couleurs, ses polices, le style de ses images et la façon de les assembler. L'écriture web, c'est l'art de rédiger des textes qu'on lit sur un écran : des textes qui vont droit au but, se parcourent en diagonale, et que les moteurs de recherche comprennent. Ce chapitre explique ce que contient une charte, comment la traduire dans un site WordPress en respectant l'accessibilité, et comment écrire et organiser les contenus d'une organisation.

Pourquoi une charte graphique

Le référentiel demande de veiller à ce que « l'image de l'organisation soit conforme aux attentes et valorisée ». Concrètement, un client qui voit l'enseigne de la Cyclerie, sa fiche Google, son site, sa page Instagram et la facture qu'il reçoit par courriel doit reconnaître immédiatement la même maison. Cette cohérence inspire confiance ; l'incohérence (un logo étiré ici, un vert différent là, trois polices sur une page) donne une impression d'amateurisme.

La charte sert aussi à déléguer : grâce à elle, la vendeuse qui prépare un visuel pour Instagram, l'imprimeur qui fait les flyers et le prestataire qui refait le site produisent des supports cohérents sans demander à la gérante de tout valider.

Ce que contient une charte graphique

Traduire la charte dans le site

La charte ne s'applique pas à la main, page par page. On la transforme en réglages du thème, pour que chaque bouton, chaque titre et chaque lien reprenne automatiquement les bonnes couleurs et les bonnes polices.

Dans un thème à blocs WordPress, ces réglages vivent dans le fichier theme.json. On y déclare la palette et les polices de la charte ; WordPress les propose ensuite aux rédacteurs dans l'éditeur et génère les variables CSS correspondantes :

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "custom": false,
      "defaultPalette": false,
      "palette": [
        { "slug": "saule", "color": "#2F6B4F", "name": "Vert saule" },
        { "slug": "tendre", "color": "#9BC53D", "name": "Vert tendre" },
        { "slug": "creme", "color": "#F7F3E8", "name": "Crème" },
        { "slug": "anthracite", "color": "#263238", "name": "Anthracite" },
        { "slug": "action", "color": "#B5541A", "name": "Orange action" }
      ]
    }
  }
}

Les lignes "custom": false et "defaultPalette": false retirent le sélecteur de couleur libre et la palette par défaut de WordPress : les rédacteurs ne peuvent choisir que les couleurs de la charte. C'est une façon simple de garantir la cohérence sans surveiller chaque publication. Dans un site écrit à la main, le même principe passe par des variables CSS déclarées une fois (--couleur-principale: #2F6B4F;), comme dans le cours HTML et CSS.

Couleurs et contraste : la charte doit être accessible

Une charte dessinée pour l'impression peut produire, à l'écran, un texte illisible pour une partie des visiteurs. Les règles d'accessibilité (WCAG, reprises par le RGAA) fixent un rapport de contraste minimal entre le texte et son fond : 4,5:1 pour un texte de taille normale, 3:1 pour un grand texte (environ 24 px, ou 18,5 px en gras) et pour les composants d'interface comme le contour d'un champ.

Léo a vérifié les couleurs de la Cyclerie avec un outil de calcul de contraste :

L'orange d'origine de la charte ne permettait pas d'écrire en blanc sur les boutons. Plutôt que de renoncer à l'orange, la gérante a validé une variante plus foncée réservée à l'écran : c'est exactement le genre de décision qu'on documente dans la charte. L'accessibilité est traitée en détail au chapitre 8.

La ligne éditoriale

La ligne éditoriale fixe ce que l'organisation publie, pour qui, sur quel ton et avec quels objectifs. Elle tient en une page :

• les publics : pour la Cyclerie, les cyclistes du quotidien qui font réparer leur vélo, les acheteurs d'un vélo à assistance électrique, les touristes qui louent l'été ;
• les objectifs : faire venir à l'atelier, vendre, louer, fidéliser ;
• les sujets : conseils d'entretien, arrivages de vélos d'occasion, sorties organisées, coulisses de l'atelier ;
• le ton : chaleureux, concret, sans jargon, avec le vouvoiement ;
• ce qu'on ne publie pas : prises de position politiques, critiques de concurrents, photos de clients sans leur accord.

Elle se décline dans un calendrier éditorial, qui planifie les publications et répartit le travail :

On ne publie pas partout : mieux vaut un ou deux réseaux tenus régulièrement qu'une présence fantôme sur cinq. La Cyclerie garde Instagram, où sa clientèle se trouve, et ferme proprement sa page Facebook avec un message qui renvoie vers le site.

Écrire pour le web

On ne lit pas un écran comme une page imprimée : on balaie la page du regard, on cherche une réponse, on repart si on ne la trouve pas en quelques secondes. Les règles de l'écriture web en découlent.

La pyramide inversée. L'essentiel d'abord, les détails ensuite. Le premier paragraphe d'une page doit répondre à la question que se pose le visiteur : la page « Atelier » commence par ce qu'on y répare, les délais, le prix d'une révision et comment prendre rendez-vous, pas par l'histoire de la boutique.

Des titres qui informent. Un titre de section dit ce que contient la section : « Tarifs de la révision » plutôt que « Nos prestations ». Le visiteur qui parcourt les titres doit comprendre la page ; le moteur de recherche aussi, qui s'appuie sur les titres pour comprendre la structure.

Des phrases et des paragraphes courts. Une idée par paragraphe, des phrases de vingt mots au plus quand c'est possible, des listes pour les énumérations, des tableaux pour les comparaisons.

Des liens explicites. « Prendre rendez-vous à l'atelier » plutôt que « cliquez ici » : le texte du lien doit avoir un sens hors de son contexte, pour les lecteurs d'écran comme pour les moteurs de recherche.

Les mots des visiteurs. On écrit « réparer un vélo électrique », comme le tapent les gens, et pas « maintenance VAE » ; on explique les termes techniques. Le chapitre 6 montre comment trouver ces mots.

Un appel à l'action. Chaque page se termine par ce que le visiteur peut faire ensuite : appeler, réserver, venir, s'abonner.

Voici le même paragraphe avant et après réécriture :

Avant. Depuis 1998, la Cyclerie des Saules met tout son savoir-faire et sa passion au service des amoureux de la petite reine. Notre équipe de professionnels qualifiés saura répondre à toutes vos attentes en matière d'entretien de votre deux-roues. N'hésitez pas à nous contacter pour plus d'informations.

Après. Nous réparons tous les vélos, électriques compris, en 48 heures en moyenne. La révision complète coûte 69 € et comprend le réglage des freins et des vitesses, le contrôle de la transmission et le gonflage. Prenez rendez-vous en ligne ou appelez l'atelier au 03 53 01 42 17.

La version « après » répond à trois questions (quoi, combien, comment), contient les mots que les gens cherchent et finit par une action. Elle est aussi plus courte.

Les images

• Des vraies photos de l'organisation, de ses locaux et de son équipe plutôt que des images de banque génériques : elles rassurent et elles sont uniques.
• Un poids réduit : redimensionner à la taille d'affichage et utiliser les formats WebP ou AVIF. Une photo de 6 Mo sortie d'un téléphone ralentit la page pour rien. WordPress génère automatiquement plusieurs tailles de chaque image téléversée.
• Un texte alternatif qui décrit ce que l'image apporte : « Un mécanicien règle le dérailleur d'un vélo de route dans l'atelier ». Une image purement décorative a un texte alternatif vide.
• Un nom de fichier parlant : atelier-reglage-derailleur.webp plutôt que IMG_4021.jpg.
• Le droit de l'utiliser : l'organisation doit avoir les droits sur chaque image, et l'accord des personnes reconnaissables (chapitre 9).

Exercices