
Règles de conception d'un site
Si, comme tout langage et au travers de la syntaxe, HTML permet une liberté de
conception d'un document, il est des considérations matérielles qui font
naître des règles.
Savoir rester petit
Ainsi, la faible vitesse de chargement par le réseau téléphonique impose
la réduction de la taille des fichiers transmis. Pour éviter un temps de
chargement trop long, BARLIER (Décembre 1996) recommande de ne pas dépasser
32 kilo-octets, soit 32*1024 caractères ASCII de code HTML. C'est un conseil
similaire que formule SIEGEL (1996), avec une taille de page (texte et images) avoisinant
30 Ko, une ou deux pages pouvant aller jusqu'à 70 Ko.
Il sera donc préférable de supprimer l'indentation dans le code HTML pour les gros
fichiers. Quelques caractères ASCII de valeur 32 (espace) seront ainsi
économisés. De même l'information présentée dans le document
devra être courte et précise.
En corollaire, les images devront être compactées au maximum, on limitera leur
nombre et on s'efforcera de les réutiliser. Par exemple, une image GIF déjà
téléchargée se trouve dans ce qu'on appelle un cache (buffer) sur
l'ordinateur client. L'utiliser à nouveau signifie la récupérer dans le
cache au lieu de la télécharger encore une fois.
Il est, de plus, une erreur à ne pas commettre une image GIF 400*250 pixels faisant
environ 40 Ko est téléchargée puis réduite à 200*125
grâce aux attributs WIDTH et HEIGHT. Ceci est aberrant si elle n'est utilisée
qu'une fois : il vaut mieux la réduire d'abord à 200*125,
avec un logiciel de dessin comme PhotoShop sur Macintosh (ou D2M, ou Studio Photo, restons
quand même ataristes...), avant de la placer sur le serveur.
La taille de l'image à télécharger sera ainsi réduite à
environ 20 Ko.
Question de formes
Concernant la structure du site (qui regroupe l'ensemble des documents HTML), BARLIER (1996)
propose de séparer la page d'entrée du site en deux. La première, la page
d'accueil, tiendra en entier sur l'écran. Elle sera visuelle (un coup d'oeil doit suffire
pour savoir de quoi le site est fait) et rapide à charger (pas plus de 15 secondes selon
SIEGEL (1996)).
C'est en somme la porte d'entrée du site, qui permettra l'accès à la
seconde page : le sommaire.
L'auteur recommande pour ce dernier d'utiliser des petites images significatives ou icônes
accompagnées d'un texte court et explicatif, le tout présenté sous la forme
d'un tableau invisible (BORDER=0). En cliquant sur ces icônes, on accèdera aux
différentes pages du site.
Cette configuration permet entre autres de ménager la susceptibilité de
l'internaute quant aux temps de téléchargement (il a un aperçu succint
avec la page d'accueil), de structurer le site et d'éviter qu'il se transforme en un
labyrinthe.
SIEGEL (1996) recommande la même struture, avec entre page d'accueil et sommaire, une
suite de petites pages formant un tunnel d'entrée, afin d'accroître "l'impatience
des visiteurs à mesure qu'ils s'approchent du coeur du site".
Le même auteur a classifié les sites en plusieurs générations :
- la première décrit des sites linéaires, comportant surtout du texte
aligné à gauche, des lignes horizontales, et agrémenté de quelques
images
- la deuxième est basée sur des menus, icônes et technologies diverses
apportées avec les extensions Netscape et Microsoft (comme <BLINK> ou les
images-maps), une page d'accueil orientant tout de suite vers les autres pages du site
- la troisième se veut basée plus autour de la création que de la
technologie, obéissant aux règles de typographie et d'infographie, l'utilisation
des <TABLE> invisibles et du pixel dilaté transparent permettant une mise en page
très élaborée et dont le code HTML résultant est compatible avec
tous les navigateurs.
L'astuce du pixel dilaté transparent consiste à utiliser une image au format GIF
ne contenant qu'un pixel et dont la couleur sera affectée à la transparence. On
ne verra ainsi jamais ce pixel. A l'aide des attributs WIDTH et HEIGHT, on peut dilater
celui-ci respectivement en largueur et/ou en hauteur. Placé entre les différents
éléments du texte, il servira de "blanc" et permettra de séparer ces
mêmes éléments au pixel près. On peut donc aligner parfaitement
une image par rapport au texte, réaliser un interlignage ou un retrait gauche
précis, etc...
Divers autres conseils sont donnés, comme par exemple :
- utiliser le cube de couleurs, palette déterminée à partir de la
construction d'un cube et utilisée par la plupart des logiciels graphiques (et donc les
browsers)
- lisser les images (anti-aliasing) pour éviter les effets d'escalier
- ajuster l'image en avant plan avec l'image BACKGROUND et ne pas avoir d'effet halo (par
exemple une image à contour blanc sur un fond noir)
- réduire le nombre de couleurs de la palette des images, qui permet entre autres de
réduire la taille des images
- tenir compte de la lisibilité du texte sur l'image BACKGROUND.
Conclusion
La vitesse de tranfert impose par sa faiblesse la concision des informations. On a en balance
d'un côté l'aspect visuel fourni par les images, les formatages et les styles du
texte, la structure du site, et de l'autre côté, la consommation de la bande
passante, c'est-à-dire le temps pris pour charger plus de données. Tout est
ici affaire de compromis. La conception du site relève donc autant de l'intelligence que
du sens de l'esthétique.
Rajah Lone
nef@mygale.org
transcription le 15 Février 1998