Lors du lancement d'un site web, il y a de nombreuses choses à vérifier. Il y a tellement de points à prendre en considération que cela amène, malencontreusement, à oublier des points important. Pour éviter de tels oublis, je vous propose une check-list au format pdf que vous pouvez facilement imprimer.
Détail de la check-list
Composés d'environ 70 points, répartis dans 10 catégories, cette liste se veut complète. Le reste de l'article, présente la liste et détails chacun des points qui y sont présent.
Design
| A effectuer | Description |
|---|---|
| Identité visuelle | S'assurer que l'identité visuelle est bien réalisée et s'harmonise sur l'ensemble du site. Si nécessaire, y a-t-il des bannières de différents formats aux couleurs du site? |
| Logo bien situé | Est-ce que le logo se situe à une place où il devrait être? La plupart du temps, l'emplacement du logo est dans le coin en haut à gauche. |
| Tagline | Le tagline correspond au petit message situé à côté du logo (ou incorporé au logo) qui indique la thématique du site et sa valeur. Les nouveaux visiteurs peuvent alors rapidement savoir sur quel type de site ils se trouvent. |
| Welcome blurb | Le welcome blurb est un message situé sur la page d'accueil qui précise la thématique du site et vend ses mérites. |
| Navigation simple | Est-ce que les éléments de navigation sont simples à comprendre et à trouver? |
| Ergonomie | Point très général qui consiste à vérifier tous les principaux critères liés à l'ergonomie du site web. |
| Liens facile à discerner et à comprendre | Est-ce que le design du site à réaliser des liens qui sont facile à discerner (exemple: souligner et d'une couleur différente). De même, est-ce que l'ancre des liens est compréhensible? (exemple: éviter "cliquer ici"). |
| Favicon | Présence d'un favicon? |
Typographie
| A effectuer | Description |
|---|---|
| Contraste correct | Très important en termes d'usabilité et d'accessibilité, le contraste doit être idéalement blanc et noir. |
| Taille des caractères | Est-ce que les caractères ont une taille suffisante? De même, est-ce que l'espacement des lignes et des mots est "bien pensé"? |
| Régularité / Uniformité | Faire en sorte que toutes les pages possède la même structure et uniformité (exemple: titre principal toujours au même endroit). |
| Sémantique xHTML | Tous les principes sémantiques ont-ils été réalisés? Par exemple <h1> sert à définir le titre principal, puis les sous-titres utilisent <h2>. |
| Relecture | Indispensable pour éviter les grosses erreurs. |
| Orthographe et grammaire | Faire en sorte que les textes n'aient pas de fautes. |
| Mode et temps du français | Est-ce que le temps et mode des phrases est régulièrement le même? Si un texte débute à l'impératif, puis continu au conditionnel et à l'indicatif, cela peut vite devenir difficile à suivre. |
| Pas de mots ou phrases trop récurrentes | Faire attention aux répétitions qui alourdissent la lecture. |
Navigation
| A effectuer | Description |
|---|---|
| Logo = lien vers la page d'accueil | Presque obligatoire en termes d'usabilité, il faut que le logo du site soit un lien vers la page d'accueil. |
| Page plan du site | Y a-t-il une page qui sert de plan du site? |
| Page mentions légales | Y a-t-il une page contenant les mentions (exemple: condition générales de ventes, condition d'utilisation ...)? |
| Page de contact | Est-il possible de contacter le site ou le webmaster? Y a-t-il les coordonnées et l'adresse du principal administrateur du site? |
| Fil d'Ariane | Élément très utile pour naviguer et se situer dans la hiérarchie du site, qui est parfois appelé le "breadcrumb". |
Webmarketing
| A effectuer | Description |
|---|---|
| Balise de titre (<title>) | Faire en sorte que la balise de titre soit optimisé tant pour le référencement que pour inciter les internautes à cliquer sur le lien lorsqu'ils verront le titre dans les résultats de recherche de Google. |
| Balises meta (exemple: meta description) | A placer au minimum sur les pages importantes, certaines balises meta améliore le positionnement des pages web sur certains moteurs de recherche (exemple: meta keywords améliore la position d'une page sur Yahoo!). |
| Prise en compte du "pli" | Le "pli" désigne la partie de l'écran à parti de laquelle il est nécessaire de scroller. Tout ce qui est au dessous du pli n'est pas visible pour l'internaute, à moins qu'il ne descende sur la page. Il faut donc mettre les informations importantes (incluant par exemple les call-to-action) avant le pli. |
Tests
| A effectuer | Description |
|---|---|
| Compatibilité entre navigateurs | Indispensable pour éviter que le site soit innavigable par certains utilisateurs, il faut que les pages soit consultable sur différents navigateurs (exemple: Firefox, internet explorer, Google chrome, Opera, Safari ...). Il faut également vérifier l'aspect du site sur différentes versions de ces navigateurs (surtout pour internet explorer).
Outil utile: browsershots.org permet de dévoiler l'aspect d'une page web sur plusieurs navigateurs. |
| Compatibilité écran (faible résolution) | Prendre en compte la largeur minimum du site. |
| Vitesse de chargement | Plus c'est rapide à ouvrir et mieux c'est. C'est un gage indispensable à ne surtout pas négliger. |
| Site "acceptable" sans Javascript, Flash ... | Test de l'aspect du site si le visiteur n'a pas le Javascript d'activer? Idem pour Flash, idem pour Java et idem pour toutes autres sortes de plugin. |
| Tests des applications | S'il y a des applications sur le site, ont-elles été testées? Ont-elles été testées sous différents angles, sous plusieurs ordinateurs différents? |
| Test du formulaire de recherche | Le test du formulaire de recherche consiste non seulement à vérifier qu'il est actif, mais également à tester la pertinence des résultats. |
| Test des formulaires (exemple: contact) | Source d'oublis régulière, il faut vérifier que les formulaires de contact envois bien le message à la bonne adresse email et que le message s'affiche convenablement dans le client mail. Les tests s'appliquent également aux éventuels formulaires de sondage. |
| Vérification des messages d'erreurs | Prendre en compte toutes les erreurs possibles et la façon dont elles sont annoncées aux visiteurs. Allant à la fois du formulaire remplis qu'à moitié, jusqu'aux gros bugs qui paralysent tout le site. |
Vérifications
| A effectuer | Description |
|---|---|
| Pas de liens erronés (internes ou externes) | Vérifier que tous les liens, à la fois internes et externes, soit opérationnel. |
| Bon design pour l'impression | Lorsque les pages sont imprimées, est-ce qu'il est possible de voir le contenu facilement? Pour bien optimiser cela, il faut veiller à utiliser une feuille de style CSS pour l'impression. |
| Validation W3C (xHTML) | Faire en sorte que les pages xHTML soit valide avec les recommandations du W3C.
Outil utile: validator W3C. |
| Validation W3C (CSS) | Faire en sort que les feuilles de style CSS soit valide avec les recommandations du W3C.
Outil utile: validator CSS du W3C. |
| Accessibilité | Ce point est très relatif mais représente l'état d'accessibilité du site. |
| Test d'usabilité | L'idéal pour un nouveau site web est de faire des tests d'usabilité pour être sûr que le site peut être utilisé sans trop de complexité. Pas besoin de faire des tests compliqués, parfois il suffit juste de faire des "tests amateurs" à partir de quelqu'un de "neutre". |
| Plus de contenu de test | Vérifier que les textes "lorem ipsum" et tout autre contenu utilisé pour les tests ne soit plus présent. |
| Logiciels bien paramétrés | Lors de l'utilisation d'un CMS ou d'un logiciel d'e-commerce, il faut vérifier que ceux-ci soit bien paramétré. Dans le cadre d'un site de vente en ligne, il faut être sûr qu'il est possible de passer une commande et de payer. |
Optimisations
| A effectuer | Description |
|---|---|
| Erreur 404 personnalisée | Indispensable, la page d'erreur 404 doit être personnalisée. Il faut que les visiteurs puisse retourner sur le site si la page à laquelle ils essaient d'accéder n'existe plus. |
| Compresser le CSS | La compression du CSS est souvent négligé, alors quelle permet de gagner un temps précieux lors du chargement des pages. |
| Compresser le Javascript | Le Javascript également doit être compressé. La compression ne change en rien le code, cela ne fait que réduire la taille du fichier Javascript.
Outil utile: Compresser le Javascript. |
| Système de cache | Très utile pour économiser les ressources serveurs et améliorer la rapidité d'affichage pour les visiteurs. |
| Système de sauvegarde | Mieux vaut être prévoyant et anticiper le pire. Il faut donc être prévoir un système de sauvegarde et être sûr qu'il est opérationnel. |
| Gzip | Simple à mettre en place, cela permet d'économiser un temps précieux lors de l'ouverture d'une page de votre site web. |
Sécurité
| A effectuer | Description |
|---|---|
| Test de sauvegarde | Il ne faut pas hésiter à tester le système de sauvegarde pour être sûr qu'il est opérationnel. |
| Sécuriser les pages admin | Faire en sorte que les pages administrateurs et toutes les pages sensibles soient convenablement protégées. |
| Monitoring du site web | Mise en place du système de monitoring du site web, qui indiquera lorsque le site web est down. |
Référencement
| A effectuer | Description |
|---|---|
| Redirection de exemple.fr à www.exemple.fr | Très simple à mettre en place, cette petite optimisation ne devrait pas être négligée.
Pour en savoir plus, consulter l'article: "éviter le duplicate content simple". |
| Redirection de exemple.fr/index.php à exemple.fr | Pour éviter les adresses ambigües cette petite optimisation devrait toujours être effectuée.
Pour en savoir plus, consulter l'article: "éviter le duplicate content simple". |
| Format des URLs | S'assurer que l'URL rewriting est en place et que les URL sont "esthétiques". Le mieux étant aussi de s'assurer que les adresses soient configurées tel un fil d'Ariane. |
| Sitemap.xml | Pas trop dur à réaliser, ce plan du site au format XML peut se révéler utile. |
| Robots.txt | Penser à mettre le fichier robots.txt avec tous les bon paramètres (exemple: interdire l'accès à certains dossiers, lien vers le sitemap.xml ...). |
| Ascreen.jpg | Cette petite image, placée à la racine du site, permet de donner un aperçu du site. Cela se révèle particulièrement utile lors de la soumission du site sur des annuaires. |
| Flux RSS | Le site a-t-il un flux RSS? Si oui, il faut s'assurer qu'il n'a pas d'erreur. |
| Mots-clés dans le contenu | Il est indispensable que les mots-clés important soit placé dans le contenu. Une petite vérification ne prend pas beaucoup de temps. |
| Texte alternatif pour les images | Très important pour le référencement et l'accessibilité, ce point ne devrait jamais être oublié. |
Inscriptions
| A effectuer | Description |
|---|---|
| Outil d'analyse (exemple: Google Analytics ou Xiti) | Il est important d'y penser pour avoir les statistiques des visiteurs dès les premiers jours du site. |
| Google Webmaster Tools | A ne pas oublier pour avoir un retour d'information qui s'avère très utile. |
| Google AdWords | Ce point est facultatif. |
| Régi publicitaire (exemple: Google ASense) | Ce point est facultatif. |
| Feedburner | Ce point est facultatif. Personnellement, je n'utilise pas feedburner. |
| Ce point est facultatif. Cela dépend si le site souhaite faire du SMO. | |
| Ce point est facultatif. Cela dépend si le site souhaite faire du SMO. | |
| Flickr | Ce point est facultatif. |
| Technorati | Ce point est facultatif. |
| MyBlogLog | Ce point est facultatif. |
| Delicious, Digg, Linkedin, Stumbleupon ... | Ce point est facultatif. |
Je rappel le lien pour télécharger la check-list au format pdf:
Pour information, cette liste se veut non-exhaustive. Elle dépend des points de vue des professionnels du web et peut être modifiée. Si certains d'entre vous ont des suggestions, profitez des commentaires pour m'en faire part. En tout les cas, j'espère que cette ressource vous sera utile.
Francine Morin - 
