Checklist avant de lancer un site web

Lors du lancement d'un site web, il y a de nombreuses choses à vérifier. Il y en a tellement que cela amène, malencontreusement, à oublier des points importants. Pour éviter de tels oublis, cet article propose une checklist au format pdf que vous pouvez facilement imprimer.

EDIT 2012: mise à jour de la liste pour inclure les nouveaux réseaux sociaux, CSS sprite, responsive design ...

Checklist pour site web

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?
Responsive design Créer d'un site qui s'adapte aux différent formats des largeurs d'écrans (grand écran, écran moyen, tablette, smartphone ...).
Version mobile S'assurer que le site s'affiche correctement sur un smartphone.

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 HTML 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".
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.

Sécurité

A effectuer Description
Système de sauvegarde Mieux vaut être prévoyant et anticiper le pire. Il faut donc prévoir un système de sauvegarde.
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.

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. Voir aussi le point concernant le responsive design.
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.
Site "acceptable" sans CSS3 Le CSS offre de nouveaux effets (ombre, coin arrondi ...). Un design identique sur les anciens navigateur n'est pas obligatoire, mais il faut s'assurer que le design se dégrade correctement sans ces effets visuels.
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 (HTML) Faire en sorte que les pages HTML soit valides avec les recommandations du W3C. Outil utile: validator W3C.
Validation W3C (CSS) Faire en sort que les feuilles de style CSS soit valides 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'utilisabilité L'idéal pour un nouveau site web est de faire des tests d'ergonomie 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.

Performance

Index sur la base de donnéesDans le cas d'un site créé à la main qui utilise une base de données (MySQL ou PostgreSQL), il faut veiller à bien utiliser les index.

A effectuer Description
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.
Rassembler les CSS Plus il y a de fichiers CSS et plus une page est longue à charger. Il faut rassembler les fichiers CSS dans un seul fichier pour optimiser le temps de chargement.
Rassembler les scripts Javascript Idem pour les fichiers Javascript.
CSS Sprite Idéal pour réduire le poids des images et limiter les requêtes HTTP. Il convient d'utiliser les sprites CSS pour les images du design.
Système de cache Très utile pour économiser les ressources serveurs et améliorer la rapidité d'affichage pour les visiteurs.
Gzip Simple à mettre en place, cela permet d'économiser un temps précieux lors de l'ouverture d'une page de votre site web.

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.
Balise meta description La balise meta description est souvent utilisé sur les snippets Google. Cela peut améliorer le taux de clic dans les pages de résultats de recherche de Google.
Open Graph Protocol Mettre en place les balise de l'Open Graph Protocol pour optimiser la façon dont Facebook va afficher les pages du site sur ces pages.
Prise en compte du "pli" Le "pli", aussi appelé "ligne de flottaison", 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.
Boutons des réseaux sociaux Pour améliorer la présence sociale, il faut penser à installer quelques uns des bouteaux des réseaux sociaux, tel que le bouton "like" de facebook, les boutons de Twitter, Google+, Linkedin, Pinterest ou encore Viadeo.

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é.
Index et follow Pendant le développement du site il est courant d'utiliser noindex et nofollow sur le site pour éviter qu'il soit indexé pendant la phase de conception. Avant la mise en production il faut veiller à retirer le noindex et nofollow.
Balise canonical Sur de nombreux sites, la balise canonical devient utile pour éviter les problèmes de duplicate content.

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.
Facebook Ce point est facultatif mais recommandé pour faire du SMO.
Twitter Ce point est facultatif. Cela dépend si le site souhaite faire du SMO.
Google+ Ce point est facultatif. Cela dépend si le site souhaite faire du SMO.
Pinterest Réseaux social qui prend beaucoup d'ampleur et très recommandé si vous avez de belles images.
Flickr Inscription recommandée si vous avez de belles images.
Feedburner Inscription facultative.
Linkedin, Viadeo, Tumblr, Stumbleupon, Digg ... Inscription facultative.

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. Cela dépend également du type de projet (blog, site vitrine ...). Si certains d'entre vous ont des suggestions, profitez des commentaires pour en faire part. En tout les cas, j'espère que cette ressource vous sera utile.

Commentaires

Salut Tony !

Je viens de tomber sur ta checklist de lancement de site et je voulais prendre un petit 30 secondes pour te remercier ! Franchement, c'est une superbe ressource. Je l'ai mise de côté dans mon catalogue de checklists utiles, et je n'hésiterai pas à la partager avec tous ceux qui en auront besoin !

Continue ton bon travail 🙂

A+

Mes Finances Perso - 4 août 2014 à 16h25

Merci Pour ce check list très riche : il faut revoir ceci ( Pour améliorer la présence sociale, il faut penser à installer quelques uns des (bouteaux) des réseaux sociaux) 😉

Silyweb - 4 décembre 2016 à 21h11

Leave a comment