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.

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

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.