Awesome

<h1 align="center"> <br> <img src="https://raw.githubusercontent.com/thedaviddias/Front-End-Checklist/master/data/images/logo-front-end-checklist.jpg" alt="Front-End Checklist" width="170"> <br> <br> Front-End Checklist [traduction FR] <br> </h1> <h4 align="center">La Checklist Front-End est une liste exhaustive de tous les élements dont vous avez besoin avant de lancer votre site HTML en production.</h4> <p align="center"> <a href="http://makeapullrequest.com"> <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome"> </a> <a href="https://gitpod.io/#https://github.com/thedaviddias/Front-End-Checklist"> <img src="https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod" alt="Gitpod Ready-to-Code"> </a> <a href="https://github.com/thedaviddias/Front-End-Checklist/graphs/contributors"> <img src="https://img.shields.io/github/contributors/thedaviddias/Front-End-Checklist.svg?style=flat-square" alt="Contributors"> </a> <a href="https://spectrum.chat/front-end-checklist"> <img src="https://img.shields.io/badge/chat-on_spectrum-4837E2.svg?style=flat-square" alt="Spectrum"> </a> <a href="https://github.com/thedaviddias/Front-End-Checklist/"> <img src="https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg?style=flat-square" alt="Front‑End_Checklist followed"> </a> <a href="https://creativecommons.org/publicdomain/zero/1.0/"> <img src="https://img.shields.io/badge/license-CC0-green.svg?style=flat-square" alt="CC0"> </a> </p> <p align="center"> <a href="#comment-lutiliser">Comment utiliser</a> • <a href="#contribuer">Contribuer</a> • <a href="https://frontendchecklist.io">Site Web [EN]</a> • <a href="https://www.producthunt.com/posts/front-end-checklist">Product Hunt</a> </p> <p align="center"> <span>Autres Checklists:</span> <br> <a href="https://github.com/thedaviddias/Front-End-Performance-Checklist#---------front-end-performance-checklist-">🎮 Front-End Performance Checklist [EN]</a> • <a href="https://github.com/thedaviddias/Front-End-Design-Checklist#front-end-design-checklist">💎 Front-End Design Checklist [EN]</a> </p>

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

Head
HTML
Webfonts
CSS
Images
JavaScript
Securité
Performance
Accessibilité
SEO
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é:

signifie que l'élement est recommandé mais peut être omis dans certaines situations.
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).
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: Le Doctype en HTML5 doit être en haut de toutes vos pages HTML.

<!-- Doctype HTML5 -->
<!doctype html>

📖 Determiner l'encodage - HTML5 W3C (en)

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

Charset: Le charset (UTF-8) est correctement declaré.

<!-- Set character encoding for the document -->
<meta charset="utf-8">

Viewport: 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: 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>

📖 Title - HTML - MDN

🛠 SERP Snippet Generator (en)

Description: 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">

📖Meta Description - HTML - MDN

Favicons: 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">

🛠 Favicon Generator (en)

🛠 RealFaviconGenerator (en)

📖 Favicon Cheat Sheet (en)

📖 Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? - CSS Tricks (en)

📖 PNG favicons - caniuse (en)

Apple Web App Meta: 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">

📖 Configurer des Web Applications (en)

📖 Supported Meta Tags (en)

Windows Tiles: 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>

📖 Browser configuration schema reference (en)

Canonical: 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">

📖 Use canonical URLs - Search Console Help - Google Support (en)

📖 5 common mistakes with rel=canonical - Google Webmaster Blog (en)

HTML tags

Language attribute: L'attribut lang de votre site est spécifié et indique le langage de la page courante.

<html lang="fr">

L'attribut direction : Le sens de lecture est specifié dans le tag html (Il peut être indiqué dans un autre élément HTML).

<html dir="rtl">

📖 dir - HTML - MDN

Alternate language: Un lien vers la traduction de la page courante est spécifié.

<link rel="alternate" href="https://es.example.com/" hreflang="es">

x-default: Balise de langage pour les pages d'accueil internationnalisées.

<link rel="alternate" href="https://example.com/" hreflang="x-default" />

📖 x-default - Google (en)

Commentaire conditionel: Les commentaires conditionnels sont présents pour IE si besoin.

📖 About conditional comments (Internet Explorer) - MSDN - Microsoft (en)

Flux RSS: Si votre projet est un blog ou possède des articles, un flux RSS est fourni.
Inline critical CSS: 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é).

🛠 Critical by Addy Osmani on GitHub (en) automatise cela.

Ordre des CSS : 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: 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">

📖 Guide du partage pour les Webmasters

📖 Bonnes pratiques du partage

🛠 Tester votre page avec Facebook OG testing (en)

Twitter Card:

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

📖 Getting started with cards — Twitter Developers (en)

🛠 Tester votre page avec Twitter card validator

⬆ Retour en haut

HTML

Bonnes pratiques

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

📖 HTML Reference (en)

Error pages: 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: 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".

📖 A propos de rel=noopener (en)

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

HTML testing

W3C compliant: Toutes les pages doivent avoir passé la validation W3C pour identifier de possibles problèmes dans le code HTML.

🛠 W3C validator

HTML Lint: Utiliser ces outils pour vous aider à analyser des problèmes que vous auriez dans votre code HTML.

🛠 Dirty markup (en)

🛠 webhint

Link checker: Vérification qu'il n'y ai pas de liens brisés (pages 404).

🛠 W3C Link Checker

Adblockers test: 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).

📖 Utiliser AdBlockers en environnement de développement (en)

⬆ 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.

📖 Google Technical considerations about webfonts (en)

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

📖 WOFF - Web Open Font Format - Caniuse.

📖 WOFF 2.0 - Web Open Font Format - Caniuse.

📖 TTF/OTF - TrueType and OpenType font support

📖 Using @font-face - CSS-Tricks (en)

Webfont size: La taille des Webfonts ne doit pas excéder 100 Ko gzipé (toutes les variantes incluses).
Webfont loader: Controler le comportement du chargement avec un loader de webfont.

🛠 Typekit Web Font Loader

⬆ 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: Le site utilise un design responsive.
CSS Print: Une feuille d'impression CSS est incluse et permet une impression correcte sur chacune des pages.
Preprocessors: L'utilisation d'un preprocessor CSS (Sass, Less ou Stylus) est conseillée).
Unique ID: Si des IDs sont utilisés, ils sont uniques sur chaque page.
Reset CSS: 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.)

📖 Reset.css

📖 Normalize.css

📖 Reboot

JS prefix: 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: 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: les préfixes CSS sont utilisés et générés en fonction des navigateurs que vous ciblez.

🛠 Autoprefixer CSS online

Performance

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

📖 loadCSS by filament group (en)

📖 Example of preload CSS using loadCSS (en)

CSS non utilisés: Supprimer les CSS inutilisés.

🛠 UnCSS Online

🛠 PurifyCSS

🛠 PurgeCSS

🛠 Chrome DevTools Coverage

CSS testing

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

🛠 stylelint, a CSS linter (en)

📖 Sass guidelines (en)

Responsive web design: 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: Le CSS a été testé et il n'y a aucune erreur.

🛠 CSS Validator

Desktop Browsers: Toutes les pages ont étés testées sur différents navigateurs (Safari, Firefox, Chrome, Internet Explorer, EDGE...).
Mobile Browsers: Toutes les pages ont étés testées sur différents navigateurs mobiles (Native browser, Chrome, Safari...).
OS: Toutes les pages ont étés testées sur différents OS (Windows, Android, iOS, Mac...).

Pixel perfect: 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: Les pages ont étés testées dans les 2 sens de lecture si les 2 sont supportés (gauche à droite et droite à gauche).

📖 Building RTL-Aware Web Apps & Websites: Part 1 - Mozilla Hacks (en)

📖 Building RTL-Aware Web Apps & Websites: Part 2 - Mozilla Hacks (en)

⬆ 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: Toutes 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: 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.

📖 Comment constuire des images responsives avec srcset (en)

Retina: Vous fournissez des layout d'images 2x or 3x, pour l'affichage sur un support retina.
Sprite: 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: 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: Toute les balises <img> ont un texte alternatif qui décrit l'image visuellement.

📖 Alt-texts: The Ultimate Guide (en)

Lazy loading: Les images sont chargées au fur et à mesure (Un noscript fallback est toujours fourni).

⬆ retour en haut

JavaScript

Bonnes pratiques

JavaScript Inline: Vous n'avez aucun code javascript inline (contenu dans votre code HTML).
Concatenation: Les fichiers JavaScript sont concatenés.
Minification: Les fichiers JavaScript sont minifiés (vous pouvez ajouiter le suffixe .min).

📖 Minification des Ressources (HTML, CSS, and JavaScript) (en)

Securité JavaScript:

📖 Guidelines for Developing Secure Applications Utilizing JavaScript (en)

noscript tag: 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: Les fichiers JavaScript sont chargés en asynchrone avec async ou avec l'utilisation de l'attribut defer.

📖 Remove Render-Blocking JavaScript (en)

Optimized and updated JS libraries: 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.

📖 You may not need jQuery (en)

📖 Vanilla JavaScript pour construire des applications web puissantes (en)

Modernizr: Si vous avez besoin de fonctionnalités spécifiques, vous pouvez utiliser un Modernizr personnalisé pour ajouter les classes au tag <html>.

🛠 Personnaliser votre Modernizr

Tester le JavaScript

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

📖 ESLint - The pluggable linting utility for JavaScript and JSX (en)

⬆ retour en haut

Securité

Scan et vérification de votre site web

securityheaders.io (en)

Observatory by Mozilla (en)

Bonnes pratiques

HTTPS: HTTPS est utilisé sur chaque page et sur tous vos contenus externes (plugins, images...).

🛠 Let's Encrypt - Free SSL/TLS Certificates

🛠 Free SSL Server Test (en)

📖 Strict Transport Security

HTTP Strict Transport Security (HSTS): L'entête HTTP est définie à 'Strict-Transport-Security'.

🛠 Check HSTS preload status and eligibility (en)

📖 HTTP Strict Transport Security Cheat Sheet - OWASP (en)

📖 Transport Layer Protection Cheat Sheet - OWASP (en)

Cross Site Request Forgery (CSRF): 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 Request Forgery (CSRF) Prevention Cheat Sheet - OWASP (en)

Cross Site Scripting (XSS): Votre page ou site est dégagé des problèmes XSS possibles.

📖 XSS (Cross Site Scripting) Prevention Cheat Sheet - OWASP (en)

📖 DOM based XSS Prevention Cheat Sheet - OWASP (en)

Content Type Options 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-Content-Type-Options - Scott Helme (en)

X-Frame-Options (XFO) Protéger vos visiteurs contre les attaques par clickjacking.

📖 X-Frame-Options - Scott Helme (en)

📖 RFC7034 - HTTP Header Field X-Frame-Options (en)

Content Security Policy 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.

📖 Content Security Policy - An Introduction - Scott Helme (en)

📖 CSP Cheat Sheet - Scott Helme (en)

📖 CSP Cheat Sheet - OWASP

📖 Content Security Policy Reference (en)

⬆ retour en haut

Performance

Bonnes pratiques

Objectifs à atteindre: 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é

🛠 Website Page Analysis (en)

🛠 WebPageTest (en)

📖 Size Limit: Make the Web lighter (en)

Minified: Votre HTML est minifié.

Lazy loading: 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.

📖 Cookie specification: RFC 6265 (en)

📖 Cookies

🛠 Browser Cookie Limits (en)

Composants tiers: 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.

🛠 Simple sharing buttons generator (en)

Préparer les requêtes à venir

📖 Expliquation des techniques suivantes

DNS resolution: 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: 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: 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: 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">

📖 Différences entre prefetch et preload (en)

Tester la Performance

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

🛠 Google PageSpeed (en)

🛠 Tester votre vitesse mobile avec Google

🛠 WebPagetest - Website Performance and Optimization Test (en)

🛠 GTmetrix - Website speed and performance optimization (en)

🛠 Speedrank - Improve the performance of your website (en)

⬆ retour en haut

Accessibilité

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

Bonnes pratiques

Progressive enhancement: Les fonctionnalités importantes comme la navigation et la recherche doivent pouvoir fonctionner avec le JavaScript désactivé.

📖 Activer / désactiver le JavaScript dans l'outil Chrome Developer (en)

Contraste des couleurs: Le contraste des couleurs doit être au pire WCAG AA (AAA pour le mobile).

🛠 Contrast ratio

Headings

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

📹 Why headings and landmarks are so important -- A11ycasts #18 (en)

Sémantique

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

📖 Mobile Input Types

Formulaire

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

📖 Utiliser l'attribut aria-label - MDN

Tester l'accessibilité

Test des standards d'accessibilité: Utiliser l'outil WAVE pour vous assurer de respecter les standards d'accessibilité.

🛠 Wave testing (en)

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

📹 Managing Focus - A11ycasts #22 (en)

⬆ retour en haut

SEO

Google Analytics: Google Analytics est installé et correctement configuré.

🛠 Google Analytics

🛠 GA Checker (and others) (en)

Headings logic: Le texte d'entête aide à comprendre le contenu de la page courante.

🛠 Tota11y, tab Headings (en)

sitemap.xml: Un sitemap.xml existe et a été envoyé à Google Search Console (historiquement Google Webmaster Tools).

🛠 Sitemap generator (en)

robots.txt: Le robots.txt ne bloque pas l'indexation des pages.

📖 The robots.txt file (en)

🛠 Tester votre robots.txt avec Google Robots Testing Tool

Structured Data: 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.

📖 Introduction aux données structurées - Search - Google Developers

📖 RDFa - Linked Data in HTML (en)

📖 JSON-LD (en)

📖 Microdata (en)

🛠 Tester votre page avec Structured Data Testing Tool

🛠 Liste complete du vocabulaire utilisé dans les données structurées. Schema.org Full Heirarchy

Sitemap HTML: Un sitemap HTML est fourni et accessible via un lien dans le pied de page de votre site.

📖 Sitemap guidelines - Google Support

Pagination link tags: Ajoutez rel="prev" et rel="next" pour indiquer le contenu paginé.

🛠 Pagination (rel="prev/next") Testing Tool (en)

📖 Pagination guidelines - Google Support

<!-- 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 !

🇯🇵 Japanese: miya0001/Front-End-Checklist
🇪🇸 Spanish: eoasakura/Front-End-Checklist-ES
🇨🇳 Chinese: JohnsenZhou/Front-End-Checklist
🇰🇷 Korean: kesuskim/Front-End-Checklist
🇧🇷 Portuguese: jcezarms/Front-End-Checklist
🇻🇳 Vietnamese: euclid1990/Front-End-Checklist
🇹🇼 Traditional Chinese: EngineLin/Front-End-Checklist
🇫🇷 French: ynizon/Front-End-Checklist
🇷🇺 Russian: ungear/Front-End-Checklist
🇹🇷 Turkish: eraycetinay/Front-End-Checklist
🇩🇪 German: xfuture603/Front-End-Checklist

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](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]. <a href="https://github.com/thedaviddias/Front-End-Checklist/graphs/contributors"><img src="https://opencollective.com/front-end-checklist/contributors.svg?width=890" /></a>

Backers

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

License

⬆ Retour en haut

Awesome

Table des matières

Comment l'utiliser ?

Head

Meta tag

HTML tags

Social meta

HTML

Bonnes pratiques

HTML testing

Webfonts

CSS

Performance

CSS testing

Images

Bonnes pratiques

JavaScript

Bonnes pratiques

Tester le JavaScript

Securité

Scan et vérification de votre site web

Bonnes pratiques

Performance

Bonnes pratiques

Préparer les requêtes à venir

Tester la Performance

Accessibilité

Bonnes pratiques

Headings

Sémantique

Formulaire

Tester l'accessibilité

SEO

Traduction

Le badge Front-End Checklist

Contribuer

Contributeurs

Support

Auteur original

Contributeurs

Backers

Sponsors

License