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

Le contenu de cette page est périmé, elle reste disponible en guise d'exemple. Pour revenir à la version correcte de cette page, cliquez ici.

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 plutôt Mozilla. 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. Mais peut-être ne savez vous pas qu'il existe plusieurs type de HTML et plusieurs façons de l'utiliser. Le W3C est un consortium qui se charge de définir les standarts des langages de programmation de pages web : le passé, c'est la norme HTML4.01 et l'avenir c'est le XML. Entre les deux, il y a le XHTML.

Avec le HTML, le code source de la page mélangeait le contenu de la page et les balises de présentation (esthétique) de la page. Le XML, encore mal reconnu par les navigateurs, sera le langage de demain et séparera complètement le contenu et l'apparence en permettant aussi de créer ses propres balises. En attendant, le W3C nous donne un langage pour faciliter la transition : le XHTML.

La syntaxe reste 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.

La lisibilité des pages

La résolution de l'écran

Environ le quart des internautes consultent les pages web sur un écran de résolution 800 pixels sur 600 pixels (stat juillet 2005). 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 800x600 même si celle-ci disparaîtra dans quelques années. Si vous programmez votre site pour une résolution supérieure le quart 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 800x600, ceux qui auront des écrans plus grand 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é 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.

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 à gauche de la page et pas à 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. 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).

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 la liste de toutes les pages de votre site, ce qui peut être gênant car certaines pages doivent rester cachées. 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-dossier.

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 ?