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.

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 à 750 pxl comme dimension maximale (classiquement 400 pixels), avec une qualité de 72 DPI, compression 80% (si jpg).

Affichage en début d'article (titre3)

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.

Dimensions spécifiques d'images

La largeur maximale d'affichage des images dans un article est de 750 pixels.

Les images d'introductions des événements de l'agenda doivent faire au moins :  290 x 330

Les images d’introduction d'articles doivent faire idéalement 418 pixels de large x 224 pixels de hauteur.

Les images dans les articles n’ont pas besoin de faire plus de 600 pixels de large. Vous pouvez cependant garder les proportions hauteur/largeur que vous voulez.

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
pdf

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.

pdf

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

Les couleurs de la charte graphique sont

Exemple d'accordéon

Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Section 2

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

Section 3

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

  • List item one
  • List item two
  • List item three

Section 4

Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Bloc rouge bas d'article - S'assurer, une obligation

En tant que locataire, vous devez impérativement assurer votre logement le temps de la durée du bail.

La loi et l’engagement de location que vous avez signé vous imposent d’être assuré et de payer régulièrement vos cotisations d’assurance. Si ce n’était pas le cas, votre bail prendrait fin et vous ne seriez plus couvert.

À tout moment, Bourg Habitat peut vous demander de présenter votre attestation d’assurance. À défaut, il pourra résilier votre contrat de location. En cas de sinistre, incendie, explosion, dégâts des eaux, vous pouvez être tenu pour responsable des dommages causés à l’immeuble, même en votre absence.

Pour la garantie vol, informez-vous des mesures de prévention à respecter pour que l’assurance s’applique.

En cas de sinistre, prévenez votre assureur d..