Skip to content

ynizon/Front-End-Checklist

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

228 Commits

CNAME

CNAME

 
 

CODE_OF_CONDUCT.md

CODE_OF_CONDUCT.md

 
 

LICENSE

LICENSE

 
 

README.md

README.md

 
 

_config.yml

_config.yml

 
 

Repository files navigation


Front-End Checklist

Front-End Checklist [traduction FR]

La Checklist Front-End est une liste exhaustive de tous les élements dont vous avez besoin avant de lancer votre site HTML en production.

PRs Welcome Gitpod Ready-to-Code Contributors Spectrum Front‑End_Checklist followed CC0

Comment utiliser • Contribuer • Site Web [EN] • Product Hunt

Autres Checklists:
🎮 Front-End Performance Checklist [EN] • 💎 Front-End Design Checklist [EN]

Celle-ci est basée sur des années d'experience de développeurs Front-End, en y ajoutant divers checklists de projets open-source.

Table des matières

  1. Head
  2. HTML
  3. Webfonts
  4. CSS
  5. Images
  6. JavaScript
  7. Securité
  8. Performance
  9. Accessibilité
  10. SEO
  11. Traductions

Comment l'utiliser ?

Tous les élements de la Front-End Checklist sont requis dans la majorité de vos projets, mais certains peuvent être omis ou ne sont pas essentiels (par exemple, dans le cas d'une application d'administration, vous n'avez pas besoin de flux RSS). Nous avons choisi d'utiliser 3 niveaux de flexibilité:

  • Bas signifie que l'élement est recommandé mais peut être omis dans certaines situations.
  • Moyen signifie que l'élement est hautement recommandé et peut éventuellement être omis dans certains cas particuliers. Certains élements, s'ils sont omis, peuvent avoir des mauvais effets secondaires en terme de performance ou de référencement (SEO).
  • Haut signifie que l'élement est indispensable. Vous pouvez provoquer des dysfonctionnements dans votre page, ou avoir des problèmes d'accessibilité, voir de SEO. La priorité des tests doit d'abord s'assurer de ces éléments en premier.

Plusieurs resources possèdent un emoticon pour vous aider à comprendre quel type de contenu il s'agit :

  • 📖: documentation ou article
  • 🛠: outil online / outil de test
  • 📹: media ou contenu vidéo

Head

Notes: Vous pouvez trouver une liste de toute les balises qui peuvent être trouvées dans la section <head> d'un document HTML.

Meta tag

  • Doctype: Haut Le Doctype en HTML5 doit être en haut de toutes vos pages HTML.
<!-- Doctype HTML5 -->
<!doctype html>

Les prochains 2 meta tags (Charset et Viewport) doivent venir en premier dans le head.

  • Charset: Haut Le charset (UTF-8) est correctement declaré.
<!-- Set character encoding for the document -->
<meta charset="utf-8">
  • Viewport: Haut Le viewport est correctement déclaré.
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  • Title: Haut Un titre est utilisé sur chaque page (SEO: Google calcule la largeur des pixels de chaque caractères utilisés dans le titre, et coupe entre 472 et 482 pixels. La limite moyenne de caractères se situe autour des 55).
<!-- Document Title -->
<title>Page Title less than 55 characters</title>
  • Description: Haut Une meta description est fournie, elle est unique et ne contient pas plus de 150 caractères.
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">
  • Favicons: Moyen Chaque favicon a été créé et s'affiche correctement. Si vous avez un favicon.ico, posez le à la racine de votre site. Normalement vous n'avez pas besoin d'utiliser de balise. Cependant, cela reste une bonne pratique de le relier comme dans l'exemple ci-dessous. Aujourd'hui, Le PNG est recommandé en remplacement du format .ico (dimensions: 32x32px).
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Recommended favicon format -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
  • Apple Web App Meta: Bas Les meta-tags spécifiques à Apple sont présents.*
<!-- Apple Touch Icon (at least 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">

<!-- To run web application in full-screen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Status Bar Style (see Supported Meta Tags below for available values) -->
<!-- Has no effect unless you have the previous meta tag -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
  • Windows Tiles:Bas Les tuiles Windows sont présentes et liées.
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />

Le balisage xml minimum requis pour le balisage du fichier browserconfig.xml doit être:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
   <msapplication>
     <tile>
        <square70x70logo src="small.png"/>
        <square150x150logo src="medium.png"/>
        <wide310x150logo src="wide.png"/>
        <square310x310logo src="large.png"/>
     </tile>
   </msapplication>
</browserconfig>
  • Canonical: Moyen Utiliser rel="canonical" pour éviter le contenu dupliqué.
<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

HTML tags

  • Language attribute: Haute L'attribut lang de votre site est spécifié et indique le langage de la page courante.
<html lang="fr">
  • L'attribut direction : Moyen Le sens de lecture est specifié dans le tag html (Il peut être indiqué dans un autre élément HTML).
<html dir="rtl">
  • Alternate language: Low Un lien vers la traduction de la page courante est spécifié.
<link rel="alternate" href="https://es.example.com/" hreflang="es">
  • x-default: Low Balise de langage pour les pages d'accueil internationnalisées.
<link rel="alternate" href="https://example.com/" hreflang="x-default" />
  • Commentaire conditionel: Low Les commentaires conditionnels sont présents pour IE si besoin.

  • Flux RSS: Bas Si votre projet est un blog ou possède des articles, un flux RSS est fourni.

  • Inline critical CSS: Moyen Les CSS des contenus qui doivent être immédiatement visibles pendant le chargement ("au dessus de la ligne de flottaison") sont appelés "CSS critiques". Ils sont inclus avant le CSS principal et entre les balises <style></style> dans une seule ligne (en étant minifié).

  • Ordre des CSS : Haute Tous les fichiers CSS sont chargés avant n'importe quel fichier JavaScript dans la section <head>. (Parfois certains fichiers JS sont chargés en asynchrone en haut de page, et font donc exception à la règle).

Social meta

Visualisez et générez automatiquement vos meta pour réseaux sociaux avec Meta Tags

Facebook OG et Twitter Cards sont pour tous les sites, hautement recommandés. Les autres tags de média sociaux peuvent être utiles si vous ciblez une audience particulère et que vous voulez vous assurer un affichage particulier.

  • Facebook Open Graph: Low Tous les Open Graph Facebook (OG) sont testés et aucun ne manque ou contient de fausses informations. Les images doivent être au minimum de 600 x 315 pixels, mais 1200 x 630 pixels est recommandé.

Notes: L'utilisation des balises og:image:width et og:image:height qui spécifient les dimensions des images au crawler permettent le rendu des images immédiatement sans avoir besoin de les redimensionner avec un système asynchrone.

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- Next tags are optional but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
  • Twitter Card: Low
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

⬆ Retour en haut

HTML

Bonnes pratiques

  • HTML5 Semantic Elements: Haut Les élements sémantiques HTML5 ont une utilisation spécifique (header, section, footer, main...).

  • Error pages: Haut Les pages d'erreurs 404 et 5xx existent. Rappelez vous que les pages d'erreurs 5xx ont besoin de CSS intégrés (pas d'appel externe au serveur courant).

  • Noopener: Moyen Dans le cas ou vous utilisez des liens externes avec target="_blank", votre lien devrait avoir l'attribut rel="noopener" pour prévenir du tab nabbing (piratage par onglet). Si vous devez supporter les anciennes versions de Firefox, utiliser alors rel="noopener noreferrer".

  • Nettoyage de commentaires: Bas Le code non nécessaire doit être supprimé avant l'envoi en production.

HTML testing

  • W3C compliant: Haut Toutes les pages doivent avoir passé la validation W3C pour identifier de possibles problèmes dans le code HTML.
  • HTML Lint: Haut Utiliser ces outils pour vous aider à analyser des problèmes que vous auriez dans votre code HTML.
  • Link checker: Haut Vérification qu'il n'y ai pas de liens brisés (pages 404).
  • Adblockers test: Moyen Votre site doit affiché un contenu correct malgré la présence d'adblocker (Vous pouvez fournir un message pour encourager les gens à les désactiver).

⬆ Retour en haut

Webfonts

Notes: Utiliser les webfonts peut causer des problèmes de textes invisibles/non stylisés le temps du chargement de la fonte - envisager d'avoir des polices de secours et / ou d'utiliser des chargeurs webfont pour contrôler le comportement.

  • Webfont format: Haut WOFF, WOFF2 et TTF sont tous supportés par les navigateurs modernes.

  • Webfont size: Haut La taille des Webfonts ne doit pas excéder 100 Ko gzipé (toutes les variantes incluses).

  • Webfont loader: Bas Controler le comportement du chargement avec un loader de webfont.

⬆ retour en haut

CSS

Notes: Regardez les guidelines CSS (en) et les Guidelines Sass (en) suivis par de nombreux développeurs Front-End. Si vous avez des doutes sur des propriétés CSS, vous pouvez visiter la Reference CSS (en). Il y a aussi ce court Guide pour la cohérence.

  • Responsive Web Design: Haut Le site utilise un design responsive.
  • CSS Print: Moyen Une feuille d'impression CSS est incluse et permet une impression correcte sur chacune des pages.
  • Preprocessors: Bas L'utilisation d'un preprocessor CSS (Sass, Less ou Stylus) est conseillée).
  • Unique ID: Haut Si des IDs sont utilisés, ils sont uniques sur chaque page.
  • Reset CSS: Haut Un CSS reset (reset, normalize ou reboot) est utilisé et mis à jour. (Si vous utiliser un Framework CSS comme Bootstrap ou Foundation, une feuille Normalize est déjà incluse.)
  • JS prefix: Bas Toutes les classes (ou les IDs) utilisés dans les fichiers JavaScript commencent par js- et ne sont pas stylés dans les fichiers CSS.
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">
  • Embedded ou inline CSS: Haut Tous les CSS embarqués dans des balises <style> ou utilisant le CSS en ligne (attribut style) le sont uniquement pour de bonnes raisons (background-image pour des sliders, ou CSS critiques).
  • Vendor prefixes: Haut les préfixes CSS sont utilisés et générés en fonction des navigateurs que vous ciblez.

Performance

  • Concatenation: Haut Les fichiers CSS sont concatenés dans un fichier unique. (Pas besoin pour HTTP/2)
  • Minification: Haut Les fichiers CSS sont minifiés.
  • Non-blocking: Moyen Les fichiers CSS ne doivent pas être bloquants pour que le DOM puisse se charger rapidement.
  • CSS non utilisés: Bas Supprimer les CSS inutilisés.

CSS testing

  • Stylelint: Haut Tous les fichiers CSS ou SCSS ne doivent pas avoir une seule erreur.

  • Responsive web design: Haut Toutes les pages ont étés testées sur les résolutions suivantes: 320px, 768px, 1024px (peut être plus / d'autres en fonction de vos statistiques de visites).

  • CSS Validator: Moyen Le CSS a été testé et il n'y a aucune erreur.

  • Desktop Browsers: Haut Toutes les pages ont étés testées sur différents navigateurs (Safari, Firefox, Chrome, Internet Explorer, EDGE...).
  • Mobile Browsers: Haut Toutes les pages ont étés testées sur différents navigateurs mobiles (Native browser, Chrome, Safari...).
  • OS: Haut Toutes les pages ont étés testées sur différents OS (Windows, Android, iOS, Mac...).
  • Pixel perfect: Haut Les pages collent parfaitement au pixel près aux maquettes. Cela dépend de la qualité qu'on vous a fourni. Vous ne pourrez pas forcément avoir 100% en précision, mais cela doit ressembler le plus possible.

Pixel Perfect - Chrome Extension

  • Reading direction: Haut Les pages ont étés testées dans les 2 sens de lecture si les 2 sont supportés (gauche à droite et droite à gauche).

⬆ retour en haut

Images

Notes: Pour une complète compréhension de l'optimisation des images, lisez ce livre gratuit Essential Image Optimization (en) d'Addy Osmani.

Bonnes pratiques

  • Optimisation: HautToutes les images sont optimisées pour un rendu sur navigateur. Le format WebP peut être utilisé pour des pages critiques (comme la page d'accueil).
  • 🛠 Imagemin (en)
  • 🛠 Utiliser ImageOptim (en) pour optimiser gratuitement vos images.
  • 🛠 Utiliser KeyCDN Image Processing (en) pour optimiser les images en temps réel.
  • 🛠 Utiliser Kraken.io (en) une alternative incroyable pour des optimisations sur des png et des jpg. Jusqu'à 1 Mb en version gratuite.
  • 🛠 TinyPNG (en) optimise les PNG, PNG animés ey jpg sans perte. Il existe des intégrations gratuites et payantes.
  • 🛠 ZorroSVG (en) PNG transparents pour le poids d'un JPG grace à l'utilisation de masking svg.
  • 🛠 SVGO (en) outils basé sur Node.js pour optimiser les SVG.
  • 🛠 SVGOMG interface graphique web pour utiliser SVGO directement depuis le web.
  • Picture/Srcset: Moyen Vous pouvez utiliser des éléments HTML picture / l'attribut srcset pour fournir l'image la plus appropriée à la résolution de l'utilisateur.
  • Retina: Bas Vous fournissez des layout d'images 2x or 3x, pour l'affichage sur un support retina.
  • Sprite: Moyen Les petites images sont dans un seul fichier sprite (dans le cas d'icones, elles peuvent être dans un sprite d'image SVG).
  • Width and Height: Haut Ajouter les attributs width et height sur la balise <img> si la taille est connue (peut être omis pour le dimensionnement par CSS).
  • Text alternatif: Haut Toute les balises <img> ont un texte alternatif qui décrit l'image visuellement.
  • Lazy loading: Medium Les images sont chargées au fur et à mesure (Un noscript fallback est toujours fourni).

⬆ retour en haut

JavaScript

Bonnes pratiques

  • JavaScript Inline: Haute Vous n'avez aucun code javascript inline (contenu dans votre code HTML).
  • Concatenation: Haute Les fichiers JavaScript sont concatenés.
  • Minification: Haute Les fichiers JavaScript sont minifiés (vous pouvez ajouiter le suffixe .min).
  • Securité JavaScript:
  • noscript tag: Medium Utiliser l'élément <noscript> dans le body HTML dans le cas d'un script non supporté ou si le JS est désactivé dans le navigateur. Cela peut s'avérer utile dans le cas de Single Page Applications basés sur React par exemple, voir ces exemples.
<noscript>
  Vous devez activer JavaScript pour pouvoir utiliser ce site internet.
</noscript>
  • Non-blocking: Moyen Les fichiers JavaScript sont chargés en asynchrone avec async ou avec l'utilisation de l'attribut defer.
  • Optimized and updated JS libraries: Medium Toutes les librairies JavaScripts utilisées dans votre projets le sont par nécessité (préférer du Vanilla JS pour des fonctionnalités simples), à jour de leurs dernières versions et ne surchargent pas votre JavaScript de méthodes inutiles.
  • Modernizr: Bas Si vous avez besoin de fonctionnalités spécifiques, vous pouvez utiliser un Modernizr personnalisé pour ajouter les classes au tag <html>.

Tester le JavaScript

  • ESLint: Haut Pas d'erreurs détéctés par ESLint (basé sur votre configuration ou sur les règles standards).

⬆ retour en haut

Securité

Scan et vérification de votre site web

Bonnes pratiques

  • HTTPS: Moyen HTTPS est utilisé sur chaque page et sur tous vos contenus externes (plugins, images...).
  • HTTP Strict Transport Security (HSTS): Moyen L'entête HTTP est définie à 'Strict-Transport-Security'.
  • Cross Site Request Forgery (CSRF): High Vous êtes sure que vos requêtes faites coté serveur sont légitimes et proviennent de votre site / app pour éviter les attaques CSRF.
  • Cross Site Scripting (XSS): High Votre page ou site est dégagé des problèmes XSS possibles.
  • Content Type Options Moyen Empêcher Google Chrome et Internet Explorer d'essayer de mime-sniff le type de contenu d'une réponse différente de celle déclarée par le serveur.
  • X-Frame-Options (XFO) Moyen Protéger vos visiteurs contre les attaques par clickjacking.
  • Content Security Policy Moyen Definir comment le contenu est chargé sur votre site et d'où il est autorisé à être chargé. Cela peut aussi vous permettre de vous protéger des attaques par clickjacking.

⬆ retour en haut

Performance

Bonnes pratiques

  • Objectifs à atteindre: Medium Vos pages doivents atteindre ces objectifs :
    • First Meaningful Paint en moins d'1 seconde
    • Time To Interactive en dessous de 5 secondes pour la configuration "moyenne" (Android a 200€ sur un réseau 3G avec un RTT (round-trip time) de 400ms et 400kbps de bande passante) et en dessous de 2 secondes pour les visites suivantes
    • Taille totale des fichiers critiques en dessous de 170Kb gzippé
  • Minified: Moyen Votre HTML est minifié.

  • Lazy loading: Moyen Images, scripts et CSS doivent être chargé en lazy loading pour améliorer le temps de réponse (Voir les details dans une autre section).

  • Cookie size: Si vous utilisez des cookies, assurez vous que chaque cookie ne dépasse pas 4096 octets et qu'il n'y en ai pas plus de 20 pour votre nom de domaine.

  • Composants tiers: Moyen Les éléments tiers comme les iframes ou les composants basés sur des JS externes (comme les boutons de partage) sont remplacés par des composants statiques quand c'est possible, pour limiter les appels aux APIs externes et préservez l'activité de vos visiteurs confidentielle.

Préparer les requêtes à venir

  • DNS resolution: Bas Les composants tiers chargés depuis des DNS sont résolus à l'avance pendant les temps morts en utilisant dns-prefetch.
<link rel="dns-prefetch" href="https://example.com">
  • Preconnection: Bas DNS lookup, TCP handshake et la neéociation TLS avec services permettent de gagner du temps en utilisant preconnect.
<link rel="preconnect" href="https://example.com">
  • Prefetching: Low Les ressources qui seront chargées bientôt dans la page (généralement les images en lazy loading) sont requêtées à l'avance durant les temps morts en utilisant prefetch.
<link rel="prefetch" href="image.png">
  • Preloading: Low Les resources nécessaires à la page courante (ex: scripts placés en bas du tag <body>) sont chargés en avance avec preload.
<link rel="preload" href="app.js">

Tester la Performance

  • Google PageSpeed: Haut Toutes vos pages ont étés testées (pas seulement la page d'accueil) et ont un score au moins de 90/100.

⬆ retour en haut

Accessibilité

Notes: Vous pouvez regader la playlist A11ycasts with Rob Dodson (en) 📹

Bonnes pratiques

  • Progressive enhancement: Moyen Les fonctionnalités importantes comme la navigation et la recherche doivent pouvoir fonctionner avec le JavaScript désactivé.
  • Contraste des couleurs: Moyen Le contraste des couleurs doit être au pire WCAG AA (AAA pour le mobile).

Headings

  • H1: Haut Toutes les pages ont un H1 qui n'est pas le titre du site.
  • Headings: Haut Les balises Hn doivent être correctement utilisées et dans le bon ordre (H1 à H6).

Sémantique

  • Specific HTML5 input types are used: Moyen C'est assez important pour les périphériques mobiles de personnaliser les keypads et autres widgets pour améliorer l'ergonomie.

Formulaire

  • Label: Haut Un label est associé avec chaque élement de formulaire. Dans le cas ou un label ne peut être affiché, utiliser aria-label à la place.

Tester l'accessibilité

  • Test des standards d'accessibilité: High Utiliser l'outil WAVE pour vous assurer de respecter les standards d'accessibilité.
  • Navigation par clavier: Haut Tester votre site en utilisant uniquement votre clavier dans un ordre prévisible. Tous les élements doivent être accessibles et utilisables.
  • Screen-reader: Medium Toutes les pages ont étés testées dans un outil de lecture d'écran (VoiceOver, ChromeVox, NVDA or Lynx).
  • Focus style: High Si le focus est désactivé, il est remplacé par un état visible en CSS.

⬆ retour en haut

SEO

  • Google Analytics: Haut Google Analytics est installé et correctement configuré.
  • Headings logic: Moyen Le texte d'entête aide à comprendre le contenu de la page courante.
  • sitemap.xml: Haut Un sitemap.xml existe et a été envoyé à Google Search Console (historiquement Google Webmaster Tools).
  • robots.txt: Haut Le robots.txt ne bloque pas l'indexation des pages.
  • Structured Data: Haut Les pages utilisant des données structurées ont étés testés et n'ont pas d'erreurs. Les données structurées aident les crawlers à comprendre le contenu de votre page.
  • Sitemap HTML: Moyen Un sitemap HTML est fourni et accessible via un lien dans le pied de page de votre site.
  • Pagination link tags: Medium Ajoutez rel="prev" et rel="next" pour indiquer le contenu paginé.
<!-- Example: Pagination link tags for page 2 of a paginated list -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">

⬆ retour en haut

Traduction

La Checklist Front-End est aussi disponible dans d'autres langues. Merci aux traducteurs et à leur travail !

Le badge Front-End Checklist

Si vous voulez montrer que vous suivez les règles de la Checklist Front-End, posez ce badge sur votre fichier README!

➔ Front‑End_Checklist followed

[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)

⬆ retour en haut

Contribuer

Ouvrez une demande de correction ou de suggestion pour faire une modification ou un ajout.

Contributeurs

Voici la liste des contributeurs sur le repo officiel Anglais.

contributeurs.

Support

Si vous avez des questions ou des suggestions, n'hesitez pas à interpeller l'auteur original (en Anglais) sur Gitter ou Twitter:

Auteur original

David Dias

Contributeurs

Ce projet existe grâce à toutes les personnes qui y contribuent. [Contribuer].

Backers

Merci à tous les backers! 🙏 [Devenir un backer]

Sponsors

Supportez ce projet en devenant un sponsor. Votre logo sera affiché ici avec un lien vers votre site web. [Devenir un sponsor]

License

CC0

⬆ Retour en haut

About

🗂 La checklist exhaustive des développeurs méticuleux pour la mise en place de sites.

frontendchecklist.com

Resources

Readme

License

CC0-1.0 license

Code of conduct

Code of conduct
Activity

Stars

83 stars

Watchers

6 watching

Forks

13 forks
Report repository

Releases

No releases published

Packages

No packages published