Bien que la plupart d'entre nous avons de bonnes bases dans la création de pages Web, ce n'est pas le cas de tous, certains étant plus débutants que d'autres, voire même qui sont encore dans les années 90 avec leurs pages faites avec Frontpage.
Je viens donc parler ici des choses à faire et à ne pas faire en création de pages Web.
Principes de base pour un site esthétique et facile à lire et à chargerPensez avant tout au confort de navigation de votre visiteur, avant vos préférences personnelles. Votre page doit être légère à charger, même pour les petites connexions et il est donc recommandé de ne pas dépasser 100Ko par page. Pour mesurer le poids de vos pages :
http://www.graphitoo.com/poids_page.phpN'oubliez pas que plus une page est alourdie d'éléments que vous hébergez au même endroit sur le site, plus cela fait consommer de la bande passante au serveur, ce qui finit par le ralentir quand elle est trop excessive !
Les artifices- Évitez de bourrer votre page de GIFs animés. Non seulement ça alourdit inutilement les pages, mais en plus, ça n'apporte strictement rien, sinon que votre visiteur sera déconcentré en tentant de lire du texte. Ne les utilisez que de façon discrète, pour signaler des nouveautés. Les clignotement trop rapides et trop violents peuvent causer des malaises chez les visiteurs atteints d'épilepsie. Évitez aussi les bannières animés, ceux-ci peuvent être confondus avec des pubs.
- Évitez les musiques de fond que l'on ne peut pas arrêter ! Peut-être que vous aimez la musique que vous voulez mettre, mais ce n'est pas nécessairement pas le cas de vos visiteurs, et ceci peut les faire fuir ! Si vous tenez vraiment à mettre une musique, laissez le choix au visiteur de l'arrêter, ou laissez-le décider de le jouer ou non. Mais cette musique reste quand même lourde à charger.
- Évitez de bourrer votre site avec des animations Flash ! Les menus faits entièrement en Flash vous priveront d'une partie de vos visiteurs, puisque ce n'est pas tout le monde qui a le plugin Flash ou qui peut voir le contenu de ces animations ! Les non-voyants par exemple, ne verront pas du tout le liens contenus dans le Flash : tout ce qu'ils verront, c'est un "gros" objet qui est juste "là". Réservez le Flash pour les vidéos et les jeux, et allez y avec parcimonie.
- Évitez aussi l'abus de Javascripts ! Ceux-ci ne doivent pas gêner la navigation lorsque le visiteur le désactive dans les préférences de son fureteur ou à l'aide d'un plugin (ex: extension Noscript, pour Mozilla Firefox), et ne doivent pas non plus gêner la navigation lorsque ceux-ci sont actifs. Évitez donc autant que possible les scripts "fioritures" comme les pluies d'images, ou l'image qui suit la souris. Ceux-ci alourdissent le chargement des pages pour n'apporter rien d'utile, en plus que si le script que vous dénichez est buggé, cela peut causer bien des problèmes de navigation, voire de plantages du navigateur !
- Évitez les pubs agressives en animation ou en popup ! Certains types de pub, comme les "vous avez XX erreurs sur votre système" peuvent induire en erreur les débutants en informatique qui peuvent alors se retrouver avec leur système infecté par un faux réparateur de fichiers ou un faux antivirus ! Préférez les pubs sous forme de texte, comme les pubs Google. Et parlant de pub, puisqu'on est ici sur Servhome, un code de pub Google Adsense est disponible pour ceux qui veulent encourager Servhome.
- Évitez de mettre des pans entiers de texte dans des images ! Non seulement, ces images seront lourdes à charger, mais en plus, si le visiteur ne peut pas voir l'image ou si le visiteur est non-voyant, il perd l'essentiel de l'information ! Si vous tenez à mettre du texte sur une image, il y a un moyen de le faire de façon plus accessible : Définissez l'image sans texte comme arrière-plan d'un bloc où le texte se trouvera.
Confort de lecture et esthétique- Évitez aussi d'utiliser du texte clignotant ou défilant, cela cause des difficultés de lecture pour certains internautes, en plus de déconcentrer autant que les GIFs pour la lecture des autres textes.
- Évitez les photos en filigrane comme image de fond, là où vous avez du texte ! Des contrastes trop élevés dans la photo gênent la lecture en rendant certains textes difficiles à lire. De plus, à mesure que votre page s'allonge, la photo finira par ce répéter, laissant voir un raccord très visible et très laid ! Préférez un fond uni ou, si vous tenez à mettre une texture, celle-ci doit être très discrète pour ne pas que votre page paraisse surchargée.
- Évitez les contrastes violents ! Les pages bourrées de couleurs vives et agressives fatiguent vite la vision du visiteur et celui-ci risque de ne pas vouloir revenir. Ne mettez ces couleurs que par petites touches, sur une page aux couleurs neutres.
- Assurez-vous d'avoir un contraste suffisant entre vos textes et vos fonds, pour éviter des problèmes de confort de lecture chez les internautes présentant des problèmes de perception des couleurs ou qui naviguent avec un écran noir et blanc. Certaines combinaisons, comme deux couleurs d'intensité similaire (ex: rouge et bleu moyen) sont donc à proscrire !
- Utilisez de préférences des tailles relatives, en
% ou en
em. Mais si vous voulez utiliser des tailles en pixel, n'allez pas plus bas que la taille 12 pour les textes principaux. Il ne faut pas oublier qu'on n'utilise pas tous la même résolution d'écran et donc, pendant qu'un texte en taille fixe de 9 pixels sera encore lisible sur une basse résolution (800*600), celui-ci sera illisible sur une très grosse résolution (supérieure à 1280*1024), en plus que ces textes ne sont pas agrandissables sous Internet Explorer !
- Comme choix de police, restez-en aux polices classiques, de préférences sans-sérif, comme Arial, Verdana et Trebuchet MS. Les résifs (Times, Georgia) sont à réserver à l'imprimé, tandis que les polices fantaisistes par défaut (Comic Sans MS, Impact) sont à réserver à des textes courts, car l'oeil se fatique plus vite avec ce type de police. Quant aux polices téléchargées sur le Net, réservez-les pour le graphisme ! Ces polices ne peuvent être vues que si le visiteur a cette police sur son ordinateur.
Laissez toujours plusieurs choix de police, en terminant toujours avec
sans-serif, pour éviter que la page ne s'affiche avec la police par défaut du système (Times New Roman sous Windows) lorsque le visiteur n'a aucune police parmi les choix.
- N'utilisez pas plus de trois polices différentes sur votre site !
- De préférence, donnez une couleur différente aux liens visités par rapport aux lienx normaux,
mais pas trop différents quand même !- Choisissez intelligemment les couleurs. Ceux-ci doivent avoir rapport avec votre sujet, et chaque couleur véhicule un message, et je vous conseille donc de rechercher des liens sur la signification des différentes couleurs.
- Votre site doit aussi avoir une homogénéité ! Il faut donc que les éléments graphiques et les couleurs s'accordent entre eux pour faire un tout, plutôt que d'être placés là, sans lien entre eux.
- Gardez toujours la même apparence pour l'ensemble de vos pages, pour que le visiteur ne soit pas dérouté par les changements de fonds.
Bonnes pratiques de codageIl n'y a pas que le visuel dont on doit se préoccuper, mais aussi du squelette du site, qui ne doit pas être négligé, et malheureusement, ce n'est pas le cas chez les débutants en créations de pages Web.
- Autant que possible, tournez-vous vers le codage à la main plutôt que vers les éditeurs dits "WYSIWYG" (What You See Is What You Get : Ce que vous voyez, vous obtenez), comme Frontpage et Web Creator ! Ceux-ci génère du extrêmement lourd à charger et pas du tout valide, en plus que ces pages seront difficiles à éditer ! De plus, avec ce type d'éditeur, vous ne vous préoccupez que du rendu visuel, sans penser à la structure, ce qui fait que bien souvent, les pages générées ne respectent pas du tout les règles de la sémantique (utilisation des balises HTML selon leur sens) et présentent des problèmes d'accessibilité !
J'en ai d'ailleurs parlé sur mon blogue, je vous donne le lien de mon article :
http://zone-libre.overblogger.com/carnet-de-bord-b1/Webcreator-un-editeur-HTML-a-eviter-ou-la-preuve-que-payant-ne-rime-pas-toujours-avec-qualite-b1-p5551.htm- Si vous tenez à utiliser un éditeur de type WYSIWYG, je vous recommande KompoZer, qui est gratuit, libre, multi-plateforme, et utilise le même moteur de rendu que celui de Firefox, ce qui vous assure dès le départ d'avoir du code valide. Mais le mieux reste encore soit d'utiliser un système de gestion de contenu, ou de coder ses pages à la main. Des sites tels que le
Site du Zéro et
AlsaCréations vous permettent d'apprendre le HTML et le CSS pour créer vos pages à la main, selon les bonnes pratiques de codage. Vous pouvez aussi faire appel à un webdesigner-codeur expérimenté pour faire votre site, si vous n'avez vraiment pas le temps.
- Autant que possible, séparez la présentation du contenu, avec l'utilisation de feuilles CSS externe et utilisez un Doctype valide, de préférence stricte. Votre code n'en sera que plus léger à charger, en plus de vous permettre d'avoir des pages aisément imprimables, sans recours à des pages alternatives. L'utilisation d'une feuille CSS externe rend l'édition plus aisée, puisque vous n'avez pratiement pas à toucher au code HTML pour modifier sa présentation ! Et en faisant ainsi, vous économisez la bande passante du serveur !
- Utilisez les balises intelligemment ! Les balises <div> sont des blocs invisibles qui servent à diviser votre page. Pour les titres, les paragraphes et les listes, vous avez des balises exprès pour ça ! Utilisez <h1> pour le titre principal, <h2> pour les titres secondaire, <h3> pour des sous-titres, et ainsi de suite, jusqu'à <h6>, qui est le niveau le moins important. Utilisez <p> pour vos paragraphes, puis <ul>, <ol> et <li> pour vos listes et menus de navigation. Pour mettre en valeur des bouts de textes, vous avez les balises <strong> (mise en valeur forte) et <em> (mise en valeur moyenne). Quant aux tableaux, utilisées à tort pour la mise en page, ils doivent être réservées pour présenter des données classées (ex: classement, liste des sujets). Vous en saurez plus sur les sites traitant du XHTML.
- Pour toute image que vous affichez
renseignez toujours le texte de remplacement, pour que ceux qui utilisent un navigateur ne supportant pas les images (les navigateurs texte par exemple) et les non-voyants puissent savoir ce que contient l'image. Si votre image n'a que purement un but décoratif, vous pouvez laisser le texte de remplacement vide, mais les normes obligent quand même à inclure
alt="", qui est l'attribut pour les textes alternatifs, dans votre balise d'image. Mais je vous recommande tout de même de définir ces images en fond avec le CSS.
- si vous voulez afficher des photos cliquables en miniatures, privilégiez les vraies miniatures, soit en utilisant la librairie GD de PHP, soit en faisant vous-même une version redimensionnée de vos photos avec un éditeur d'image (Photoshop, Photofiltre, Gimp), plutôt que d'utiliser
height="" et
width="" pour faire des fausses miniatures. Vous économiserez énormément en poids des pages, ce qui aura pour effet de rendre le chargement plus rapide.
- Lorsque vous codez votre page, n'oubliez surtout pas qu'il n'y a pas qu'Internet Explorer dans le paysage du Web, puisque près de 30% des internautes utilisent un autre navigateur, dont le plus utilisé, Mozilla firefox, compte pour 20% du total des internautes. Les autres navigateurs alternatifs sont Safari, Google Chrome, Opera et bien d'autres. Malheureusement, on voit encore des pages optimisées uniquement pour Internet Explorer, ce qui cause des problèmes d'affichage chez les autres navigateurs. Il faut donc s'assurer que vous pages soient compatible entre navigateurs. Pour le codage aux normes, il est même recommandé de tester principalement avec Mozilla Firefox, qui respecte beaucoup mieux les standards qu'Internet Explorer. Il sera ainsi plus aisé de corriger pour le navigateur de Billou par la suite.
- Sachez aussi qu'il y a d'autres systèmes d'exploitation mise à part Windows. Plusieurs d'entre nous ici utilisent Mac OS X ou Linux (c'est mon cas), donc la compatibilité entre navigateurs doit se faire aussi dans l'optique d'assurer un affichage correct chez ces utilisateurs, puisqu'Internet Explorer n'est plus développé pour Mac, et n'est pas disponible en natif sous Linux.
- Affichez le menu sur toutes les pages de votre site ! Non seulement ça donne une homogénéité à l'ensemble des pages de votre site, mais en plus, ça économise des clics pour ceux qui veulent accéder à une autre rubrique, puisqu'ils n'auront pas à cliquer sur le lien "retourner à l'accueil", s'il y en a un, ou faire "Précédent" si la page est orpheline.
- Évitez les frames autant que possible ! En plus d'être mauvais pour le référencement, cela rend la navigation plus difficile pour certains internautes : Les non-voyants n'ont pas de vision globale de votre site et donc, s'il n'y a pas de lien de retour, ils restent pris dans la page centrale. En plus, cela cause des maux de tête aux débutants en informatique qui voudront transmettre le lien direct d'un article ou l'ajouter aux favoris, puisque bien souvent, ils ne savent pas qu'ils doivent faire un clic-droit sur la page > ce cadre > afficher seulement ce cadre, pour pouvoir le faire, mais d'un coup, ils n'ont plus le menu.
Donc, utilisez plutôt la fonction include() de PHP si le serveur supporte ce langage (ce qui est le cas de Servhome), pour pouvoir n'avoir à éditer qu'un fichier pour modifier votre menu.
- Évitez les liens qui ouvrent automatiquement une nouvelle fenêtre ! Ceci est particulièrement déroutant pour les non-voyants qui ne savent pas toujours qu'une nouvelle fenêtre s'est ouverte, et même les utilisateurs voyants ne s'en rendent pas toujours compte, quand la nouvelle fenêtre s'ouvre en arrière. Il faut laisser le choix au visiteur d'ouvrir ou non le lien dans une nouvelle fenêtre, et si vous tenez à le forcer, laissez un indicateur pour informer le visiteur que le lien s'ouvre dans une nouvelle fenêtre.
Quelques liens utilesPour finir, je viens vous mettre des liens utiles, en commençant par un lien montrant les erreurs à ne pas faire en création de pages Web :
http://www.angelfire.com/super/badwebs/Ainsi que les raisons pour ne pas faire de mises en pages par tableaux :
http://www.cybercodeur.net/weblog/presentations/seybold/index.htmlEnsuite, pour ceux qui veulent rester dans le WYSIWYG :
http://www.clubic.com/telecharger-fiche36476-kompozer.html - KompoZer pour Windows
Éditeur d'image, pour vos designs :
http://www.gimpfr.orgEt pour l'apprentissage du XHTML et du CSS :
http://www.siteduzero.com (page d'accueil)
http://www.siteduzero.com/tutoriel-2-69-xhtml-css.html (tous les tutoriels XHTML)
http://www.alsacreations.comhttp://www.openweb.eu.orghttp://www.csszengarden.com/tr/francais/Le Net et les non-voyants :
http://www.youtube.com/watch?v=Kz1AQ4dqxgAhttp://www.youtube.com/watch?v=SZ0bgMjYG_Ehttp://www.youtube.com/watch?v=Tb9Thr6Lj5Q(note à l'équipe : si vous pensez que cette doc pourrait être placé ailleurs que dans la partie Prog, pour plus dd visibilité, vous pouvez la déplacer)
