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 :



    JPG - compression minime, 111K .
    l'image est parfaite


    GIF - 256 couleurs, 46K .
    l'image est parfaite, moins colorée

     
    JPG - compression moyenne, 16K .
    les détails deviennent flous ( regarder le poil dans les oreilles, le texte )

     
    GIF - 32 couleurs, 16K .
    texte et détails restent nets mais les couleurs font défaut ...

     
    JPG - compression excessive, 5K .
    tout est flou, mais le fichier se charge 22 fois plus vite que le premier!

     
    GIF - 4 couleurs, 6K .
    l'image n'a plus que quatre couleurs mais détails et texte restent nets.

     

    Comment choisir?

    Pour les belles couleurs, les dégradés pastel, les photos de personnes et de paysages, le format JPG est généralement préférable. Pour maintenir la netteté, surtout dans de très petites images, le format GIF est plus performant.

     

    Parfois GIF, parfois JPG...

    Certaines illustrations se présenteront mieux dans un format que dans l'autre. La règle générale: pour les textes et les dessins à ligne claire, GIF. Pour les photos et illustrations à dégradés, JPG. Utiliser un logiciel tel que SmartSaver pour optimiser la taille du fichier...



    Les emprunts

    La tentation est forte "d'emprunter" des images que vous trouverez sur d'autres sites du web. Malheureusement, ceci n'est pas parfaitement légal même si c'est à peu près toléré. Après tout, la personne qui a créé l'illustration a le droit d'être citée! Et c'est ainsi que se passent les choses sur le web: vous prenez une image, vous en citez le créateur, vous faites un lien vers ses pages... mieux encore, vous lui envoyez un petit mél pour lui demander permission de vous servir de son illustration. Le prix est généralement de mettre un lien vers la page du créateur de l'illustration. Pas trop exorbitant. Et ça permet d'avoir des contacts sympathiques.

    Je suis assez à cheval sur cette question. Quand je trouve de mes images et photos sur d'autres sites, alors qu'il n'y a aucun lien vers le mien, j'ai le sentiment qu'on m'a volé quelque chose! Alors je somme le voleur soit de retirer l'illustration, soit de faire un lien vers mon site... et ça marche. Mais il serait tellement mieux que l'emprunteur ait le réflexe, le geste courtois du mél dès le début, vous ne trouvez pas?



     


    Page and images © 1999 by Robert F. Jeantet
    fin de la page Partenaires