Charte éditoriale

Titres et styles (ici, titre 2)

Dans le but d'avoir une charte graphique cohérente tout au long de la navigation, votre site internet utilise une palette restreinte de styles appliqués à son contenu. Le style "Titre 1", visible ci-dessus (Charte éditoriale), est réservé au titre de l'article. A l'intérieur de l'article il peut y avoir un premier niveau de titre en utilisant le style "Titre 2". Ensuite le texte est écrit avec du style "Paragraphe" en alignement gauche. Si on a encore des sous-titre, on va utiliser du "Titre 3". "Titre 6" est réservé aux notes (ce style est plus petit que "paragraphe").

Les titres ne doivent pas comporter la ponctuation finale ":" ni "."

Pour les recommandations concernant l'accessibilité de vos contenus, vous référer à la section "RGAA" de votre guide d'utilisation.

Accordéons

Le titre 4 est réservé aux accordéons. Le contenu compris dans l'accordéon est séparé du reste par des balises <div> et </div> insérées via le code.

<h4>Titre 4 Accordéon</h4>
<div>
contenu
</div>

Longueurs

Un article se compose d'un texte, d'image(s) pour agrémenter le texte, de documents téléchargeables et de liens. Les internautes veulent une information rapide et souvent assez courte. Un texte d'article est en général limité à 1500 caractères ou 1 page word. Les articles sont décomposés en paragraphes (200 à 500 caractères). Chaque paragraphe peut éventuellement être précédé d'un titre de paragraphe (en typo titre 2).

Images

Les images sont en .jpg (meilleure compression), .png ou .gif. Sauf cas particulier, limiter la taille du fichier à 1400 pxl comme dimension maximale, compression 80% (si jpg) et qualité de 72 DPI (par ordre d'importance).
Dans les articles, la largeur maximale d'affichage sera de 700 pixels. Mais un pop-up peut ouvrir l'image en plus grand. Pour les images qui doivent pouvoir être zoomées (ou affichées en plus de 1400 pixels), faire un lien avec ouverture dans un nouvel onglet.
La plupart du temps, pour les images en alignement droit au sein du texte et qui n'ont pas d'utilité à être vues en pop-up, une largeur de 400 pixels suffit.

Les images d’introduction des articles doivent faire 475 pixels de large x 315 pixels de hauteur minimum (préférer 950 x 630)

Les images du Kiosque sont les images d'introduction des articles de la catégorie "Publication" et font 239 x 337 pixels minimum (préférer 478 x 674)

Les images des actualités font 255 x 258 pixels minimum (préférer 510 x 516)

Les images de l'agenda font 240 x 140 pixels minimum (préférer 720x420)

Les images d'introduction des articles du bandeau haut font 1900 x 725 pixels

Les images du bandeau supérieur en page d'accueil (articles "A la une") font 1900 x 723 pixels

Les images du bandeau supérieur en page interne font 1900 x 395 pixels

Les images de la colonne latérale interne (géré par les modules) font 300 pixels de large.

Les images de la galerie en bas de l'accueil font 330 pixels de haut minimum (préférer 660 pixels)

Affichage en début d'article (ici, titre 3)

Les images d'introduction doivent être chargées via l'onglet "images et liens"

Affichage en cours d'article

Image en paysage :
Largeur conseillée 40 %
avec un alignement droit,
une marge gauche de 10 pixels
une marge basse de 5 pixels.

Si l'image est en portrait, une largeur de 30% peut être préférable.

Titres

Les titres des images doivent correspondre à la description de l'image car ils seront lus et référencés. Il est préférable de bien nommer les fichier (en décrivant en 1 à 5 mots l'image) avant de les importer sur le site.
Si on décide d'intégrer une grande image ou un tableau, la largeur maximale pourra être de 100% mais 80% en alignement centré est plutôt conseillé.

Liens

Lorsque vous créez un lien, un style prédéfinit s'applique. Les liens peuvent pointer vers :

un site externe
un article interne au site
une image, un document
un formulaire
un envoi d'email...

Un lien vers un site externe ou vers un document doit s'ouvrir dans une nouvelle fenêtre. L'adresse du lien peut être cachée si elle ne présente pas d'intérêt ou être montrée si on souhaite proposer à l'internaute de la mémoriser. Le titre du lien doit être renseigné car il apparaît au survol par la souris.

Tableaux

Tableaux

titre

Les tableaux s'affichent mal sur smartphone. Se limiter à 1 colonne de texte. Pour afficher de nombreuses images préférer Droppics.
Pour des tableaux complexes, proposez une image en pop-up ou un pdf en téléchargement.

gras

Les bordures ainsi que le fond des cases titres peuvent être colorés

Les textes peuvent être centrés ou en alignement gauche, le justifié est déconseillé

Des tableaux de style libre (sans bordures) peuvent également être utilisés pour aligner des contenus

Sauts de ligne

Les sauts de ligne éventuels doivent être réalisés en style paragraphe. Ne jamais utiliser de sauts de ligne pour aligner une image avec un texte (cela ne s'adapte pas suivant la taille des écrans).

Un retour à la ligne sépare chaque paragraphe (touche entrée).
Un retour à la ligne sans espace (maj + entrée) peut être préféré pour augmenter la cohésion entre 2 informations consécutives (énumérations, adresse postale...).