Auteur | Guidal (Philippe) |
Titre | Style Guide |
Lieu | Paris |
Date | 23 juillet 2010 |
Dewey | 006.7 GUI |
Classe | Systèmes multimédia (conception de pages web ; ouvrages généraux sur l’infographie et la synthèse des sons par ordinateur, l’utilisation de HTML et XML pour la création de documents hypertextes ; vidéo interactive) |
Notes | Document évolutif, en cours d’élaboration… Les
différentes sections sont accessibles à partir du menu
ci-dessous.![]() |
Style Guide
Généralités
Ce guide a pour objet de documenter tous les éléments qui, à un titre ou un autre, contribuent à façonner le style propre du site. Destiné tout d’abord à aider la mémoire du webmestre, il vise aussi à faciliter le travail de celles et ceux qui veulent bien collaborer avec lui et qui, peut-être, prendront un jour la relève. Accessoirement, il peut également servir à d’autres webmestres pour la conception et la maintenance de leur site.
Plusieurs considérations générales président au style de ce site. Elles sont exposées ici, sans ordre particulier pour le moment :
- Le site est un prolongement du bulletin, permettant aux lecteurs qui le souhaitent d’approfondir un sujet traité dans un article. À ce titre, la charte graphique du site doit rester simple, cohérente avec celle du bulletin, et être respectée dans l’ensemble des pages. On crée ainsi une identité visuelle caractéristique du site.
- Cette identité visuelle est renforcée par l’usage systématique de trois modèles de pages, correspondant aux trois grandes catégories de ressources : Template_Article.html (articles, documents, textes en général), Template_Quotes.html (citations) et Template_Table.html (liens).
- La mise en page doit être aérée, et le texte structuré en paragraphes bien distincts.
- Dans la mesure du possible, il faut éviter de changer l’emplacement et le nom des fichiers du site, afin de ne pas briser les hyperliens internes (ceux du site) et externes (ceux des autres). La structure du site a été déterminée de façon à correspondre à celle du menu : dix répertoires principaux regroupent les pages de ressources selon leur indice Dewey ; les pages d’intérêt secondaire, liées à l’administration du site (comme ce Style Guide), sont placées dans le répertoire racine ou un répertoire particulier. Les illustrations sont placées dans des sous-répertoire appropriés. Les pages de ressources sont nommées suivant les principes de la classification Dewey.
- Pour garantir l’accessibilité maximale et la maintenance la plus facile du site, on n’utilise que le HTML pour la structuration du contenu et une feuille de style pour la présentation. La dynamique du site peut se passer d’ASP, CMS, JavaScript (exception faite des besoins du module de statistiques), PHP et autres SSI. Le code CSS et HTML doit être valide, et les normes du W3C respectées.
- Toujours pour garantir l’accessibilité maximale du
site, celui-ci doit être lisible en mode texte pur (sans
feuille de style ni image). L’attribut alt des
balises
img
doit donc toujours être renseigné. - Le site doit rester lisible quels que soient le navigateur, la résolution d’écran ou le système d’exploitation de l’internaute. L’usage de fonctions spécifiques à certains navigateurs, notamment dans la feuille de style, ne doit nuire en rien à cette règle.
- L’accès aux grandes sections du site (accueil, bulletin et ressources) doit être aisé : à cette fin, un panneau de navigation est affiché en permanence, toujours au même endroit, dans toutes les pages. Ainsi, l’internaute n’est pas obligé de jouer systématiquement avec une barre de défilement (scrollbar) ou la molette de sa souris.
- Une navigation confortable suppose des temps de chargement les plus brefs possibles. Idéalement, les pages ne devraient pas peser plus de 50 Ko, ni prendre plus de trente secondes de chargement avec un MoDem 56k.
- Une lecture confortable suppose la plus grande rigueur grammaticale et orthographique possible.
Charte des
couleurs
Toutes ces couleurs sont web-safe.
black #000 |
blue #00f |
grass green #093 |
lime #0f0 |
purple #90c |
black 40% #999 |
black 20% #ccc |
red #f00 |
orange 1 #f60 |
orange 2 #f90 |
deep yellow #fc0 |
yellow #ff0 |
chalk #ff9 |
white #fff |