Conception d'un site web
Cette page présente quelques considérations sur la conception de sites web. Certaines sont énoncées par des spécialistes et d'autres sont plus personnelles. Je ne prétends pas détenir la Vérité Absolue; je me propose simplement de vous faire profiter de mon expérience en tant que webmaster et surfeur.
1. Questions préliminaires - 2. Les outils - 3. Faire un plan du futur site - 4. Réalisation - 5. Test du site - 6. Mise en ligne - 7. Maintenance et mises à jour - Références et liens
Il convient tout d'abord d'apporter une précision sur les rapports entre "pages web", "site web" et "page d'accueil": un site web est en quelque sorte une publication constituée d'un certain nombre de pages web. Parmi ces pages, la page d'accueil occupe une place de choix, puisqu'elle fait office de couverture pour cette publication sur le web. La visite d'un site commence généralement par cette page de démarrage.
- Quel est l'objectif visé?
- Que souhaitez-vous présenter?
- À qui s'adressera votre site?
- Quel nombre de pages prévoyez-vous de produire?
- Quelle doit être l'apparence des pages? Avez-vous une idée concrète ou des pages d'exemples?
- Qui est le responsable du projet ? S'il y en a plusieurs, quelle sera la tâche de chacun?
- Est-il prévu d'apporter par la suite des modifications ou de faire des mises à jour? Qui devra s'en charger?
- Quel est le budget?
- Un éditeur de pages web: Claris HomePage, Frontpage, Adobe Golive, Dreamweaver,
.... On peut aussi composer les pages dans n'importe quel éditeur à
condition d'utiliser le langage HTML.
- Un logiciel de traitement d'images
- Un scanner
- Pour des sites plus interactifs, des livres sur javascript,
java, Flash, DHTML, php, etc.
Deux principes de base - La page d'accueil est la plus importante - Navigation dans le site - Les pages doivent être lisibles - Apparence graphique
- Deux principes de base
- Le plus important, ce sont les visiteurs! Faites le maximum pour eux.
- Le contenu doit primer sur le contenant. On ne vous demande pas d'éblouir
vos visiteurs par votre virtuosité technique, on vous demande de les informer.
- La page d'accueil est la plus importante
- Elle doit être attrayante graphiquement, rapide, sans fautes d'orthographe
et elle doit donner une bonne idée du contenu du site.
- Le nom du site et son logo doivent figurer sur la page d'accueil, afin
que l'internaute sache tout de suite où il se trouve.
Un exemple: CFF
- Mettez les informations les plus importantes en haut de la page.
- Dites non aux écrans d'introduction. Ils ont une utilité seulement quand
il s'agit de prévenir le visiteur que le contenu du site peut le choquer
(sites érotiques), lui proposer une langue, ou lui permettre de choisir
entre une version rapide et une version lente.
- Évitez les pages d'accueil tellement chargées que l'on ne sait plus où
donner de la tête.
- Appelez toujours la page d'accueil "index.html", cela raccourcit l'adresse
URL. En effet, la page index.html est choisie par défaut, ce qui veut dire
que l'on peut supprimer le "index.html" à la fin d'une adresse.
- Il est utile de mettre sur la page d'accueil une table des matières et/ou
un moteur de recherche.
Un exemple: Lycée
cantonal de Porrentruy.
- Évitez d'ouvrir automatiquement des fenêtres supplémentaires pour de la
pub ou autre. C'est franchement agaçant.
- Dans le même ordre d'idée, évitez les pages produisant automatiquement
des sons. Il est préférable de laisser au visiteur le choix d'entendre la
musique ou non.
- Attention aux pages d'accueil métaphoriques! Elles peuvent désorienter
le visiteur.
Un exemple: Virtual
Museum Of Arts El Pais
- Navigation dans le site
- L'utilisateur ne doit jamais se perdre! Il devrait toujours pouvoir retourner
à la page d'accueil d'un seul clic (par exemple en utilisant, avec parcimonie,
les cadres).
Un exemple: The
Tigger Movie
- Les cadres: sujet controversé! Ils sont très mal gérés par les moteurs
de recherche. Aussi est-il possible qu'un visiteur arrive sur une page sans
les cadres qui vont avec. Si votre système de navigation est exclusivement
concentré dans les cadres, l'internaute sera bloqué sur cette page.
Un mauvais exemple: problème si on
tombe sur cette
page (sans cadres) plutôt que sur celle-là
(avec cadres)!
- Conséquence du point précédent, une page doit toujours contenir au moins
un lien pour la raccrocher au reste du site, par exemple en mettant en bas
de la page un bouton permettant de revenir à la page qui la précède logiquement.
En effet, il est possible qu'un internaute "tombe" sur une page via un moteur
de recherche et s'y retrouve ainsi bloqué, n'ayant aucun lien sur lequel
cliquer.
- Signalez clairement les liens. Le mieux est de garder la couleur standard,
à savoir bleu souligné.
- Un visiteur doit pouvoir deviner où un lien le conduira avant même de
cliquer dessus.
Un mauvais exemple: les
archives d'Archimède.
- Évitez un cheminement linéaire. Un site web n'est pas un livre. Attention
toutefois à ne pas perdre le visiteur.
- Les pages doivent être lisibles
- Évitez les fonds d'écran qui font mal aux yeux. Choisissez des couleurs
douces et de faibles contrastes.
- Si vous écrivez en blanc sur fond noir, pensez que l'utilisateur aura
des difficultés à imprimer la page.
- N'écrivez pas trop petit. Le mieux est de garder les polices et les tailles
standard.
- Ne tombez pas dans l'excès inverse. Il est agaçant de devoir bouger l'ascenseur
horizontal. Ne dilapidez pas la place.
- Évitez aussi de concevoir votre site pour une résolution d'écran bien
précise. Si vous pensez que le visiteur va changer la résolution de son
écran juste pour voir votre site, vous rêvez!
Un mauvais exemple: Killing
wave
- Sur un écran, l'écriture italique fatigue vite les yeux. Pour mettre
des mots en évidence, préférez-y l'écriture en gras.
- À l'inverse, les pages ne contenant que deux lignes de texte sont ridicules.
- Évitez plusieurs sujets sans rapport entre eux sur une même page. Règle:
1 sujet = 1 page.
- Évitez les textes trop longs. Il n'est pas très agréable de lire sur un
écran. Au-delà de 500 mots, la lecture d'une page web devient pénible. En
cas de longs textes, créez des ruptures (sous-titres, icônes). D'un autre
côté, si le texte est destiné à être imprimé, autant tout mettre sur une
seule page, comme c'est la cas sur la page que vous lisez actuellement.
- Jakob Nielsen
a fait des recherches sur la manière dont les internautes lisent
les page web en analysant leurs mouvement oculaires. Il ressort de cette
étude que l'on lit des pages web selon un motif en F (voir image
ci-contre). On remarque que
- l'attention des utilisateurs commence dans le haut de la page,
- les yeux suivent une verticale à gauche de la page,
- dès qu'un élément intéressant est repéré
dans le cheminement vertical, l'utilisateur se détourne de sa
recherche pour lire la phrase plkus attentivement.
On n'écrit donc pas une page web comme une page d'un livre. Il faut
faire des plus petits paragraphes, commencer la phrase par les éléments
les plus percutants et ne pas hésiter à insérer des
sous-titres pour accrocher l'oeil.
- Apparence graphique
- N'abusez pas des images. C'est joli, mais le temps de téléchargement de
la page sera plus long. L'utilisateur sera-t-il assez patient?
- N'abusez pas non plus des animations, cela finit par donner la nausée.
Sans compter que cela prend du temps à télécharger...
- Une certaine ligne graphique doit être respectée afin de ne pas désorienter
le visiteur.
Un excellent exemple: Science
U.
- Pour plus d'interactivité, vous pouvez installer un forum et/ou un livre
d'or, ou encore un sondage (par exemple grâce à pouroucontre).
Ici vient la phase de création à l'aide de logiciels spécialisés.
- Vérifiez que tous les liens aboutissent bien sur les pages souhaitées. En
particulier, peut-on revenir facilement à la page d'accueil?
- Testez l'apparence de chaque page sur les dernières versions de Netscape
Communicator ET Internet Explorer. On a parfois de mauvaises surprises!
En effet, l'interprétation du langage HTML n'est pas tout à fait identique
sur les deux navigateurs, principalement concernant l'aspect des tableaux
et des listes.
- Vérifiez que toutes les images apparaissent. En cas de problème, vous verrez
apparaître le symbole ci-contre.
- Vérifiez et revérifiez l'orthographe!
- N'hésitez pas à demander l'avis de vos amis concernant la navigation dans
votre site et son contenu.
- Hébergement: Pour les sites privés, il y a des hébergeurs gratuits
(malheureusement pollués par la publicité). Pour des prix raisonnables, on
peut avoir un serveur à soi, avec une base de données, PHP, etc., par exemple
chez AlpHosting (chez lequel ce
site est hébergé).
- Outils pour transférer vos fichiers sur un serveur (upload). Mac:
Fetch, PC: Filezilla,
FTP Expert, ...
- Choisissez bien le nom de votre site pour qu'il soit facile à mémoriser.
- Veillez à être bien référencé dans les moteur de recherche les plus connus
- Une fois le site mis en ligne, testez la version en ligne. Parfois la version
locale (celle sur votre ordinateur) marche, mais la version en ligne "foire"
(en ligne, les majuscules et minuscules des noms de fichiers sont différenciées,
alors qu'elles ne le sont pas sur la version locale).
- Si vous avez des liens avec d'autres sites, vérifiez périodiquement que ces sites sont toujours accessibles. Il est possible de faire des vérifications automatiques grâce à LinkAlarm.
- Ne changez pas les noms de vos fichiers HTML! Pensez aux gens qui ont peut-être mis cette adresse dans leurs signets (favoris sur Internet Explorer).
- Vous pouvez observer la fréquentation de vos pages grâce à des compteurs d'accès
et en tirer des conclusions.
- Vérifiez que toutes les informations que vous donnez sont à jour!
- Un site doit être vivant! Un site qui ne subit pas de mises à jour régulières et qui contient trop d'informations obsolètes sera vite délaissé par les visiteurs.
Un bon exemple: HC Ajoie
- Gardez toujours une copie intégrale du site sur votre ordinateur personnel. On ne sait jamais ce qui peut arriver au serveur!
 |
 Didier
Müller, 19.9.08 |
