Conseils
pratiques
pour la
composition d'une page web
[
le
contenu
] - [ le
"look" ]
- [ les
images
] - [ les
emprunts
]
Le contenu
Une
Home Page devrait être relativement courte et offrir des
renseignements sur les buts du site, ainsi qu'une barre de navigation
qui permet d'accéder aux autres pages du site. L'idéal
pour une Home Page est de "tenir" sur un seul écran.
C'est une présentation de base, une sorte d'index aussi.
Une Home Page qui déferle sur des écrans successifs
est trop longue: les sujets différents traités
sur une telle page devraient être séparés
et placés dans d'autres pages.
Toute
page web devrait contenir une barre de navigation, des liens,
et des informations. Il est préférable d'exposer
un seul sujet par page, et de faire des liens vers d'autres pages
qui contiennent d'autres sujets.
Une
page web qui ne contient aucun lien vers l'extérieur s'appelle
page "cul-de-sac". La Haute Savoie a choisi de faire
un site cul-de-sac pour promouvoir le tourisme. Bien entendu,
il n'y a dans ce site aucun lien vers des pages hors du site.
Cette pratique est contraire aux bons usages de l'internet, et
il est souhaitable que personne ne mette de liens vers un site
pareil!
Le "look"
La
tentation est forte de mettre de tout sur une page. Six polices
différentes, des sons, tout plein d'images, et de faire
de chaque page un chef d'oeuvre unique en son genre. Mais un
tel effort sur la forme lèse le fond; mieux vaut donner
un "look" d'ensemble au site, qu'un surfeur puisse
s'y retrouver facilement. Un style de couleurs de fond qui se
répète sur les différentes pages, un logo,
des illustrations qui permettent à toutes les pages d'avoir
un "air de famille".
Passé
la première page, le surfeur pourra se concentrer sur
les informations contenues dans la page plutôt que d'être
distrait par une mise en page anarchique .
Il
est conseillé de mettre le contenu dans une "table"
de manière de manière à ce que la mise en
page reste fixe, quel que soit le browser qu'utilise le
surfeur, quelle que soit la résolution de son moniteur.
Une table vous permet de contrôler la composition de votre
page. La page que vous lisez, là, oui, celle-ci, est composée
de trois tables, l'une après l'autre. (Sans compter les
"frames", cadres qui permettent de placer un élément
fixe, comme la barre menu que j'ai placée à gauche
. . . )
Les
quelques premières années de web, il était
normal de composer des sites qui se présentaient bien
sur un moniteur 640x480 (moniteur 14 pouces). Maintenant, de
plus en plus de surfeurs utilisent une résolution de 800x600
ou plus, ce qui permet de composer les pages web différemment
.
Mais
sachez que la lisibilité d'une page est limitée
par une largeur illimitée. Autant les surfeurs aiment
monter et descendre le long d'une page, ils n'aiment guère
devoir glisser la fenêtre de droite à gauche . .
.
Ces
pages-ci ont un "frame" à gauche large de 120
pixels. Les tables du frame principal ne dépassent généralement
pas les 480 pixels. Ce qui fait que le tout est lisible sur un
écran 640x480 .
Les images
Heureux
ceux qui sont câblés! Les autres, la forte majorité
des surfeurs, doivent attendre patiemment le chargement de vos
images. Ce qui peut être long, très long. Quand
vous mettez une image de 150K sur votre site web, il faudra attendre
que l'image entière soit chargée avant qu'elle
n'apparaisse à l'écran, quelle que soit la taille
à laquelle elle doit être affichée... Il
est donc essentiel de
1)
réduire une image à sa taille affichée
2)
compresser le fichier, puis
3)
l'uploader au serveur où vos fichiers sont hébergés.
Si vous souhaitez afficher
de grandes images, il est préférable de mettre
sur votre page une petite image avec un lien vers la grande;
ce sera au surfeur de décider s'il a la patience de charger
une grande image, ce qui pourrait lui prendre longtemps s'il
a une mauvaise connexion... Cliquer sur l'image à droite
( petite [180x120] elle "pèse" 6K ) pour charger
une version 640x480 de cette même image. La grande image
pèse 150K, ce qui signifie qu'elle prendra 25 fois plus
longtemps à charger que la petite... Avec un modem 28,8 la petite image prend 3 secondes à charger, et la grande 75 secondes... Je n'oserais pas
vous imposer la grande sans que vous ne la demandiez !
Pour
réduire vos images et compresser vos fichiers, vous aurez
besoin d'un traitement d'images. (PaintShop Pro, Adobe PhotoShop,
ULead PhotoImpact, entre autres). Vous réduirez l'image
à la taille ( en pixels ) que vous désirez que
l'image soit affichée. En général, les images
web ne dépassent presque jamais 200 pixels de haut ( l'image
du chat ne fait que 120 pixels de haut... ) Ensuite, vous compresserez
le fichier pour le rendre plus petit, donc plus rapide à
charger.
Vous
avez le choix de deux formats graphiques ; GIF et JPG.
GIF
est un format 256 couleurs; il permet de créer des fonds
transparents ainsi que des fichiers animés. Il a l'avantage
de conserver la netteté d'une ligne, mais il traite moins
bien les dégradés de couleurs que l'autre format,
JPG,
conçu spécifiquement pour l'affichage de photographies.
Ce format affiche 16 millions de couleurs et permet d'appliquer
un taux de compression variable. Pour illustrer ces formats,
commençons avec une image réduite à la taille
250x188 ;
cette image,
non compressée, "pèse" 138k. Nous la retrouvons
ci-dessous traitée en JPG ( à différents
taux de compression ) et en GIF (avec plus ou moins de couleurs
) ; comparez la qualité relative des images par rapport
à la taille de chaque fichier :
