Qu'Est-ce qu'une Bonne Page Web ?
Je ne suis pas un webmaster professionnel, mais j'ai participé à la création ou la mise à jour de plusieurs sites Web, et j'estime être parfaitement qualifié. J'ai testé de nombreux designs et utilisé divers logiciels de création et de publication de pages Web (Macromedia Flash, Dreamweaver, FrontPage, ...). À force, j'ai commis des erreurs, j'ai découvert les incompatibilités des navigateurs et les temps de téléchargement astronomiquement longs. Je me suis ainsi heurté à cette question fondamentale que le webmaster doit se poser avant de commencer son site :
Qu'est-ce qu'une bonne page Web ?
La première chose que doit se demander un webmaster est "Ai-je quelque chose à dire ?" car le plus important pour avoir une bonne page Web est d'avoir du contenu.
Certes, la présentation de votre contenu joue un rôle important dans la diffusion de vos idées et informations. Elle peut la favoriser ou la rendre impossible. Les conseils que je vous propose proviennent de l'apprentissage de mes échecs et de ce que j'ai pu lire sur Internet (entre autres des sites Web Top Ten Mistakes in Web Design ou HTML Hell Page) et ne sont en aucune manière des standards que j'aurai fixé arbitrairement.
Le Web, c'est l'accès à l'information pour tous
Vous créez un site Web pour qu'un maximum de personnes le lisent. Vous devez donc penser à le rendre accessible à tous. Une bonne page Web est accessible quel que soient le navigateur de vos visiteurs, leur écran, les logiciels installés sur leur ordinateur ou leur vitesse de téléchargement.
Évitez les "Site optimisé pour le navigateur ..."
Certes vous devez avoir un navigateur Web favori, mais dites-vous bien que les nombreux internautes qui ne l'utilisent pas ne liront pas vos pages, si elles ne s'affichent pas correctement sur leur navigateur favori. Par ailleurs, vous devez comprendre que le langage HTML est censé être indépendant de votre navigateur. Alors prenez le temps d'optimiser votre site pour tous.
Vous pouvez aussi être tenté de faire plusieurs versions de votre site, pour les navigateurs les plus connus. Sachez que cela vous prendra sans doute autant de temps et que vous oublierez toujours quelqu'un. Une bonne page Web n'a jamais besoin de versions différentes.
Évitez les "Site optimisé pour une résolution ..."
En général, lorsqu'un internaute visite un site, il n'a pas envie de changer sa résolution et il préférera plutôt passer son chemin. Faites donc une version définitive de vos pages qui ne souffrent pas d'un changement de résolution. Pour cela :
- Ne définissez pas vos tailles de caractères en pixels.
Vos lecteurs peuvent utiliser des écrans de résolutions diverses, exprimées en ppi (pixels par pouce), qui dépendent de la taille de l'écran (en pouces) et de sa définition maximale (800x600, 1024x768, 1280x1024, ...). La résolution désigne le nombre de pixels par unité de longueur d'écran : la largeur (ou la longueur) en pixels divisée par la largeur (ou la longueur) en pouces. Un écran 15" de définition 1280x1024 aura une résolution de 110 ppi alors qu'un écran 17" en 1024x768 aura une résolution de 75 ppi.
Or, la taille apparente d'une image sur un écran se mesure comme le nombre de pixels de cette image divisée par la résolution de votre écran. Ainsi, sur écran 75 ppi, un caractère de 12 pixels fera 12/75 pouce soit environ 4.1 mm. Pour un écran 110 ppi, le même caractère aura une taille d'environ 2.8 mm, ce qui devient illisible.
- Ne diminuez pas la taille du texte (avec les balises <small> et <font size=>).
Outre les problèmes liés à la résolution de l'écran, il faut noter que les utilisateurs d'écrans 20" ou 21" se heurtent souvent à des caractères minuscules. Ne leur rendez pas la tâche encore plus difficile. Est-il vraiment nécessaire de diminuer la taille de votre texte ? À moins que vous ne vouliez pas qu'on le lise.
- N'utilisez pas de tableaux de taille fixe.
Si vous définissez un tableau de 400 pixels de large, il fera la moitié d'un écran 800x600 mais seulement un quart d'un écran 1600x1200. Du coup le rendu risque d'être altéré pour certains internautes. Souvenez-vous que si la taille d'un tableau peut être définie en pourcentage de la fenêtre du navigateur c'est qu'il y a une raison : pour qu'ils s'adaptent à tous les formats.
Évitez l'utilisation de javascript
Tous les navigateurs ne supportent pas le javascript ou certains internautes peuvent l'avoir désactivé. Pour cette raison faites en sorte que votre site soit lisible même lorsque javascript n'est pas actif. Évitez aussi des pages entières de scripts pour n'afficher que quelques lignes de texte.
Évitez l'utilisation d'animations Shockwave ou Flash
Tout d'abord, ces animations sont très longues à télécharger. Pour peu que votre lecteur potentiel n'ait pas le logiciel adéquat, il n'est pas sûr qu'il prendra le temps de l'installer. Enfin, vous faites la promotion d'un logiciel payant au contraire du langage HTML qui, lui, est accessible par tous.
Évitez les musiques de fond en MIDI
Elles aussi sont relativement longues à télécharger et le visiteur peut fuir votre site avant même que la musique n'ait commencé. Par ailleurs, elles n'apportent aucun contenu à votre site.
Évitez les titres en gif et les gif anim
Comme les musiques, ces outils graphiques sont longs à télécharger. Ils peuvent être remplacés par du texte mis en forme sans rien perdre de votre site en termes de design. Au minimum, vous devez permettre aux utilisateurs de navigateurs en mode texte, comme Lynx, de ne perdre aucune information importante (comme le titre de votre page Web). Pour cela utilisez l'attribut alt= dans votre balise <img>. Pour savoir comment rendent vos pages lues par le navigateur Lynx, rendez-vous sur le site de Lynx Viewer.
Évitez les menus fait en images ou cartes cliquables
Les images cliquables sont des images qui comportent des zones sensibles servant de liens hypertextes. En déplaçant votre curseur au-dessus de l'image, vous obtenez divers liens suivant l'endroit où il se trouve. Vous pouvez trouver ici un exemple de carte cliquable. Le problème de ces menus est qu'ils ne sont pas accessibles aux utilisateurs de navigateurs en mode texte. Par ailleurs, pour les cartes les plus grandes, les temps de téléchargement sont assez longs.
Vos pages Web doivent être lisibles et structurées
Vos pages doivent proposer du contenu, mais elles doivent aussi le faire efficacement. Avant même de commencer à créer vos pages vous devez déterminer le but de votre site, réfléchir à ce que vous allez y mettre et comment vous souhaitez le structurer. Désirez vous ranger vos pages par catégories ? Voulez-vous un menu sur chaque page ? Combien de pages ? Combien de catégories ? Quelle hiérarchie entre les pages ? Ce sont autant de questions que vous devez vous poser. Ensuite viennent les questions concernant le design. Quel fond ? Quelle couleur de texte ? Où positionner le menu ?
Vous devez donc écrire la structure votre site sur papier avant même d'éditer vos pages Web. Lors de cet exercice, n'oubliez jamais de voir à travers les yeux de votre lecteur potentiel. Vous devez connaître votre cible, ses besoins et ses attentes.
Vos pages Web doivent être homogènes
Vous devez établir un design (couleurs de fond et de texte, menu, cadres, ...) et vous y tenir. Ne vous amusez pas à changer votre présentation sur chaque page. Tout d'abord, l'internaute doit savoir qu'il est toujours sur votre site. Ensuite il ne faut qu'il perde son temps à déterminer où se trouve le titre de la page Web ou comment revenir à la page précédente.
L'orientation sur votre site doit être facile
Un visiteur peut arriver sur n'importe quelle page de votre site et il cherchera souvent son point central : votre page d'accueil. Mettez donc un lien vers votre accueil sur chacune de vos pages Web. Il est aussi préférable d'établir clairement la position hiérarchique de vos pages au sein même de votre site.
Lorsque votre site Web devient complexe par son grand nombre de pages, vous pouvez aussi proposer un plan du site indexant toutes les pages ou un moteur de recherche interne.
Le fond de vos pages Web doit permettre une bonne lecture de votre texte
Que ce soit du texte foncé sur un fond clair ou l'inverse, faites en sorte que la combinaison semble naturelle et agréable à l'oeil. N'oubliez pas qu'il n'y a rien de plus illisible qu'avoir en fond de page de grandes flammes, des images psychédéliques ou reprenant en mosaïque un motif ou un texte. Ce type de graphisme fait mal aux yeux et vote lecteur se lassera rapidement de déchiffrer vos informations.
Ne changez ni la couleur ni le soulignement de vos liens hypertextes
Les liens hypertextes et les menus sont des éléments clés qui permettent au visiteur de s'orienter sur votre site. Un lien hypertexte est bleu souligné lorsqu'il n'a pas encore été visité et violet souligné lorsqu'il l'a été. Ce standard permet à l'internaute de repérer instantanément les liens dans une bonne page Web. Malheureusement, de moins en moins de webmaster utilise ces couleurs ou le soulignement, alors qu'il ne viendrait à l'idée de personne de changer la couleur ou la forme des feux tricolores (parallèle de Gerry McGovern) sous peine de perturber considérablement l'automobiliste. L'utilisation d'un menu, clairement identifiable, peut sans doute dispenser de l'utilisation du soulignement ou des couleurs standards, mais il est particulièrement recommandé de respecter ces codes dans le contenu dans vos pages.
Vos pages Web ne doivent pas être irritantes
Les balises à ne pas utiliser
La balise <marquee>
La balise <marquee>, propre à Internet Explorer, permet d'insérer un texte défilant horizontalement ou verticalement. Elle peut très certainement entraîner des vertiges et des nausées chez les personnes qui n'y sont pas préparées. Essayez un peu de lire une page contenant une balise <marquee>, c'est pas trivial.
La balise <blink>
Elle permet de faire clignoter un texte, ce qui empêche de se concentrer sur une autre partie de la page. Il existe toutefois une utilisation de cette balise proposée par User Friendly et que vous pouvez tester sur votre site :
Schroedinger's Cat
is <blink>NOT</blink> dead.
Évitez les images manquantes et les liens périmés ou sans cible
Rien ne fait plus négligé qu'avoir des liens périmés ou des petites croix parsemant vos pages parce que vous n'avez pas mis à jour vos images. C'est la preuve que vous ne prenez pas soin de votre site. Si vous ne souhaitez pas passer du temps à éditer et vérifier vos pages, ne créez pas de site Web.
Les bannières ou pop-up publicitaires sont à bannir
Le rôle des publicités sur le Web est le même qu'ailleurs, c'est d'être remarqué. Pour cela elles utilisent souvent des couleurs vives ou des animations qui attirent l'oeil. Le pop-up en est la forme la plus vicieuse et détestable car il s'agit de publicité agressive. Certes il existe les logiciels anti pop-up, mais une nouvelle génération de messages publicitaires voit le jour, qui apparaissent en surimpression de vos pages, déjouant ainsi les dispositifs anti pop-up.
Certains sites vous proposent gratuitement de rediriger un nom de domaine attrayant (du style www.votrenom.fr.top) vers votre site en échange d'un pop-up qui s'ouvrira à chaque visite. D'autres vous proposent d'afficher une bannière promouvant vos pages Web à la condition d'afficher la leur. Si vous avez un semblant de considération pour vos visiteurs et une once d'éthique, ne faites pas de votre site un portail publicitaire et gardez votre bonne vieille adresse Internet. Quant à votre trafic, il devrait s'accroître si vos pages Web proposent du contenu.
Mettez un lien email pour qu'on puisse vous contacter
Il vous est peut-être déjà arrivé de remarquer des erreurs ou d'avoir des réactions concernant un site Web. Pensez donc à vos visiteurs en leur permettant de vous contacter. Toutefois, à cause des Web spiders, utilisés par les Spammers, qui collectent les emails sur les sites Web, vous devez être prudent. Vous pouvez par exemple coder votre email et la balise <a href="mailto: ">. Vous trouverez des informations intéressantes sur la lutte anti-spam sur le site Aspirine.org (en français) ou Spam-me-not (en anglais).
Évitez les cadres (ou frames) dans vos pages Web
Il peut exister des problèmes majeurs consécutifs à l'utilisation approximative de frames. Par exemple, lors de la mise en favoris d'une page Web contenant des cadres, il se peut qu'une autre page ou qu'un seul des cadres ne soit enregistré. Il arrive aussi que l'impression de frames ne se fasse pas correctement. Par ailleurs, lorsque vos frames ne sont pas bien faites, vote visiteur risque d'avoir des problèmes lors de l'utilisation de liens vers des sites extérieurs, qui peuvent se retrouver coincés dans certaines de vos frames.
Bref, si vous souhaitez concevoir des pages Web avec des frames, faites le bien et testez la mise en favoris, l'impression et vos liens. Gardez toujours à l'esprit qu'Une bonne page Web est une page réfléchie et testée.
Évitez les liens qui s'ouvrent dans de nouvelles fenêtres
Avant de cliquer sur un lien, l'internaute devrait savoir s'il va s'ouvrir dans une nouvelle fenêtre ou il risque d'être perdu ou perturbé. Si tous les liens qu'il utilise s'ouvrent dans une nouvelle fenêtre, il va rapidement se retrouver submergé et devra passer son temps à fermer les fenêtres qui ne l'intéressent pas. Si vos visiteurs veulent vraiment que votre lien s'ouvre dans une nouvelle fenêtre, ils peuvent toujours utiliser le clic droit de leur souris. Laissez-leur donc le choix ou prévenez-les au préalable.
Dans le même genre, si un de vos liens a pour cible un document, indiquez clairement la taille, le format et le logiciel dont ils ont besoin pour le lire. Ainsi, ils n'auront jamais de mauvaise surprise.
Évitez les pages Web constamment en construction
Les visiteurs n'attendront pas indéfiniment que vos pages Web en construction soient terminées. S'ils voient qu'elles ne le sont toujours pas quelques semaines après leur première visite, ils abandonneront. Ne mettez pas de liens vers une page en construction. Mettez vos pages Web en ligne uniquement si elles sont finies.
Évitez les images géantes ou trop d'images dans une page Web
Je suppose qu'il vous est déjà arrivé d'ouvrir une page, ce qui vous a pris plusieurs dizaines de secondes, uniquement pour voir s'afficher le logo géant d'une société ou d'une association, ou la photo d'une personne en vacances, sans information particulièrement intéressante. Vous avez eu l'impression d'avoir perdu votre temps ? Pour prévenir ce genre de déception à vos lecteurs, évitez de surcharger vos pages de logos ou photos inutiles.
Codez vos accents et caractères spéciaux
Vous devez savoir que la plupart des caractères spéciaux (incluant les accents) ne sont pas reconnues par le langage HTML. Certains navigateurs pourront tout de même afficher correctement vos pages, mais pour être sûr que votre texte soit lisible sur n'importe quel navigateur, vous devez remplacer vos caractères accentués ou spéciaux par leur code HTML correspondant. Vous trouverez l'ensemble des caractères ISO 8859-1 et leur code sur le site Guide HTML et XHTML - Les Caractères Spéciaux.
Ne commettez pas de fautes d'orthographe ou de grammaire
Je l'ai mis en dernier mais c'est un point très important. Combien de messages sont postés sur les forums Internet avec un français plus qu'approximatif. Il paraît qu'écrire en phonétique est plus rapide... peut-être. Mais quelle perte de temps lors du décryptage de ces messages. Pour corriger les fautes d'inattention, relisez vos pages à tête reposée, utilisez un correcteur d'orthographe ou demandez à un ami de les relire pour vous.
Cela peut vous paraître évident, mais une page Web qui n'est pas écrite en bon français ne peut pas être une bonne page Web.
© Copyright 2005, 2006, 2007 Erwan Monier