Règle 4 - Présentation
1. Recommandation
Toute page sur IntraComm devra utiliser le template standard d'IntraComm.
2. Justification
Un travail d'harmonisation des lignes graphiques d'IntraComm aidera l'utilisateur à identifier plus facilement dans quel environnement il navigue. Ce chapitre servira de guide pour la présentation graphique des pages sur IntraComm. Il comprend le template à utiliser lors de la création de nouvelles pages pour IntraComm.
3. Description
3.1 Planning
Même s'il vous semble facile et tentant de réaliser à la volée la mise en page HTML au fur et à mesure de la création, appuyez-vous autant que possible sur un plan fonctionnel définissant et identifiant les caractéristiques des différents éléments (disposition standard, titres : taille, couleur, position; navigation : position, nombre, type, .) de chaque page Web avant de la créer.
3.1.1 Pourquoi utiliser des templates ?
La préparation d'un modèle (template) définissant un standard de mise en page est idéalement à envisager dès la conception du site. Ce modéle doit se baser sur le template standard d'IntraComm. Cette étape permettra de définir, pour l'ensemble des pages, la mise en page générale applicable à toutes les pages (ou à une famille de pages), la présentation des titres et des sous-titres (taille, disposition), le placement des graphiques (logo et images d'appui), les liens et la barre de navigation par exemple.
3.1.2 Lisibilité et visibilité de l'information
Lors de la création d'une page en HTML veuillez tenir compte des conseils suivants :
- respectez la résolution standard des écrans (800 x 600 pixels) et veillez à une bonne visibilité lors de l'impression de l'écran,
- évitez des textes trop longs. Le contenu d'une page ne devrait pas excéder 4 écrans en hauteur,
- veillez à une bonne lisibilité d'ensemble, avec une disposition aérée du texte et l'utilisation de polices de caractère faciles à lire (Arial, Verdana, Helvetica sont les plus standard). Veuillez noter que les polices que vous emploierez et qui ne sont pas installées sur l'ordinateur de l'utilisateur seront automatiquement remplacées par une police de défaut. En vue d'une meilleure intégration de vos pages dans un éventuel outil de gestion de contenu (web content management), nous vous encourageons à utiliser les feuilles de style (CSS) pour définir l'affichage de votre contenu. Des styles peuvent être appliqués de différentes manières dans le code HTML même. Nous recommandons cependant de regrouper tous vos styles dans un fichier central pour les raisons suivantes :
- un fichier central vous permet de modifier le formatage de votre texte sans devoir toucher à chacune de vos pages individuellement,
- il vous permet de garder une homogénéité dans l'aspect de toutes vos pages,
- le code est compact, mémorisé par le navigateur et n'est donc pas chargé individuellement pour chaque page de votre site.
- Une feuille de style sera mise à disposition des producteurs d'information à l' adresse suivante : http://www.cc.cec/home/style/intracomm.css
- pour mettre en évidence des parties de texte, utilisez les caractères gras ou italiques. Evitez d'utiliser le mode souligné à ces fins, le souligné indiquant les hyperliens,
- utilisez des couleurs de texte bien contrastées avec le fond de l'écran, et évitez l'utilisation de texte clair sur un fond sombre pour éviter des problèmes de lisibilité après impression,
- mettez en évidence la structure du site dans la page d'accueil, afin de donner une vue d'ensemble et immédiate de ce qui peut être trouvé sur le site,
- respectez une harmonie dans la mise en page et l'identité visuelle de votre site,
- évitez de charger votre site avec trop d'éléments graphiques ou avec des animations longues à charger,
- restez sobres et simples dans vos choix graphiques.
4. Le template standard
Cette version complète du template est obligatoire et comporte les éléments suivants :
Haut de page
Les éléments de la navigation au sein d'un même sous-site ou de pages d'un même thème se rattachent au header qui représente l'identité visuelle des pages en question. Dans l'illustration ci-dessus, il s'agit des boutons « quoi de neuf », « recherche », « index », « contact » et « aide » ainsi que le choix des langues. Devra également figurer être présent dans le header un lien vers une clause de confidentialité, une clause de non-responsabilité et des règles de protection de la vie privée (voir chapitre 9) Le deuxième élément de navigation est le ou les liens vers les niveaux d'informations supérieurs. Cette navigation se trouve juste en dessous du header et pour des raisons de lisibilité et de facilité d'utilisation doit être en mode texte. Cet outil permet à l'utilisateur de facilement retourner au niveau d'information supérieur.
Le template proposé peut être adapté graphiquement en fonction du contenu des pages (voir illustrations ci-dessous), sans changer l'emplacement des éléments de navigation.
Bas de page
En bas de chaque page devront se retrouver les éléments de navigation au sein du site ainsi qu'un retour en haut de la page. Devront impérativement figurer également à cet endroit :
- le nom de la personne ou du groupe responsable du contenu de la page en question. Nous recommandons un lien vers la description de l'unité dans le Guide de Service,
- la date de dernière mise à jour du contenu de la page,
4.1 les éléments du template
Le titre
Un titre doit être présent sur chaque page. Il servira :
- àclairement identifier la page
- aux moteurs de recherche lors de l'affichage des résultats de la recherche
- àclassifier les favoris
Le titre est l'élément d'identification et de reconnaissance d'une page.
N.B. Ce titre est celui compris dans le tag <TITLE> et non celui compris dans les métadonnées (voir chapitre 7 sur les métadonnées) mais le contenu des deux doit être identique.
Ce titre devra être court et précis. Evitez les titres trop longs car ils risquent d'être tronqués. Evitez également les caractères spéciaux tels que &, @, $, £, etc. Le titre devra être dans la langue de la page.
Bannière d'identification
Cette bannière, comme décrite sous le point précédent, sert d'identité graphique à un site ou une partie d'un site.
- L'image utilisée pour la bannière ne devrait pas excéder les 700 pixels en largeur
- La version linguistique devra correspondre à celle de la page
La création personnalisée d'une telle bannière pourra être réalisée par nos soins pour tous ceux qui ne disposent pas des logiciels nécessaires.
Choix de langue
Si plusieurs versions linguistiques sont disponibles, elles devraient être liées entre elles par le biais d'images ou d'icônes. Pour plus de détails sur le multilinguisme, référez-vous au chapitre 6 .
Navigation verticale
Un lien vers les niveaux d'informations supérieurs en commençant par un lien vers la page d'accueil d'IntraComm ainsi que le titre du site ou sous-site en question devra obligatoirement figurer en haut de chaque page (ce titre étant le titre logique du site ou sous-site, et non pas le nom du répertoire hébergeant les fichiers). Deux niveaux de navigation sont obligatoires. Le producteur d'information pourra en prévoir plus selon les besoins du site. Pour des raisons de lisibilité et de facilité d'utilisation, cette navigation doit être en mode texte :
>>IntraComm > niveau x > page x
Les liens devront pointer vers les niveaux supérieurs dans la même version linguistique que la page elle-même.
Autres outils
L'identification de la personne ou du groupe responsable du contenu de la page devra être intégrée dans chaque page. Un bouton ou lien « contact » donnera à l'utilisateur la possibilité de joindre ce ou ces responsables via un formulaire électronique ou un lien « mailto ».
Un lien vers le moteur de recherche d'IntraComm est également à prévoir. Libre aux producteurs des pages d'ajouter un lien vers l'index thématique.
D'autres outils de navigation au sein du site peuvent également être introduits comme par exemple un lien vers une page de nouveautés si disponible.
Pour tous les boutons d'outils de votre site, n'oublier pas de spécifier s'il s'agit d'un outil lié à IntraComm ou si, au contraire, il est lié spécifiquement à la page ou au sous-site en question. Par exemple le bouton « recherche » peut être lié au moteur de recherche d'IntraComm, mais peut également se référer à un outil de recherche interne à votre sous-site. Vous pouvez différencier les deux à l'aide du tag <alt> (p.ex. « recherche sur ce site » ou « recherche sur IntraComm »).
Date de dernière modification
Une date de dernière mise à jour du contenu de la page devra figurer sur chaque page si elle n'est pas déjà reprise dans les métadonnées (voir chapitre 7 sur les métadonnées).
4.2 Application
Dans la boîte à outils vous trouverez la possibilité de télécharger la version standard du template en anglais et en français ainsi que tous les éléments visuels s'y rattachant.
