FI/2/00
Small_Is_Beautiful

Laurent.Kling@epfl.ch, DA, Service Informatique et institut Informatique, Représentation, Expression

Encore un problème existentiel, je mesure 1m 95. Pour pouvoir jouir dans le futur de mes quinze minutes de gloire -dixit Andy Warhol- je n'inclus pas de photographie afin d'empêcher l'identification de l'auteur de cet article.

Préambule

L'utilisation du Web est devenue une activité quotidienne, la création de pages web devient une activité de plus en plus répandue. Cependant, on met rarement en relation ces deux activités car la débauche de moyens et techniques mis à disposition du créateur n'a d'égal que la multitude des utilisations. Je me propose d'aborder cette problématique du point de vue de la relation entre le contenu, sa taille et une tentative d'optimisation.

La principale contrainte d'une page Web, à moins de faire de l'art pour l'art, est d'être consultable. Ce constat est moins trivial qu'il n'en a l'air. En effet, le créateur de pages Web teste la rapidité de son travail sur son propre ordinateur ou, effort louable mais inutile, dans le même réseau où se trouve le serveur. Si ce créateur ne pousse pas le masochisme jusqu'à utiliser un ordinateur obsolète et un accès au réseau défaillant, il devrait obtenir son travail à une vitesse époustouflante. De cet état de fait, sa créativité sous-jacente trouvant un terrain pour s'exprimer, il va allégrement incorporer des boutons animés, quelques séquences sonores, une zone d'orientation utilisant un plug-in à la mode exotique, bref en mettre plein la vue. (Toute ressemblance avec des créateurs ou des pages Web existantes n'est pas purement fortuite.)

Plus sérieusement, une des conditions primordiales d'accessibilité est que le temps de chargement ne soit pas trop long. Afin de diminuer son attente, l'utilisateur peut utiliser deux possibilités:

S'il est las d'attendre, il peut ouvrir plusieurs requêtes... [un peu contradictoire].

figure 1: comparaison de modems

Une analyse au travers des sites Web existants

Plutôt que de définir une théorie sur la construction de sites Web, observons ce que font les autres acteurs de ce domaine avec un regard critique.

Une grille de sélection

Un choix de sites,... arbitraire,... et représentatif?

Taille de l'information

L'influence principale de la taille de l'information est celle de son temps de transfert: l'information transite du serveur à Internet...et d'Internet à l'utilisateur. Les deux formules reliant ces différents transferts sont:

Afin de pouvoir effectuer une série de comparaisons, j'ai choisi les vitesses de transmission suivantes:

Pour tenir compte du fait que les images sont déjà comprimées et que les modems 28.8Kbauds et 56 KKbauds possèdent le protocole NMP4 (compression de données), j'ai majoré le débit de 1.5 pour le texte (HTLM) uniquement. Afin de fixer une limite, j'ai choisi un temps de 2.5 secondes. Au regard de ce choix, regardez le petit classement de visibilité ci-contre.

En regardant dans le détail, voici une analyse succincte de ces différents sites (du fait de la mise à jour incessante sur le Web, il s'agit de leur état durant le mois de septembre 1999...).

Un site universitaire: celui du département d'architecture de l'EPFL

URL: http://dawww.epfl.ch/

Structuré visuellement en trois parties:

Organisation logique:

Format HTML:

Vitesse...

Un hebdomadaire en ligne, MacWeek

URL: http://macweek.zdnet.com/

Structuré visuellement en trois parties verticales:

Organisation logique:

Format HTML:

Vitesse...

Un site d'orientation, Yahoo

URL: URL: http://www.yahoo.fr/

Structuré visuellement en trois parties horizontales:

Organisation logique:

Vitesse...

Format HTML:

Un constructeur d'ordinateurs, Apple

URL: http://www.apple.com/

Structuré visuellement en quatre parties horizontales:

Organisation logique:

Vitesse...

Format HTML:

Un fabricant de logiciels, Microsoft

URL:http://www.microsoft.com/

Structuré visuellement en trois parties:

Organisation logique:

Vitesse...

Format HTML:

Quelques lignes directrices

En général, ces sites représentent l'information sous un format textuel. Le contenu ne change pas si on désactive le chargement des images pour optimiser la bande passante...sauf celui d'Apple qui est fortement orienté vers le graphique (et donc vers des connexions à haut débit...). Chaque site divise l'information en différentes zones:

En général, les sites respectent la limite de 580-600 pixels, permettant de voir le fichier sur un écran de 14" (580 pixels) ou d'imprimer en format français (vertical) sur feuille de papier. À part celui du DA, qui vous oblige à utiliser un format à l'italienne (A4 horizontal).

Le format des images est cohérent: en gif pour les logos et en jpeg pour les images d'origine photographique.

Ces sites ne demandent pas d'extension particulière:

Ils n'utilisent pas de frame !

Optimiser les pages en fonction du débit

On observe que la taille des fichiers transmis a une influence directe sur la vitesse de lecture d'une page Web, donc sur son attractivité. Dans l'exemple de la page du département d'architecture de l'EPFL (on n'est jamais aussi bien servi que par soi-même), l'utilisation de fichiers images pour figurer les différents index génère une grande part du trafic, en fait les trois quarts.

La conversion de ces images en texte entraîne:

<font face="Arial,Helvetica,Geneva,Swiss, SunSans-Regular">

En ce qui concerne l'espacement du texte, la tabulation et les espaces multiples se comportant comme un simple espace, j'utilise un espace non sécable et le retour de ligne pour éviter l'espacement automatique inclus dans le paragraphe: &nbsp;<br>.

On peut remplacer les fonds de couleur unie par une couleur de fond dans la cellule (en respectant les 216 couleurs qui sont communes au Macintosh et PC): bgColor="#666699".

L'espace insécable vient aussi à mon secours: &nbsp; pour les cellules vides que certains butineurs n'affichent pas même si elles ont un fond de couleur.

Il reste le problème du changement de taille de la fenêtre: il existe deux possibilités pour définir une largeur de colonne dans un tableau,

<td vAlign="top" width="126">

<td vAlign="top" width="100%">

On peut utiliser les deux, c'est-à-dire définir une largeur [fixe ?] en pixels pour l'index à gauche et un pourcentage [100 % ?] pour la zone d'information à droite.

Malheureusement, cette méthode a parfois pour conséquence que la partie de gauche mange l'index... Une solution consiste à utiliser des images dans l'index, mais on vient de les supprimer [pour limiter la taille]. La solution réaliste, est de bien intégrer une image [une seule], mais en utilisant deux astuces: elle ne mesure qu'un pixel, on l'a redimensionnée dans l'utilisation du tag Image,

<img src="purple.gif" width="126" height="1">

De cette manière, l'image transmise est très petite [61 octets], et évite ce fâcheux effet de bord. Personnellement, j'utilise une image de la couleur du fond, mais on peut utiliser une image transparente, applicable à tous les cas de figure.

On peut changer la qualité de compression du jpeg en passant de très bon à bon... soit un gain pour les images de 25 à 30 %. Avec ces différents éléments, on passe d'une taille pour les images de 17129 à 5048 octets, soit 30 % de leur taille initiale! et le délai de chargement à 28.8Kbauds de 5.34 à 2.26 s. Avantage: pratiquement deux fois plus rapide que l'original; similaire en mode texte.

En conclusion

Cet article ne tend pas à définir un principe de création de pages Web, mais pourrait rendre attentifs les créateurs qu'actuellement, le noeud gordien reste la transmission de l'information jusqu'au destinataire, et donc la taille de l'information transmise. De plus, l'apparition de nouveaux médias, comme la consultation de sites Web au moyen de téléphones mobiles, nous renvoie allégrement aux bons jours de Lynx.

Il est probable que l'émergence de standards pour la transmission d'informations permette à court ou moyen terme une séparation plus claire entre les différents médias:

et qu'elle sépare ainsi les flots d'information en besoins et capacités des différents usagers.


retour au sommaire du Flash informatique du mois de février 2000
retour à la page principale des Flash informatique
Vos commentaires
© FI-2-00 du 29 février 2000