En travaillant sur mes contrats de sites web, je me suis rendu compte que j’aurais bien besoin d’une liste de choses à vérifier avant de remettre le projet final au client. J’avais envie de vous partager cette liste pour vous aider dans vos propres projets (et vous prouver que je travaille bien! hihi!!)

J’ai traduit librement de l’excellente source Smashing Magazine. Voyez l’article complet en anglais  par ici >>

*EDIT août 2016*
Cette liste n’est pas tout à fait complète mais peut vous donner de bonnes piste de choses à ne pas oublier. Surveillez mon blogue pour d’autres listes et conseils à venir!

————————–

While working on my website projects, I realised that I needed a checklist to see what needs to be verified and done before finishing and launching the site to my clients. I wanted to share this list with you to help you in your own projects (and prove you that I work well! hihi!!)

I liberally translated in french an article from Smashing Magazine. See the full text in english here >>

 

 

 1 : Revérifiez TOUT!

Relisez

  • Lisez tout. Même si vous avez déjà lu, relisez-le. Demandez à quelqu’un d’autre de le lire. Vous trouverez toujours quelque chose qui doit être modifié.
  • Voyez si vous pouvez réduire la quantité de texte en le gardant conçi. Cassez les blocs de texte volumineux en paragraphes plus courts.
  • Ajoutez des titres clairs tout au long, et utilisez des listes de sorte que les utilisateurs peuvent “scanner” et lire en diagonale facilement.
  • N’oubliez pas de texte dynamique aussi, comme les boîtes d’alerte.

Liens

  • Ne supposez pas que tous vos liens fonctionnent. Cliquez dessus pour voir où ils mènent vraiment. Vous pouvez souvent oublier d’ajouter “http://” pour des liens vers des sites externes.
  • Assurez-vous de mettre un lien vers la page d’accueil sur le logo de l’en-tête, une convention commune.
  • Aussi, pensez à la façon dont vos liens fonctionnent. Est-il évident pour les nouveaux utilisateurs qu’ils sont des liens? Ils doivent se démarquer du reste du texte sur la page.
  • Ne pas souligner un texte qui n’est pas un lien, car ca peut dérouter les utilisateurs.
  • Et qu’arrive-t-il aux liens visités?

Voici une ressource pour vérifier vos liens automatiquement:  http://validator.w3.org/checklink

Vérifiez le fonctionnement

  • Tout tester à fond. Si vous avez un formulaire de contact, essayez-le et envoyez-vous une copie afin que vous puissiez voir ce qui en sort.
  • Demandez à d’autres de tester votre site web, et pas seulement la famille et les amis, mais le marché cible du site.
  • Asseyez-vous et regardez comment un utilisateur utilise le site. C’est fou ce que vous allez apprendre lorsque vous verrez d’autres gens utiliser votre site différemment que de la façon dont vous supposez qu’ils l’auraient fait.
  • Les choses communes à vérifier sont les formulaires de contact, les fonctions de recherche, le panier d’achat et les fonctions de log-in.

Un outil pour vérifier le fonctionnement de vos formulaires: http://silverbackapp.com/

 

2 : Titres et META DATA

Votre titre de page est l’élément le plus important pour le référencement et est également importante afin que les utilisateurs sachent ce qu’il y a sur la page.
Ce titre est ce qui apparaîtra dans l’onglet ou le haut de la fenêtre où l’utilisateur se trouve. Assurez-vous donc qu’il change à chaque page et porte sur le contenu de cette page.
Ex. :

<title>Design web graphique logo t-shirts infographie</title>

 

Les “Meta descriptions” et les balises de mots clés ne sont pas aussi importants pour le référencement que ca l’était il y a déjà quelques années (pour les principaux moteurs de recherche du moins), mais c’est toujours une bonne idée de les inclure. Modifiez la description de chaque page pour faire le lien avec le contenu de cette page, parce que c’est souvent ce que Google affiche dans sa description des résultats de recherche. Si vous ne mettez rien, Google ira chercher les premières lignes de texte de la page, ce qui n’est pas toujours représentatif du contenu général.
Ex. :

<meta name="description" content="Design graphique et web sur mesure ou en forfait, 
selon vos besoins et votre budget! Produits et services pour tous vos besoins graphiques, 
de l'idéation à la finition, en passant par la création et la production! Réalisation de 
documents imprimés de toute sorte, la conception de logo et d'image corporative complète 
et la gestion de l'impression de ces documents ainsi que la conception et réalisation de site web">

3: La validation

Une fois que votre site est tout codé et intégré, il faut vérifier s’il est conforme aux normes du W3C. Vous devriez toujours viser pour un site 100% valide. Cela dit, ce n’est pas la fin du monde si votre site ne l’est pas, mais il est important de connaître les raisons pour lesquelles il n’est pas conforme, de sorte que vous pourrez corriger les erreurs désagréables. Les pièges communs sont le “alt”, le manque de balises de fermeture et d’utiliser “&” au lieu de ” &amp; ” pour les esperluettes.

Pour vérifier votre site: http://validator.w3.org/

 

4: Les statistiques

Installer un outil d’analyse est important pour mesurer les statistiques afin de voir comment votre site performe (nombre de visites et s’il atteint la clientèle cible) et si vos taux de conversion sont bons (visites VS clients réels). Suivez les visites uniques au quotidien, les pages vues mensuellement et les statistiques des navigateurs des utilisateurs; toutes des données utiles à connaître dès le jour 1. Google Analytics est l’outil gratuit favori parmi les propriétaires de site Web. D’autres sont à prendre en considération : Clicky, Kissmetrics (encore en version bêta fermée), Mint et StatCounter.

 

5: Un plan de votre site (“site map”)

L’ajout d’un fichier sitemap.xml à la racine de votre répertoire permet aux moteurs de recherche d’indexer votre site web facilement. Le fichier mène les robots chercheurs à toutes les pages de votre site. XML Sitemaps crée automatiquement un fichier sitemap.xml pour vous. Après avoir créé le fichier, téléchargez-le dans votre répertoire racine, afin que son emplacement ressemble à ” www.mydomain.com / sitemap.xml. ”

Si vous utilisez WordPress, installer le plug-in Google Sitemaps XML, ce qui met automatiquement à jour le plan du site lorsque vous écrivez de nouveaux billets. Aussi, ajoutez votre site et sitemap à Google Webmaster Tools. Ceci indique à Google que vous avez un plan du site, et le service fournit des statistiques utiles sur comment et quand votre site a été indexé pour la dernière fois.

 

6: Un design sécuritaire

L’élément de design le plus souvent négligé est la “page 404” : Si un utilisateur demande une page qui n’existe pas, votre page d’erreur 404 s’affiche. Cela peut se produire pour une variété de raisons, y compris un site externe ayant un lien vers une de vos pages qui n’existe pas.
Ramenez vos utilisateurs sur la bonne voie en proposant une page d’erreur 404 utile (et agréable) qui les dirige vers la page d’accueil ou suggérez-lui d’autres pages qui pourraient l’intéresser.

Quelques inspirations compilées par Smashing Magazine >> “Some starting points” – “Reloaded

Une autre technique de conception sécuritaire est la vérification de vos formulaires de validation. Essayez de soumettre des informations inhabituelles dans vos champs de formulaire (par exemple, beaucoup de caractères, des lettres dans les champs numériques, etc) et assurez-vous que s’il ya une erreur, l’utilisateur obtient des commentaires pertinents pour être en mesure de réparer ses erreurs.

 

7: Créer une feuille de style pour l’impression

Si un utilisateur veut imprimer une page de votre site, il ya des chances qu’il ou elle ne veuille que le contenu principal et non la navigation ou les éléments de conception supplémentaires. C’est pourquoi c’est une bonne idée de créer une feuille de style spécifique pour l’impression. En outre, certains éléments CSS, telles que les “float”, ne sortent pas bien à l’impression.
Pour pointer vers une feuille de style CSS spéciale que les ordinateurs utiliseront automatiquement lorsque les utilisateurs impriment une page, il suffit d’inclure le code suivant entre vos balises <head>.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Quelques trucs:
 http://coding.smashingmagazine.com/2007/02/21/printing-the-web-solutions-and-techniques/
http://alistapart.com/article/goingtoprint

 

En terminant, je vous donne quelques autres références, au cas où vous auriez besoin d’encore plus d’aide:

Une “checklist” (avec des cases à cocher et tout!) en anglais, très précise. À télécharger et imprimer! http://www.boxuk.com/upload/website_launch_checklist_v1.pdf

Une liste plus axée sur le design accessible, les standards et comment rendre un site ergonomique en général http://www.uxbooth.com/articles/quick-usability-checklist/

 

Je vous avoue que je ne fais pas toutes ces étapes… Certaines ne sont pas nécessaire pour tous les types de projets. Mais je comptes bien tout vérifier dans mes prochains sites!!