En particulier
La résolution d'écran HomeUoDown

Les concepteurs débutants posent souvent la (mauvaise) question : "Pour quelle résolution d'écran doit-on concevoir un site ?". C'est une mauvaise question car vous ne connaîtrez jamais la résolution d'écran de votre visiteur. Et une annotation du genre "site optimisé en 800 x 600" est assez illusoire car les internautes qui changeront leur résolution uniquement pour voir votre site sont rarissimes. Il existe cependant certaines solutions pour rendre votre site esthétiquement compatible avec n'importe quelle résolution d'écran.

Présentation

Beaucoup de gens pensent que la résolution d'écran (ou "espace du bureau" selon Microsoft) dépend de la taille de l'écran. Ce qui est faux. On peut avoir un écran de 14 pouces et avoir une haute résolution ou avoir un écran de 21 pouces et n'avoir qu'une résolution d'écran de seulement 640 x 480. 640 signifie 640 pixels de façon horizontale et 480 pour 480 pixels de façon verticale.

La plupart des moniteurs peuvent afficher différentes résolutions d'écran. C'est la carte graphique qui détermine les différentes résolutions d'écran possibles pour un ordinateur donné. Ainsi, il y a quelques années, avec les cartes graphiques de 1 méga, la norme était en 640 x 480, ce qui était confortable pour les applications bureautiques. Avec l'évolution de ces cartes, le 800 x 600 est apparu. Et avec l'introduction sinon la généralisation des cartes graphiques à 4 mégas de mémoire, les résolutions 1024 x 768 ou même 1280 x 1024 sont possibles à défaut d'être fréquentes. Les internautes suivent bien entendu cette évolution technologique et la résolution 640 x 480 qui était la norme il y a encore quelques années, est en voie de disparition au profit de résolutions plus hautes.

Avec toutes les précautions d'usage quant à la précision des chiffres suivants et après recoupement de plusieurs sources, on peut (à fin 2001) se référer au tableau suivant qui donne une idée de la répartition des différentes résolutions utilisées pour le Web.

Résolution Pourcentage
  640 x 480 12 %
  800 x 600 32 %
1024 x 768 38 %
1280 x 1024 14 %
autres   4 %

Comme vous voyez, la moyenne des utilisateurs du Web utilisent une résolution d'écran de 800x600 [et en 65.536 couleurs]. Mais écrire pour la moyenne n'est pas tout... Il reste les 45 % autres internautes pour qui votre site risque d'être une véritable catastrophe.

Illustration du problème

Le premier exemple montre une page avec un image reprenant les lettres de l’alphabet. Avec une résolution 800x600, cette image s’adapte parfaitement à l’écran. Par contre, cette même page, vue en 640x480 est déjà beaucoup moins sympathique.

L’utilisateur devra non seulement faire appel au défilement vertical pour voir l’entièreté des lettres mais également au défilement horizontal car les lettres K et L ont disparue de l’écran. Si le défilement vertical est acceptable car finalement indispensable dès qu’une page est d’une certaine consistance (et encore méfiez vous des novices du Web qui ne l’utilisent que très peu), le défilement horizontal est à bannir car trop inconfortable pour votre visiteur.

Résolution 800x600 Résolution 640x480

Le second exemple tente d'illustrer les différences de mise en page et surtout la longueur des lignes de texte d’une résolution à l’autre.

Si une page reprend principalement du texte, plus la résolution est haute, plus la ligne de texte sera longue et donc plus la lecture de ce texte à l’écran sera fastidieuse. Lire du texte sur un écran en 1280x1024 reviendrait à lire un journal où le texte serait imprimé d’un bord à l’autre - sans colonnes -. Pas pratique du tout et il faut avoir de bons yeux !

Résolution 800x600 Résolution 640x480

  Quelques solutions

Il faut bien admettre qu’en 640, le composition de la page est un peu étriquée. Avec des résolutions plus hautes, on peut concevoir des pages plus aérées et aux proportions plus équilibrées. En outre, cette largeur supplémentaire permet généralement de prévoir des menus de navigation omniprésents sur chaque page du site.

Passons en revue quelques solutions pour garder une certaine compatibilité par rapport aux différentes résolutions possibles.

On limitera la largeur des images à environ 600 pixels même pour les sites idéalement conçus en 800x600 ou en résolution plus grande encore afin d’éviter de devoir utiliser les barres de défilement horizontales, sous des résolutions inférieures. Cette limitation vaut aussi pour les tableaux et les frames élaborés avec une largeur fixée en pixels.
On pensera à inclure les longs passages de texte dans des tableaux (à bordure invisible) d’environ 600 pixels maximum. On obtiendra ainsi des lignes de texte de 60 à 90 caractères, ce qui semble être une norme acceptable pour un confort de lecture à l’écran.
On se méfiera des arrière-plans sous forme d’une fine bande horizontale. Il faut les prévoir d’entrée avec une largeur de 1280 pixels afin qu’ils s’adaptent à toutes les résolutions possibles sans devoir se répéter horizontalement, ce qui entraîne généralement des effets non désirés et désastreux (raccord).
Comme toujours pour la création de sites Web, testez, testez encore et testez toujours.
Finalement (voir les remarques sur les images et le texte), on rencontre de plus en plus de sites qui sont conçus en 600 pixels de large pour être vus en 800x600 ou plus. Le reste de la largeur étant un arrière-plan neutre. La page reste alors toujours bien lisible quelque soit la résolution.
Résolution 640x480 Résolution 800x600

Remarque finale

Avec le Javascript 1.2, on peut maintenant détecter (sans pouvoir la modifier cependant) la résolution d'écran de l’internaute et le rediriger automatiquement vers une page spécialement conçue pour cette résolution [screen width et screen.height]. Intéressant sûrement mais cela équivaut alors à écrire quasiment un site pour chaque résolution. Mais quel boulot !

   
HomeUpDown