La réalisation technique
d'un site Web

Vous pouvez concevoir un excellent site web en html et nous n'aborderons pas de langage complexe dans cette page. Voici une liste des points techniques fondamentaux que vous devez maîtriser.

---

Dans cette page : Créer un site universel - Permettre un bon référencement - Faciliter la navigation

---

Créer un site universel

Configurations des internautes en 2005 (tous pays confondus) Systèmes : Windows NT/XP : 85 % Windows 98 : 6 % Mac OS : 6 % Linux : 1 % Autres : 2 % Résolutions : 1024x768 : 56 % 1280x1024 : 17 % 800x600 : 11 % 1152x864 : 6 % 1280x800 : 2 % Autres : 8 % Navigateurs : Explorer : 73 % Mozilla : 22 % Safari : 4 % Autres : 1 % source : RankSpirit

Votre site doit faire bonne figure quelles que soient les configurations de vos visiteurs : Windows, OSX, Unix, Explorer, Mozilla, Safari, petits, moyens ou grands écrans, votre modèle de page doit s'afficher correctement dans toutes les conditions.

En respectant quelques règles simples (et de bon sens) pour l'écriture de vos pages, vous vous garantirez une compatibilité avec tous les navigateurs et vous faciliterez la parcours de vos visiteurs, y compris ceux qui utilisent des assistants de navigation tels que les malvoyants.

Etudier - au moins sommairement - les standards existants ne vous prendra que quelques heures et vous en fera gagner des centaines par la suite. Lisez attentivement le long article de Maccaws sur ce sujet : il est riche d'enseignement.

Testez votre maquette en faisant varier la largeur et la hauteur de la fenêtre de votre navigateur. Au besoin, changez la résolution de votre écran pour voir l'effet produit. Installez Mozilla, Explorer et Safari sur votre poste et testez votre site à travers ces 3 principaux navigateurs. Débrouillez-vous pour que l'affichage reste correct dans tous les cas, c'est important !

Il est tout à fait possible d'installer plusieurs versions d'Internet Explorer ou de FireFox sur une seule machine afin de pouvoir faire des tests. Pour y parvenir, vous devrez vous procurer des versions "standalone" de ces navigateurs. Wikistuce propose dans ce but une archive incluant IE 5.5, IE 6 SP2, IE 7, Firefox 1.5.0.7, Firefox 2.0, Opera 8.5, Opera 9 et Netscape 7.

Les sites BrowserCam et Browsershots vous donneront des captures d'écran de vos pages vues à travers les différents navigateurs du marché. Vous pouvez également utiliser DejaVu pour tester votre site avec les navigateurs des années 90 ou danvine pour tester votre site avec Safari Macintosh ou Internet Explorer 7.0 ainsi que Scapture pour les navigateurs du monde Linux.

Utilisez le validateur W3C pour tester vos pages ou Validateur.ca pour tester/valider tout votre site d'un seul coup.

Les langages tels que Java, Javascript et Flash ne s'exécutent pas forcément sur tous les postes de vos internautes. Si vous les utilisez, faites en sorte que la navigation sur votre site n'en soit pas trop dépendante. Pour désactiver l'exécution du Javascript dans Internet Explorer, il vous suffit de pousser le niveau de sécurité au maximum dans "Outils/Options Internet.../Sécurité".

Avant de vous lancer dans l'étude du PHP ou du Javascript, il est impératif de parfaitement maîtriser les bases du HTML et du CSS. Les règles de bases du HTML sont simples et accessibles à tous grâce à l'excellent site de vulgarisation "Site du zéro". Pour ce qui est des CSS, nous vous conseillons le site "CSS-Faciles" qui aborde cette technique avec douceur. L'amélioration de votre design esthétique et technique doit commencer par là.

 

Permettre un bon référencement

Une syntaxe irréprochable : c'est un minimum ! Un code incorrect peut causer des problème d'affichage ou de ralentissement de chargement. Il peut aussi empêcher l'indexation de tout ou partie de votre site. De nombreux systèmes de vérification de code sont disponibles en ligne, utilisez-les. Les liens en javascript ou en Flash : ils sont visibles et utilisables par les visiteurs mais ne sont pas interprétés par les moteurs. Certaines pages risquent donc d'être purement et simplement inaccessibles aux moteurs. Une solution simple consiste à réaliser une page "plan de site" qui comporte des liens HTML vers TOUTES les pages de votre site. Un lien HTML de la page d'index vers cette page "plan de site" permettra aux moteurs d'explorer et d'indexer l'intégralité de votre site. Balises "Alt". Si votre site comporte peu de texte et beaucoup d'images, il est impératif de compléter les balises "Alt" de toutes vos images pour avoir une chance de figurer dans les résultats des moteurs de recherche. Le fait de compléter ces balises vous permettra dans tous les cas de gagner de la pertinence. Les titres de pages et les descriptifs (balises <Title> et <Description> : ces zones ne jouent pas un rôle important pour l'indexation des pages. Elles jouent pourtant un rôle capital dans vos résultats de fréquentation. Les moteurs utilisent en effet souvent le contenu de ces balises pour présenter un "résumé" de vos pages aux internautes. La balise "description" est également utilisée par certains annuaires. Il est donc impératif d'individualiser ces balises et d'y loger un texte clair et attractif pour chaque page. Des balises <Title> et <Description> identiques peuvent amener vos pages à être victimes de "Duplicate Content" .

Citez vos sources : Faites des liens vers les pages dont vous vous êtes inspiré. C'est la moindre des politesses et c'est un moyen de gagner de la pertinence vis-à-vis des moteurs de recherche. Les pages dynamiques : les pages générées par les langages évolués tels que le PHP ou l'ASP ont parfois des URLs (adresses) trop complexes pour être reconnues par les moteurs de recherche. Il est alors indispensable de pratiquer l'"URL Rewriting" pour simplifier ces adresses aux yeux des moteurs. Les URLs "nettoyées" de cette façon doivent figurer dans votre plan de site ou sur une autre page. Structure du site : Faites en sorte que n'importe quelle page de votre site soit accessible en 3 clics maximum depuis la page d'accueil. Le nom de domaine: déposez un nom de domaine et choisissez un hébergeur professionnel. Cela vous évitera beaucoup de soucis. Noms de fichier : Donnez à vos fichiers image et à vos pages des titres explicites et évocateurs. Si vous utilisez des noms composés, séparez les mots par des tirets. Exemple : axel-red-en-vacances.htm Les frames : elles peuvent compliquer l'indexation de certaines pages. Le plan de site vous permettra, une fois encore, d'être certain de voir toutes vos pages indexées. L'utilisation des frames pose malheureusement beaucoup d'autres problèmes et nous vous la déconseillons vivement. Et si vous n'êtes pas convaincu par cette mise en garde, nous vous conseillons la lecture de l'article de Denis Boudreau à ce sujet.

---

En détail ...

Faciliter la navigation

Structure des liens Le lien est une composante essentiel d'un site Internet. Une bonne réflexion sur ce sujet est indispensable pour commencer. N'hésitez pas à multiplier les liens internes. Si deux de vos chapitres parlent d'un sujet voisin, liez-les entre eux. Si l'une de vos page définit un terme, mettez un lien vers cette page à chaque fois que vous utilisez le terme en question. Veillez à ce que tous vos liens internes s'équilibrent bien. Pour mener cette tâche à bien, utilisez l'utilitaire gratuit LinkSpirit.

On a coutume de considérer que l'internaute rentre dans un site par la page d'accueil, lit sagement les menus et navigue ensuite au grès des propositions qui lui sont faites dans cette page.

Ce beau schéma théorique correspond pourtant bien peu à la réalité !

Dans un très grand nombre de cas, l'internaute découvre votre site après avoir cliqué sur un résultat de recherche ou sur un lien qui ne pointe pas forcément vers votre page d'accueil. Que découvre-t-il ? Comment se repère-t-il ? C'est une question que vous devez vous poser en permanence.

Pour aider l'internaute à se repérer, votre site doit être organisé d'une façon aussi claire que possible, avec des chapitres et des sous-chapitres qui correspondent à un découpage logique et immédiatement compréhensible.

Si votre page d'accueil joue un rôle important, chacune de vos pages doit comporter un lien vers cette page d'accueil.

Un bouton de recherche doit être accessible en permanence.

Les liens "page suivante" et "page précédente" aident considérablement l'internaute à suivre votre logique de navigation. Mettez-en sur toutes les pages.