Accueil Recherche | Plan Technique | Liens | Actualités | Formation | Emploi | Forums | Base
logo CERIG NOTE TECHNIQUE cerig.efpg.inpg.fr 
Vous êtes ici : Accueil >Technique > Internet et le web > Présentation des pages web (1)           Révision : 25 août 2000
Note précédente Liste des notes     Stratégie de présentation des pages web     Page technique Note suivante
 
Jean-Claude Sohm (CERIG / EFPG)
(mars 2000)
 

Publier sur le web est une tâche difficile, parce que la manière dont les pages s'affichent dépend de l'équipement de chaque internaute, et en particulier de la résolution fournie par sa carte graphique. Il est généralement admis qu'une page doit s'afficher au format VGA sans déclencher la barre de défilement horizontale. L'examen de 140 sites à forte fréquentation (100 américains et 40 français) montre qu'il en est bien ainsi dans la majorité des cas. Le CERIG pratique la même politique dans la plupart de ses pages.
   Techniquement, ce résultat peut être atteint grâce à deux présentations : l'une fixe et l'autre proportionnelle. Bien que la seconde présentation soit plus esthétique, la première est de loin le plus pratiqué.
   L'étude montre également que les concepteurs américains sont un peu plus soucieux de ce qui se passe dans la fenêtre du navigateur de l'internaute que leurs homologues français.
 

Introduction

En savoir plus...
sur la présentation des pages web :

Consulter des informations sur l'écran d'un ordinateur est aujourd'hui devenu une opération courante. Pour ce faire, les utilisateurs ont pris l'habitude d'utiliser la  barre de défilement vertical ("l'ascenseur" en jargon informatique). L'usage de la barre de défilement horizontal est par contre perçu comme très désagréable : lors du retour à la partie gauche de la page HTML, l'œil ne sait plus sur quelle ligne se trouve la suite du texte.

Les webmestres soucieux de la fréquentation de leur site font donc en sorte que les internautes n'aient pas besoin de se servir de la barre de défilement horizontal pour en parcourir les pages. Ils se heurtent alors au fait que les internautes ne sont pas tous équipés de la même manière en ce qui concerne le moniteur et la carte graphique. La société StatMarket, qui réalise des analyses statistiques sur le trafic des sites web, a publié à ce sujet les chiffres rassemblés dans le tableau I ci-dessous.

Résolution   Janvier 1999   Juillet 1999   Octobre 1999
640 x 480   17,8 %   15 %   12,6 %
800 x 600 55,9 % 53,8 % 54,8 %
1024 x 768 20,5 % - 25,9 %
1280 x 1024 1,6 % 2,2 % 1,9 %
Tableau I : la résolution d'écran utilisée par les internautes en 1999
 

Le tableau I ci-dessus révèle l'évolution suivante :

    les internautes mal équipés (VGA) sont de moins en moins nombreux ;
  la proportion d'internautes correctement équipés (800x600) est à peu près constante ;
  les internautes bien équipés (1024x768 ou plus) sont de plus en plus nombreux.

La société StatMarket, qui vend ses études statistiques, n'a pas publié de chiffres plus récents. Mais de nombreux webmestres (ceux du moins qui analysent leur trafic) constatent que l'évolution se poursuit, et que la proportion d'internautes surfant le web avec une fenêtre VGA est souvent inférieure 10 %. Pour nombre de concepteurs, c'est un signal : il est temps de repenser la présentation des sites, du moins celle de leur page d'accueil.
 

Un peu de technique

Historiquement, le web a été conçu de manière à être "device-independant". Sauf ordre contraire, les navigateurs réorganisent donc le contenu d'une page de telle sorte qu'il remplisse au mieux leur fenêtre, quels que soient les caractéristiques de l'ordinateur (résolution graphique) et les réglages de l'internaute (dimensions de la fenêtre). Pour ne pas déclencher la barre de défilement horizontale, il faut éviter les éléments incompressibles dont la largeur dépasse 595 pixels environ. Cette valeur s'obtient en retranchant des 640 pixels du VGA la place prise par le cadre et l'ascenseur du navigateur. En d'autres termes, il faut éviter :

    les images trop larges ;
  les portions de texte non repliables (balises <nobr> et </nobr>) de trop grande longueur.

Pour éviter le déclenchement de la barre de défilement horizontale, on peut définir la taille des images de manière proportionnelle, c'est à dire en pourcentage de la largeur et de la hauteur de la page sur laquelle elles s'affichent. Cette possibilité est surtout utilisée pour les éléments décoratifs. Ainsi, la largeur de la ligne colorée ci-dessous vaut 80 % de celle de la page, alors que sa hauteur reste fixe et égale à 2 pixels. Faites varier les dimensions de la fenêtre de votre navigateur : vous constaterez que la qualité de l'image ne se dégrade pas. Mais attention ! si l'image se trouve incluse dans une cellule de tableau, les navigateurs font un peu n'importe quoi.

On évite par contre de définir de manière proportionnelle la taille des autres images, car ces dernières risquent d'apparaîtrent trop petites ou trop grandes selon la résolution et la taille de fenêtre utilisées. De plus, le fait que leur proportion largeur/hauteur ne soit pas conservée peut les rendre fort laides. Ainsi, les dimensions du logo du CERIG ci-dessous ont été définies comme 10 % en largeur et 5 % en hauteur. Dans une fenêtre de taille VGA, le logo apparaît trop petit, alors qu'il possède une taille à peu près normale en 1024 x 768.

Une page web, donc, n'a ni largeur ni hauteur ; elle a une taille, que l'on mesure généralement en Ko, et c'est tout. Avec l'apparition des tableaux, la possibilité est désormais donnée aux concepteurs de définir des pages de largeur fixe, et beaucoup d'entre eux n'ont pas manqué de s'en saisir, d'autant qu'ils sont souvent issus du monde de la PAO. On peut regretter cette façon de procéder, et ce pour les raisons suivantes :

    d'abord, c'est une trahison de l'esprit du web, du moins en ce qui concerne sa qualité "device-independant" ;
  ensuite, sur le plan esthétique, c'est fort laid. La majorité des internautes possèdent un moniteur et une carte graphique permettant d'utiliser une résolution supérieure à celle du VGA. Ils préféreraient que la page web qu'ils affichent remplisse mieux la fenêtre de leur navigateur, au lieu de leur laisser une grande zone blanche inutilisée ;
  enfin, c'est la solution de facilité : la présentation dans des tableaux de largeur fixe est plus facile à réaliser que dans des tableaux de largeur proportionnelle, et ce d'autant plus que la page est plus complexe.

Les concepteurs qui utilisent la présentation fixe ont cependant quelques excuses :

    d'abord, c'est l'assurance que les navigateurs, dont la fonction "imprimer" n'est généralement pas de première qualité, ne couperont pas le texte en largeur lors de l'impression (ils le couperont en hauteur, rassurez-vous) ;
  ensuite, la présentation fixe conduit à un code HTML plus simple, donc plus court et plus rapide à télécharger ;
  enfin, les navigateurs interprètent sans problème les présentations fixes, mais plus difficilement (celui de Netscape particulièrement !) les présentations proportionnelles.

Nous avons rencontré ce dernier problème lorsque nous avons conçu la nouvelle page d'accueil du CERIG. Le centre de cette page est occupée par une image map, dont les dimensions ne peuvent être que fixes. Les deux tableaux qui entourent l'image map fournissent l'élasticité latérale de la page. Ces tableaux sont ombrés, pour donner du relief à l'ensemble, et leur ombre doit suivre leur déformation lorsque la largeur de la fenêtre du navigateur varie. Il existe plusieurs solutions pour obtenir ce résultat, mais nous n'en avons trouvé qu'une seule qui convienne aux deux navigateurs. Encore ne fonctionne-t-elle pas toujours parfaitement : il peut être nécessaire d'appuyer sur le bouton "Recharger" (Netscape) ou  "Actualiser" (Internet Explorer) pour obtenir un affichage satisfaisant. Enfin, aucun des deux navigateurs n'imprime la page correctement.
 

L'échantillon étudié

Pour voir où en sont les pages web en manière de présentation, nous avons examiné la page d'accueil de 140 sites web choisis de la manière suivante (au mois de février 2000) :

   les 50 sites les plus fréquentés aux États-Unis. Nous avons utilisé la liste publiée par PC Data Online, organisme qui procède à l'analyse du trafic web de 120.000 internautes américains (scolaires, particuliers et professionnels) ;
  les sites de 50 grands quotidiens américains. Nous avons utilisé la liste fournie par Yahoo dans la rubrique "News and Media, Newspapers". Cette liste contient un mélange de 57 titres nationaux et régionaux, et nous l'avons prise en l'état (classement par ordre alphabétique) ;
  les 50 sites les plus fréquentés par les internautes français. La liste des sites est extraite du top de l'audience du Journal du Net.

Nous avons tenté de classer les sites par type d'activité. Le web est trop récent, et son évolution trop rapide, pour que la taxonomie des sites soit bien définie. Le terme "portail", en particulier, est utilisé à tort et à travers. Historiquement, les portails sont des fournisseurs d'accès et/ou d'hébergement, ou des moteurs de recherche, qui ont peu à peu enrichi leur offre de services. En général, un portail contient :

    une moteur de recherche, et un annuaire de sites, pour faciliter les recherches sur le web ;
  des informations à caractère général : nouvelles du jour, météo, horoscope, cours de la bourse, listes et horaires des spectacles, etc.
  des liens vers des sites d'utilité courante : agences de voyages, magasins en ligne, agences immobilière, vente d'automobiles, etc.
  l'hébergement de site et le courrier électronique. On peut objecter que le portail le plus célèbre, Yahoo, n'offre pas de fonction d'hébergement, mais sa filiale GeoCities y supplée ;
  des services utiles, tels que les offres d'emploi, le calcul des impôts, etc.

La colonne intitulée "Largeur" contient la largeur minimale (en pixels) que l'on doit accorder à la fenêtre du navigateur pour éviter le déclenchement de la barre de défilement horizontale. Cette valeur dépend un peu du navigateur utilisé : celui de Netscape réduit plus ses marges (de 20 pixels environ) que celui de Microsoft, lorsqu'on restreint la largeur de la fenêtre. Les valeurs indiquées ont été obtenues avec la version 5.0 d'Internet Explorer. Elles sont précises à 10 pixels près. Bien entendu, tous les sites ont une largeur minimale, parce que les navigateurs ne compriment ni les monotermes, ni les images.

Deux procédés de mise en page sont utilisés par les concepteurs de sites. L'un consiste à concevoir des pages de largeur fixe, l'autre des pages "élastiques" -- c'est à dire se réorganisant automatiquement en fonction de la largeur de la fenêtre du navigateur de l'internaute : on parle alors de présentation proportionnelle. Lorsque la page possède une présentation fixe, elle s'affiche dans la partie gauche de la fenêtre du navigateur, à moins qu'elle ne soit centrée dans cette fenêtre. Ces informations figurent dans la cinquième colonne, intitulée "Présentation".

Le détail des observations figure dans les tableaux II, III et IV, que l'on peut consulter sur une page séparée.

On notera que la terminologie de présentation des pages web n'est pas bien fixée. L'expression de "page élastique" est du jargon personnel, "présentation proportionnelle" ne semble pas encore consacrée par l'usage, et "resolution-independant design" fait très franglais.
 

La présentation des sites

L'examen des tableaux précités appelle deux conclusions. D'abord, beaucoup de sites tiennent encore compte du VGA, mais le mouvement vers la résolution 800x600 a commencé. Ensuite, le contenu l'emporte largement sur la présentation. On notera que, lorsqu'il est utilisé dans le contexte du web, le terme "contenu" est pris dans un sens large : il désigne à la fois l'information fournie et le service rendu. Ces deux notions vont d'ailleurs de pair : en fournissant de l'information, on rend déjà service... à moins que cette information ne vaille rien !

Répartitions des sites (6,2 Ko)  
La figure 1 ci-contre montre la répartition des sites en fonction de la largeur minimale de fenêtre que requiert leur page d'accueil pour éviter le déclenchement de la barre de défilement horizontal. Certes, l'échantillon qui a servi à tracer la courbe de répartition est assez petit : 50 pour les sites les plus fréquentés des États-Unis et pour les grands quotidiens américains, 40 pour les sites les plus fréquentés en France. De plus, le choix du pas utilisé en abscisses est arbitraire, et l'aspect du diagramme en dépend quelque peu (nous avons choisi un pas de 40 pixels).

Néanmoins, on voit clairement que les trois courbes de distribution présentent deux pics, l'un pour le VGA (640 pixels), l'autre pour la résolution 800 x 600. Les choix des concepteurs de sites ne sont pas dus au hasard.

Pour les sites américains, le maximum correspondant au VGA est très marqué, alors que celui relatif au 800 x 600 est fort modeste. On voit d'ailleurs que les grands quotidiens sont encore plus prudents que les sites du top 50. Les concepteurs de sites français, par contre, se soucient beaucoup moins des internautes qui voient le web à travers une fenêtre VGA. Chacun interprétera cette observation comme il l'entend.

Présentation pages accueil La figure 2 ci-contre est relative à la mise en page (en largeur) des pages d'accueil des sites des trois échantillons précités. Le pourcentage de sites à présentation fixe est représenté par une couleur pourpre, plus foncée lorsque la page correspondante est centrée dans la fenêtre du navigateur. Le pourcentage de présentation proportionnelle (qui demande nettement plus de travail que la présentation fixe) figure en jaune.

On voit immédiatement que la majorité des sites utilise une présentation fixe : 72 % pour le top 50 US, 76 % pour les quotidiens US et 82 % pour le top 40 français. Une fraction variable se donne la peine de centrer le tableau correspondant : 36 %, 10 % et 45 % respectivement. Et pourtant, centrer le contenu d'une page n'est pas difficile à écrire en HTML !

En fait, les webmestres des sites à forte fréquentation savent que le contenu est roi, et que ce ne sont ni la mise en page, ni la technique, ni les gadgets qui attirent les internautes. Par exemple, aucun des sites cités dans les tableaux II à IV n'utilise d'animation Flash, à l'exception de celui de Disney -- il faut bien amuser les enfants ! Flash, d'ailleurs, est utilisé sur ce site pour faire du rollover et de la substitution d'images, ce que Javascript aurait aussi bien permis. Notre opinion est que les animations Flash devraient être utilisées à bon escient, sur les sites à fort caractère distractif (présentation de films, sites d'artistes, pages personnelles amusantes, etc.), et sur les sites dans lesquels l'animation améliore réellement la qualité de l'information proposée (montage d'un appareil, fonctionnement d'une expérience, présentation d'un objet sous toutes ses faces, etc.). Actuellement, les animations Flash servent principalement de gadget. Cette mode passera, et la technologie Flash trouvera sa vraie place sur le web. Il en a été ainsi de toutes les innovations qui ont survécu, sans pour autant inonder toutes les pages web : applets Java, images gif animées, cadres, etc.

L'examen des tableaux II à IV révèle une utilisation plus que modérée de la technique des cadres dans les pages d'accueil : 0 % pour les sites du top 50 US, 10 % pour ceux des quotidiens US, et 8 % pour ceux du top 40 français. La seule technique répandue, en complément du HTML, est l'utilisation de Javascript, dans un but souvent modeste (effet de rollover, par exemple).

Le site n° 38 du tableau II ("LifeMinders") apporte une confirmation particulière au fait que le contenu prime largement la présentation. Ce site est de loin le plus affreux de tous ceux qui figurent dans le même tableau, et toutes les personnes auxquelles nous l'avons montré l'ont trouvé très laid. Et pourtant, il reçoit 6,6 millions de visiteurs par mois ! Son succès est basé sur une idée toute simple, mais que de nombreux internautes apprécient : le site sert tout simplement d'agenda et de "pense-bête" à ceux qui s'inscrivent.
 

Conclusion

Pour un site web, le contenu est roi. Viennent ensuite la charte graphique, la navigation et l'ergonomie. La présentation proportionnelle, qui complique le travail de mise en page, et alourdit un peu le code HTML, est souvent considérée comme secondaire. Elle reste donc minoritaire, en particulier dans les sites à forte fréquentation.

Le nombre d'internautes surfant le web à la résolution du VGA allant en diminuant, la tentation devient de plus en plus forte pour les concepteurs de sites de réaliser des pages dont l'affichage nécessite une résolution supérieure à celle du VGA. Mais cette évolution est freinée par le souci qu'ont les webmestres de toucher l'audience la plus large possible, et par la pesanteur des habitudes acquises.

Note précédente Liste des notes Page technique  Note suivante 
 
Accueil | Technique | Liens | Actualités | Formation | Emploi | Forums | Base
 
Copyright © CERIG/EFPG 1996-2002
Mise en page : J.C. Sohm