fbpx

Checklist pour développeurs méticuleux

Au fil des années, le web n’a cessé de changer, d’évoluer – le plus souvent pour le meilleur – mais inévitablement aussi de se complexifier. À cet effet, que vous utilisiez un CMS (un gestionnaire de contenu à l’instar de WordPress ou Joomla), un site e-commerce (Prestashop ou Magento par exemple), ou que vous le développiez vous-même, un certain nombre de critères doivent être respectés.

Checklist dev front

La front-end checklist de David Dias

David Dias est un passionné très actif dans certaines communautés informatiques, dont celle qui concerne le web et ses standards ; ainsi, il a créé une checklist très complète des vérifications à mener sur son site pour en tirer un bénéfice maximal.

Si vous êtes aguerris aux technologies et au jargon du web, vous pouvez consulter le site mis en place à cette adresse (https://frontendchecklist.io/).

Sur le site, vous pouvez directement, sans inscription ni paiement, cocher les items au fil de vos vérifications. Les items sont ordonnés en 9 catégories qui figurent parmi les plus évidentes et importantes à vérifier.

Les catégories

Petit tour d’horizon des différentes catégories et de leur intérêt afin de vous aider à mieux cibler vos vérifications.

HEAD

Ce sont l’ensemble des balises dont doit disposer un site web pour être, d’une part aux nombres des navigateurs, et d’autre part facilement accepté et reconnu sur les réseaux sociaux. Pour les parties Facebook Open Graph et Twitter Card, rendez-vous sur ces liens pour obtenir plus d’informations. 

HTML

Ce sont les basiques d’un site et donc du HTML : avoir une page d’erreur 404 correcte, vérifier l’affichage de tous les éléments avec les bloqueurs de publicités, etc.

WEBFONTS

Il s’agit ici d’un ensemble de règles à respecter lorsque vous utilisez des typographies personnalisées sur votre site web. La solution la plus sûre reste d’utiliser, dans la mesure du possible, celles fournies par Google Fonts qui respectent les standards et vous prodiguent en même temps les conseils pour un ajout facilité.

CSS

Ce langage regroupe l’ensemble des marqueurs qui vont guider le navigateur pour afficher les éléments de votre site web. Taille de police, agencement des blocs, couleurs, tout est régi par ces fichiers. L’importance de ces fichiers leur confère aussi une attention toute particulière, des navigateurs différents ayant parfois des comportements différents pour un unique fichier.

JAVASCRIPT

Bien que son usage soit autrement différent du CSS, son importance l’est tout autant sinon plus. La section regroupe des règles liées à l’écriture pure des scripts, mais aussi à leur encapsulation dans un site en production (notamment en faisant attention à la taille des fichiers).

IMAGES

Ces précieuses ressources, si jolies soient-elles, peuvent se révéler être de vraies plaies pour vos temps de chargement, l’accessibilité aux personnes déficientes visuellement, ou simplement pour votre référencement. Le point « lazy-loading » est un point bonus, nous vous conseillons de l’appliquer uniquement si vous savez de quoi il en retourne car mal appliqué, vos images pourraient ne pas charger.

ACCESSIBILITY

Nous l’évoquions juste avant, ce point est primordial ; si vous avez la chance d’être valide, vous ne voyez peut-être pas l’intérêt de prime abord, mais les personnes déficientes ont recours à des logiciels spécifiques qui leur simplifient l’accès au web. Soyez sympa, aidez ces logiciels à faire leur travail en leur donnant des instructions précises. Et si vous ne le faites pas pour eux, faites-le pour votre référencement, Google et ses concurrents sont sensibles à cette question.

PERFORMANCE

Le poids des images ou des fichiers JavaScript sont des critères évoqués plus haut, mais d’autres entrent en ligne de compte. De la taille de vos cookies à la vérification des bibliothèques de code utilisées, des vérifications s’imposent. Et enfin, n’hésitez pas à suivre le conseil dans le dernier point de la catégorie en utilisant l’outil PageSpeed de Google.

SEO

Last, but not least! Pour la plupart des sites, le référencement dans les principaux moteurs de recherche est important. Les points évoqués constituent la toute petite base de ce que vous devez mettre en place, alors veillez à cocher ces cases-là.

Fastidieux ? Pas vraiment.

Même si cette liste peut effrayer de prime abord, elle est pourtant familière pour la plupart des développeurs web, et refaire un tour dessus avant une mise en production n’est jamais une mauvaise idée.

Le conseil de l’Agence

Si vous utilisez des outils comme WordPress, c’est à double-tranchant ; la mise en oeuvre de certains points sera facilitée, là où d’autres pourront être plus complexes à appliquer. N’hésitez pas à utiliser des plugins supplémentaires, en les sélectionnant par nombre d’utilisateurs et qualité des avis déposés.

Si vous avez recours à un prestataire, assurez-vous qu’il respecte bien tous ces points en lui présentant cette checklist comme étant votre standard.

Aller plus loin

L’outil fourni par David Dias est open-source et modifiable à votre guise, alors s’il y a des points que vous tenez à ajouter, ne vous privez pas, ça se passe sur Github.

Ah, et vous pouvez également lui poser une question ou simplement le remercier via son compte Twitter @daviddias.

Les articles récents

Inscrivez-vous à la newsletter !

Vous avez un projet ?

Parlons-en !

Share This