Quelques règles à respecter !
(plus ou moins :-) )

Avant de se lancer dans la technique il est bon de connaître certains points : les pièges à éviter, les habitudes des surfeurs, les techniques de lecture, ...

Avant tout sachez qu'il existe différents navigateurs et différentes façons de consulter un site web. Parmi les navigateurs, on peut utiliser Internet Explorer ou encore Mozilla Firefox. Les deux n'afficheront pas les pages de la même façon. On peut consulter votre site sur un petit écran ou sur un grand. On peut aussi le consulter sur un ordinateur de poche ou encore sur un vieil ordinateur qui a du mal à afficher plus de 3 images ! Dans la mesure du possible essayez de n'oublier aucun visiteur et de rendre votre site compatible pour le plus grand nombre de personnes. Ne changez pas non plus trop les habitudes du web. Presque tous les sites mettent les menus de navigation à gauche de la page, ne mettez pas les votres à droite ! Vous verrez plus bas qu'il y a une raison à cela ...

Le langage de programmation

On ne fait plus des pages web aujourd'hui comme on les faisait il y a encore peu de temps.

Vous avez surement entendu parler de HTML. Il s'agit d'un langage de programmation des pages web basée sur les liens hypertextes et sur des balises. Ces balises définissent l'apparence du texte saisi (une balise pour les puces, une balise pour un paragraphe, une autre pour mettre en gras, ...). Mais peut-être ne savez vous pas qu'il existe plusieurs types de HTML et plusieurs façons de l'utiliser. Le W3C est un consortium qui se charge de définir les standards des langages de programmation de pages web : le passé, c'est la norme HTML4.01 et l'avenir c'est le XHTML, basé sur un langage appelé XML.

Avec le HTML, le code source de la page mélangeait le contenu de cette page et les balises de présentation (esthétique). Le XHTML quant à lui sépare complètement le contenu et l'apparence. La syntaxe reste presque la même qu'avec HTML (c'est ce qui rend la transition facile), mais on ne met dans la page que le contenu. Tout ce qui a trait à l'apparence (taille de police, couleur, ...) est indiqué dans un fichier externe appelé feuille de styles. Il suffit de modifier la feuille de styles pour que toutes les pages y faisant référence soient modifiées aussi. Nous en parlerons plus en détails dans le chapitre sur les feuilles de styles. Le XHTML est aussi plus rigoureux que le HTML dans sa syntaxe. Il faut tout écrire en minuscules, fermer toutes les balises, ... Nous verrons cela au fur et à mesure des exemples.

La lisibilité des pages

La résolution de l'écran

Même si les écrans actuels sont grands, on constate que plus d'un tiers des écrans des internautes sont règlés sur une résolution de 1024x768 pixels (stat décembre 2007). 4% ont une résolution d'écran de 800x600 pixels. Le reste des internautes possède des écrans avec une résolution plus grande. Quelques rares "ancètres :-)" utilisent encore une résolution plus petite. Il faut donc encore privilégier la résolution de 1024x768 même si celle-ci disparaîtra dans quelques années. Si vous programmez votre site pour une résolution supérieure le tiers des internautes sera obligé d'utiliser l'ascenseur horizontal pour lire votre site. Autant dire qu'ils ne resteront pas longtemps ! Si au contraire vous réalisez votre page en travaillant pour des écrans en 1024x768 (voir en 800x600), ceux qui auront des écrans plus grands pourront la lire sans problèmes.

Voici un site intéressant qui permet de tester son site avec n'importe quelle résolution :

http://www.anybrowser.com/ScreenSizeTest.html

Le choix du fond d'écran

Priorité n°1 : le texte doit être lisible ! Evitez les fonds d'écran très bariolés avec des dessins de toutes les couleurs. L'idéal est un fond uni, sans images. En plus votre page se chargera plus rapidement.

Sens de lecture de la page

Une petite constatation qui n'a l'air de rien mais qui est très intéressante :
Lorsqu'on lit une page web on la parcourt en diagonale du coin supérieur gauche au coin inférieur droit. Les deux autres coins sont ceux que l'on lit en dernier, voir pas du tout ! Evitez donc d'y mettre les informations les plus importantes.

Zone toujours visible

Dans le même genre d'idée que ci-dessus, le coin supérieur gauche est le seul que l'on voit toujours, quelque soit le navigateur, la résolution de l'écran ou la taille qu'occupe la fenêtre du navigateur. Imaginez qu'une personne consulte votre site avec un navigateur dans une fenêtre réduite, que verra-t-il ? Faites un essai en réduisant cette fenêtre. Vous constaterez que le site se recadre automatiquemment pour le voir toujours en entier. Essayez maintenant avec cette autre page, avec un contenu identique, mais qui a une largeur fixe : test

Ca y est, vous avez essayé ? Convaincu de mettre les éléments importants à gauche de votre page ? C'est pour cela que l'on met les menus de navigation plutôt à gauche de la page et plus rarement à droite. Ils sont ainsi toujours visibles.

Longueur des lignes de texte

La lecture à l'écran est fatiguante et cela ne s'arrange pas avec de longues lignes. Une longueur de 60 à 90 caractères semble être un bon compromis.

Faites des phrases courtes, elles sont plus simples à comprendre.

L'organisation des fichiers

Nommage des fichiers

Les deux premières règles ci-dessus sont TRES IMPORTANTES. La dernière l'est sans doute un peu moins aujourd'hui car tous les systèmes d'exploitation lisent des noms de fichier longs. Explications :

La majorité des personnes qui ont un ordinateur travaille avec un système d'exploitation de Microsoft (Windows pour ne pas le nommer :-) ). Celui-ci ne fait pas la différence entre majuscule et minuscule. Les noms de fichier toto.htm et Toto.htm représentent donc la même page. MAIS lorsque vous allez publier votre page sur un serveur chez un hébergeur c'est le système d'exploitation Linux qui est la plupart du temps utilisé (de façon totalement transparente pour vous). Or linux fait la différence entre minuscule et majuscule. Toto.htm et toto.htm sont donc deux fichiers différents.

Conclusion : si vous créez un fichier nommé Toto.htm et dans un autre fichier un lien vers toto.htm, ce lien fonctionnera sur votre ordinateur, mais pas chez votre hébergeur, une fois en ligne. C'est une erreur classique qui arrive à tous les débutants ... et aux autres :-).

Extension .htm ou .html ?

Une page web peut avoir l'extension htm ou html. Pour respecter les règles ci-dessus et la compatibilité avec un maximum de système d'exploitation, il vaut mieux utiliser l'extension htm (3 lettres). Cela dit, tous les systèmes d'exploitation d'aujourd'hui savent lire les extensions avec plus de 3 lettres, donc cette règle perd de son importance.

Le nom de la page d'accueil

Lorsque vous tapez l'adresse d'un site web dans votre navigateur sans spécifier de page précise c'est la page d'accueil qui se lance. En fait le serveur qui héberge les pages lance automatiquemment la page nommée index.htm (ou index.html ou index.php, ...). Votre page d'accueil doit donc forcément se nommer index.htm.

Si vous ne respectez pas cette règle, aucune page sera lancée, mais le navigateur affichera soit la liste de toutes les pages de votre site (ce qui peut être gênant car certaines pages doivent rester cachées), soit un message d'erreur (suivant la configuration du serveur). Sans oublier que l'internaute ne saura pas quelle page ouvrir !

Pensez aussi à mettre une page index.htm dans chaque sous-dossier. Cette page pourra éventuellement être vide. Cela permettra de cacher la liste des fichiers car le navigateur affichera une page blanche. Cela peut être utile pour cacher l'accès de certains sous-dossiers.

La navigation dans votre site

La page d'accueil

La page d'accueil est la plus importante de toutes. Elle doit donner envie d'aller voir le reste. Elle doit contenir un maximum d'informations importantes mais ne pas être trop longue. De nombreux visiteurs n'utilisent pas l'ascenseur vertical (et je ne parle pas de l'horizontal :-) ). Alors rappelez vous la règle citée plus haut : on place le plus important en haut à gauche.

La règle des 3 clics

Les données importantes doivent être trouvées en un maximum de trois clic de souris. Si l'internaute doit trop cliquer avant de trouver ce qu'il cherche il s'en ira chercher ailleurs.

Les liens

Placez des liens judicieux pour la navigation. L'utilisation de la flèche "Précédente" du navigateur n'est pas intuitive pour beaucoup d'internautes. En particulier il devrait y avoir sur toutes les pages un lien pour revenir à la page d'accueil de votre site.

Temps de chargement des pages

Vos pages devraient s'afficher rapidement. Au bout de 10s d'attente, l'internaute s'impatiente. Au bout de 15s il y a de forte chance qu'il s'en aille. Au bout de 20s, c'est sur, il sera déjà loin !

Cours suivant : quels logiciels utiliser ?