Chapo Petit texte d'intro
Titres et styles (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" sans être justifié. Si on a encore des sous-titre, on va utiliser du "Titre 3" puis du "Titre 4". "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 des raisons de lisibilité, privilégiez les textes en alignement gauche, ne pas écrire en justifier, et réserver le "centré" à des textes de moins de 3 lignes.
Les introductions doivent être en titre.
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 3)
Images
Les images sont en .jpg (meilleure compression), .png ou .gif. Sauf besoin spécifique (affichage plein écran) limiter la taille du fichier à 850 pixels comme dimension maximale (classiquement 400 pixels), avec une qualité de 72 DPI, compression 80% (si jpg).
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.
Dimensions spécifiques d'images
La largeur maximale d'affichage des images dans un article est de 850 pixels.
Les images des bandeaux hauts (sliders) font : 1898 pixels de large x 688 pixels de haut
L'image initiale s'affichant au chargement se situe dans images/diaporama/ diaporama.jpg. Il faut la remplacer par une image de même nom et même dimension (1898 x 688).
Actualité principale : 550x300
Actualités secondaire : 230 x 203 pixels
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 apparait au survol par la souris.
Tableaux
Tableaux | |
Les tableaux comprenant plus d'une ou 2 colonnes de texte peuvent dépasser la largeur de l'écran sur smartphone. Il est conseillé de les remplacer par des pdf, des images avec pop-up ou des textes comprenant titres et sous-titres. |
|
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 et retours à la ligne
Chaque tableau est encadré par un saut de ligne.
Les sauts de ligne doivent être réalisés en style paragraphe.
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...).
Couleurs de la charte graphique
#0099A1 | |
#6EC5CA | |
#454B56 | |
#E30613 | |
#8EA825 | |
#FFFFFF |
Couleurs de la charte graphique
Paragraphe : Ubuntu 15.3667px
Titre 1 : Ubuntu 36px
Titre 2 : Ubuntu 25.6px
Titre 3 : Ubuntu 20.8px
Accordéons
Placer un titre 5 et encadrer la zone à faire dérouler entre des balises <div> et </div>.
Dans l'onglet "paramètres" de l'article, mettre le type de mise en page en "accordéon".
Encadré sur un sujet en particulier |
qsd qsdq qsdD |