CHARTE GRAPHIQUE ET RECOMMANDATIONS POUR LA CONSTRUCTION DE SITES INTERNET FAMILLES RURALES

Transcription

1 CHARTE GRAPHIQUE ET RECOMMANDATIONS POUR LA CONSTRUCTION DE SITES INTERNET FAMILLES RURALES 7, cité d Antin PARIS Tel Fax Internet :

2 Sommaire 1. Objectif Identité visuelle Typographies Les pictogrammes Les couleurs Les gabarits Structure des pages Les éléments récurrents Les menus de navigation Les rubriques Structure du contenu Les textes Les tableaux Les images Les puces Les lignes Recommandations...10 Familles Rurales Page 2 mars 2004

3 1. Objectif Cette charte graphique a pour objet d'harmoniser l'ensemble des sites Internet réalisés par les fédérations Familles Rurales afin d'obtenir une identification et une lisibilité communes et cohérentes pour tous. Elle regroupe l'ensemble des codes graphiques et règles créés pour la communication visuelle d'un site Familles Rurales. Cet outil est mis à la disposition de tous ceux qui souhaitent créer leur site Internet en dehors du site national tout en se conformant au cahier des charges graphique de la version nationale. Le but est aussi de vous aider à faire un site qui vous corresponde, facile à actualiser, simple à consulter, agréable à visiter. La technique utilisée nécessite un minimum de savoir-faire dans le domaine de la création de pages HTML. Chaque document fourni (pages HTML, images, fichier PDF) peut être distribué aux responsables Familles Rurales qui en font la demande. Familles Rurales Page 3 mars 2004

4 2. Identité visuelle Elle est la base et doit servir de référence. Le placement des éléments constituant le «fond» de votre page doit toujours être respecté. Les couleurs, la taille des caractères, les images ne doivent pas être modifiées Typographies La police de caractères à employer est Arial. Elle est utilisée dans différentes tailles et couleurs selon la feuille de style fournie. Le fichier «page_exemple.htm» vous donne un exemple de toutes les possibilités offertes. Visualisation des différents formats de texte obtenus avec la feuille de style. Le nom du style est entre parenthèses. Familles Rurales Page 4 mars 2004

5 2.2. Les pictogrammes Ils servent à agrémenter votre mise en page. Ils sont regroupés dans le répertoire «img» fourni avec la charte graphique. Vous en trouverez une visualisation dans le fichier «page_exemple.htm». Certains d entre eux sont fournis en deux versions (couleur framboise et orange généralement) pour vous permettre de faire du «Rollover» (changement d image au passage de la souris) si vous le souhaitez. Vous pouvez éventuellement créer vos propres pictogrammes dans le respect de l ambiance du site Les couleurs L'ambiance du site doit être en accord avec les couleurs de référence du portail Familles Rurales. La palette de couleurs utilisables est donnée dans le fichier «page_exemple.htm». Familles Rurales Page 5 mars 2004

6 2.4. Les gabarits Ces gabarits ont pour rôle de guider et d'aider les rédacteurs à créer une mise en page conforme à la charte graphique. Pour utiliser un gabarit vous devez l ouvrir dans votre logiciel d édition HTML (Dreamweaver, Frontpage, ) et le compléter selon vos besoins. Ces gabarits sont joints au dossier «Charte graphique Familles Rurales» qui vous est présenté. page «index.html» est votre page d accueil Zone de placement de boutons, logos, page «contenu.htm» est le modèle de toutes vos pages internes Le bandeau vertical de la page d accueil disparaît pour laisser plus de place au contenu Familles Rurales Page 6 mars 2004

7 Commentaires sur l'exploitation des gabarits Vous ne devez pas modifier ou supprimer le code HTML qui constitue le «fond» de la page. Les pages sont construites à base de tableaux et sont dans un format limité pour un affichage en 800 pixels de large. Pensez à toujours utiliser des tableaux pour intégrer votre contenu. Vous avez des exemples de contenu dans les gabarits. Les images doivent toujours se trouver dans le répertoire «img». La feuille de style «fr_styl.css» doit se trouver à la racine de votre site. Si le bas de page ( Familles Rurales Mentions légales Webmaster) ne vous est pas utile vous pouvez le supprimer. 3. Structure des pages 3.1. Les éléments récurrents Les informations récurrentes comme le logo Familles Rurales, les menus de navigation et les constituants de «fond» de la page devront impérativement être présentes sur chacune des pages. Un clic sur le logo Familles Rurales ramène à la page d accueil Les menus de navigation Menu principal Ce menu de navigation placé sur la gauche de la page regroupe la totalité des liens vers les rubriques et sous-rubriques. Il sera présent sur toutes les pages. Menu secondaire Ce deuxième menu placé sous le bandeau-image en haut de la page a pour objectif d'apporter des informations complémentaires aux internautes qui consultent le site. Il peut contenir des liens vers une page «Contacts», «Plan du site», «Petites annonce», Il vous appartient de décider si vous souhaitez l utiliser ou pas. Dans le cas ou il apparaît sur la page d accueil, il est obligatoirement repris sur les pages de contenu. Menu «sommaire» de page Dans certains cas, en particulier pour des pages au contenu important, il peut être utile de mettre en place des liens internes à la page en cours. Ce troisième niveau d interactivité est placé directement dans la page et sert de «sommaire». Ces liens sont de type «Ancre», pointent vers une partie de la page et sont accompagnés, en bas de la zone pointée, par un retour «Haut de page» (image fournie), indispensable à ce type de navigation. Menu «Bouton» Vous pouvez utiliser des boutons interactifs que vous placerez sur le côté droit de la page d accueil. Vous en avez un exemple concret sur le fichier «index_exemple.html» ou sur le portail Familles Rurales («Appel à témoignages», «Accès journalistes») Familles Rurales Page 7 mars 2004

8 3.3. Les rubriques Vous pouvez mettre autant de rubriques et sous-rubriques que nécessaire tout en sachant que : Si une rubrique n a pas de sous-rubrique le lien se fera directement sur son titre. Si une rubrique possède une ou plusieurs sous-rubriques, on affiche en retrait les sous-rubriques et le lien se fera sur le titre de la sous-rubrique (et éventuellement de la rubrique si vous voulez faire une page d introduction). Menu «sommaire» de page Menu secondaire Menu principal avec rubriques et sous-rubriques Retour haut de page Familles Rurales Page 8 mars 2004

9 4. Structure du contenu 4.1. Les textes Les documents doivent être mis en page avec l aide de la feuille de style «fr_styl.css». Vous avez la possibilité d avoir plusieurs formats pour les titres, sous-titres et textes, séparer les blocs de texte avec des lignes horizontales, faire des liens sur un mot, mettre des fichiers en téléchargement, 4.2. Les tableaux Les tableaux n ont pas de bordure et le fond des cellules est coloré (voir 2.3. «Les couleurs») ou transparent. Les dimensions doivent impérativement être en % pour éviter de casser la structure de la page et ne pas dépasser 98% pour laisser un peu de marge de chaque côté. Un espacement de cellule de 2 et un remplissage de 4 est conseillé Les images Les images ont un rôle important dans la cohérence graphique du site web. Elles ont été créées dans le but d'aider à la navigation sur le site ou agrémenter les pages. Les images sont regroupées sous un répertoire "img". Recommandations : Utilisez les formats standard du web : gif et jpg La largeur ne devra pas dépasser un maximum de 550 pixels dans les pages internes de contenu et 450 pixels dans la page d accueil. Ne mettez pas d image dépassant Ko sous peine de ralentir l affichage de la page. Une page avec des images ne doit pas «peser» plus de 100 Ko Les puces Ces éléments graphiques peuvent être utilisés pour attirer l attention sur certains textes ou constituer des listes. Quelques puces sous forme d images sont fournies dans le répertoire «img». Vous pouvez également créer une puce (ronde) en texte en appuyant sur la touche «ALT» de votre clavier et sans relâcher taper «0149» sur le pavé numérique. Lui donner ensuite le style «puce» Les lignes Les lignes peuvent servir à aérer le texte et structurer le corps de la page. Deux styles sont mis à disposition (HRorange et HRframboise). Familles Rurales Page 9 mars 2004

10 5. Recommandations Générales : Techniques : La page d'accueil d'un site Web et son ergonomie a un impact immédiat, il faut aller à l'essentiel et permettre au visiteur de trouver rapidement ce qu il cherche. La vitesse d affichage des pages est primordiale, 20 secondes est la bonne durée de chargement d une page. Au delà de 30 secondes, l'internaute passe son chemin. Ne surchargez donc pas vos pages avec des images trop lourdes. Les éléments décoratifs, comme les fonds de page ou les boutons, les principes typographiques (comme la police et la taille des caractères) se retrouvent d'une page à l'autre. Les pages qui ne contiennent pas de graphiques sont ennuyantes alors que les pages qui en contiennent trop sont envahissantes. Ne pas hésiter à vous inspirer du portail Familles Rurales Ne pas utiliser les accents et les espaces dans les noms de vos fichiers HTML. Les noms de fichiers doivent être en minuscules. Ne donnez pas de noms trop longs à vos fichiers et répertoires. N hésitez pas à placer vos pages dans des répertoires qui portent le nom de vos rubriques. Familles Rurales Page 10 mars 2004