Accessibilité Extranet Téléchargement Rechercher un article

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" en alignement gauche. 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 les recommandations concernant l'accessibilité de vos contenus, vous référer à la section "RGAA" de votre guide d'utilisation.

Longueurs (titre 2)

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 (titre 2)

Les images sont en .jpg (meilleure compression), .png ou .gif. Limiter la taille du fichier à 820 pxl comme dimension maximale (classiquement 400 pixels), avec une qualité de 72 DPI, compression 80% (si jpg).

Format des images d'introductions : 424x300

Format des unes du kiosque : 291 x 390

Format des bandeaux hauts : 1900x550 sur l'accueil et 1900x450 en page interne (attention à bien mettre en jpg 80%, si possible 72 DPI, c'est particulièrement important pour ces grandes images)

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

Les images d'introduction doivent être chargées via l'onglet "images et liens". L'image par défaut est ici : /images/site/no-picture.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.
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

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

Les couleurs de la charte graphique sont

  #ED8120
  #31366C
  #EB9D52
  #F2F1F5
  #6069A3
  #FFFFFF

 

Polices et accordéons

Textes d'introductions d'articles.

Paragraphe gras

Chaque nouveau titre est précédé d'un saut de ligne. Chaque tableau est encadré par un saut de ligne.

Texte orange

Texte bleu

Texte gras

Accordéon

En passant par l'onglet "code" en haut à droite de l'éditeur de texte : Mettre dans le code <div class="accordion"> avant le passage comprenant les accordéons.

Encadrer les contenus sous les titres 3 avec des balises <div> et </div>

Le contenu d'un accordéon déroulant peut comprendre des images, liens, sous-titres, etc., mais pas de diaporama Droppics.

Finir par un </div> pour clore la section accordéon démarrée avec le code <div class="accordion">
Nord Est Bearn
Position

BP 26 - 1, rue Saint Exupéry,
64160 Morlaàs

Téléphone

05 59 33 46 10

Horaires

Du lundi au Jeudi :
8h30-12h puis 13h30-17h30

Le vendredi :
8h30-12h puis 13h30-17h