Voici une douzaine
(et plus...) de conseils, dégagés à partir de chartes
graphiques de sites portails ou sites centraux, afin de vous aider à
construire, développer et animer un site Web, où le souci
d'harmoniser vos pages écrans et de les mettre à jour régulièrement,
indépendamment des règles ou attributs spécifiques
à la typographie et à l'iconographie que vous choisirez,
est présent. Un site doit demeurer vivant et évolutif
tout comme la charte graphique qui le sous-tend.
Trois qualités se dégagent:
-mise en page aérée (texte
concis et informations facilement accessibles),
-rapidité de chargement (pas trop
de photos et peu d'animations) et
-simplicité dans la navigation .
CONSTRUCTION
DES PAGES
Pour faciliter le travail de conception
d'un site et garantir une mise en page-écran valide d'une plateforme
à l'autre, d'un navigateur à l'autre, il est souvent recommandé
:
d'optimiser les pages pour un écran
paramétré à 800 x 600 pixels minimalement;
de mettre en écran des objets
textuels et iconiques dans des tableaux transparents (largeur maximale
de 700 px, centrés dans la page pour les textes) plutôt que
dans des cadres ("frames"). Ces derniers pouvant créer des problèmes
à l'impression mais surtout à l'indexation par certains moteurs
de recherche . ET pour la mise en écran finale de tous les
objets déjà en tableaux transparents, de les inclure dans
un grand tableau transparent, cadré à gauche et délimité
en pourcentage cette fois. Ainsi, la page-écran s'ajustera
à la taille des écrans des internanutes et pourra être
imprimée sans pertes d'information.
Cependant, de choisir une mise en
page avec "frameset" peut être rentable pédagogiquement, à
condition d'inclure peu de cadres, deux idéalement : la barre de
navigation (stable et permanente d'une page à l'autre) et le corps
principal de la page dans lequel un ou plusieurs tableaux transparents
pourront disposer des textes et des images.
DÉCOUPAGE
D'UNE PAGE-ÉCRAN
Étant donné que le
découpage d'une page-écran s'articule autour de trois grands
axes, voici des recommandations relatives à chacun:
-
l'axe de l'en tête (balise
<head>) donne le titre à votre page (indépendamment du
titre inscrit dans le corps de la page) et même s'il est invisible
pour les visiteurs, c'est à partir de ce titre que les moteurs de
recherche pourront référencer votre site. Donc, choisissez
un titre explicite du sujet abordé.
-
l'axe du corps de la page (balise <body>)
est divisé en zones ou colonnes : le 1/3 - 2/3 est une convention
souvent respectée, du moins pour les pages modèles (de contenu)
et non pour la toute première page d'entrée qui doit d'abord
séduire. De plus, choisir d'écrire le grand titre
de la page
en mode image/gif (600 pixels de largeur max) est un avantage
si votre choix typographique est le moindrement recherchée;
-
l'axe du bas de page ne doit pas être
oublié, même s'il n'a pas de balise particulière; on
y inscrit la
dernière date des modifications, le courriel
du webmestre, s'il varie d'une rubrique à l'autre, et
souvent certains icônes de navigation (retour à la page d'accueil,
à la page précédente ou suivante) .
TAILLE
DES PAGES
-
Évitez d'utiliser des outils
web qui dépendent d'un navigateur pour leur bonne lecture, tels
que le DHTML, les calques (layers dans Dreamweaver), VBscripts, à
moins de pouvoir travailler avec le code HTML4;
-
Évitez d'incorporer directement
dans le texte des images trop grandes; choisissez de préférence
des petites images avec un lien vers les grandes (précisez
aussi le format du fichier et sa taille en Kilo-octets).
COULEURS
À l'exception de la page d'accueil/entrée,
la couleur de fond des pages de contenu où le texte domine,
devrait être en blanc (ou une couleur neutre), sans images d'arrière-plan.
Pour le fond des tableaux ou menus, une zone colorée est acceptable,
étant donné qu'il s'agit de lire des mots-clés ou
des symboles et non du texte continu.
IMAGES
Compressez les images à
72 dpi en JPG pour les photos et en GIF pour le texte ou le dessin sans
détails (pictogrammes/icônes). Les intégrer judicieusement
à cause de leur temps de chargement.
IDENTIFICATION
ET NAVIGATION
-
Marquez votre site, dès l'accueil,
avec une image symbolique qui pourra être traduite sous forme
de
logo, par la suite et garantir une identité à chacune
de vos pages;
-
Rédigez un sommaire (sous-menu)
dans la page de chaque rubrique principale et insérez-le à
gauche, dans un espace stable, pour favoriser la navigation à l'intérieur
de chaque rubrique;
-
Insérez un hyperlien avec la
page
d'accueil principale, systématiquement au même endroit
sur toutes vos pages de contenu ;
-
Rendez disponible une barre de navigation
du menu principal, stable et constante, sur toutes les pages; le choix
de l'emplacement, en haut à l'horizontale, est souvent favorisé
.
ANIMATION
-
Évitez l'animation d'objets
si la lecture du texte domine;
-
Créez un groupe de discussion
pour faciliter les échanges de compétences et pour animer
le site si vous avez des partenaires pour l'enrichir .
Un dernier
CONSEIL, "plate" mais utile...
Vérifiez vos pages
sur les navigateurs en ligne (et sur les deux plateformes, Mac et PC idéalement)
afin d'évaluer le temps de chargement des images et la disposition
des objets à l'écran.
|
