🗂 La checklist exhaustive des développeurs méticuleux pour la mise en place de sites.
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 16 commits ahead, 451 commits behind thedaviddias:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
CNAME Create CNAME Oct 17, 2017
CODE_OF_CONDUCT.md fix grammar Oct 28, 2017
LICENSE Changing MIT to CC0 Oct 19, 2017
README.md Update README.md Nov 2, 2017
_config.yml Set theme jekyll-theme-slate Oct 17, 2017

README.md

Front-End Checklist

Join the chat at https://gitter.im/Front-End-Checklist/Lobby Front‑End_Checklist followed Contributors StackShare CC0

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

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.

Si vous l'aimez , merci de la partager en votant sur Product Hunt

Table des matières

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

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 3 meta tags (Charset, X-UA Compatible and 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">
  • X-UA-Compatible: Moyen Le meta tag X-UA-Compatible est prĂ©sent.
<!-- Instruct Internet Explorer to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
  • Viewport: Haut Le viewport est correctement dĂ©clarĂ©.
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1">
  • 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 Touch Icon: Bas Les favicons Apple touch apple-mobile-web-app-capable sont prĂ©sents. (CrĂ©er vos icones Apple avec au pire des dimensions de 200x200px pour supporter toutes les dimensions dont vous aurez besoin)
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">
  • 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="en">
  • L'attribut direction : Moyen Le sens de lecture est specifiĂ© dans le tag html (Il peut ĂŞtre indiquĂ© dans un autre tag HTML).
<html dir="rtl">
  • Alternate language: Low Le tag language de votre site est specifiĂ© et est en relation avec le language de la page courante.
<link rel="alternate" href="https://es.example.com/" hreflang="es">
  • 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

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 avec Flash - 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 2 MB (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 et les Guidelines Sass fournis par de nombreux développeurs Front-End. Si vous avez des doutes sur des propriétés CSS, vous pouvez visiter la Reference CSS. 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 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 id- 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 style: le sont uniquement pour de bonnes raisons (e.g. background-image pour des sliders, ou des CSS critiques).
  • Vendor prefixes: Haut les prĂ©fixes des CSS sont utilisĂ©s en prenant soin de la compatibilitĂ© des navigateurs.

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 / en fonction de votre analyse).

  • 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 d'Addy Osmani.

Bonnes practiques

  • 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
  • đź›  Utiliser ImageOptim pour optimiser gratuitement vos images.
  • đź›  Utiliser Kraken.io une alternativeincroyable pour des optimisations sur des png et des jpg . Jusqu'Ă  1 Mb en version gratuite.
  • Picture/Srcset: Moyen Vous pouvez utiliser des images/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> dans le rendu final si la taille est connue (le css de dimensionnement peut alors ĂŞtre omis).
  • 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:
  • Non-blocking: Moyen Les fichiers JavaScript sont chargĂ©s en asynchrone avec async ou avec l'utilisation de l'attribut defer.
  • 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'ou il est autorisĂ© Ă  ĂŞtre chargĂ©. Cela peut aussi vous permettre de vous protĂ©ger des attaques par clickjacking.

⬆ retour en haut


Performance

Bonnes pratiques

  • Weight page: Haut Le poids de chaque page est entre 0 et 500 KB.
  • 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 qu'ils n'excèdent pas 4096 bytes 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 DNS est un service tiers qui peut rĂ©soudre en avance les prochaines requĂŞtes grâce Ă  l'utilisation de 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 Resources that will be needed soon (e.g. lazy loaded images) are requested in advance during idle time using 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 pire de 90/100.

⬆ retour en haut


Accessibilité

Notes: Vous pouvez regader la playlist A11ycasts with Rob Dodson đź“ą

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

Repères

  • Role banner: Haut <header> a le role="banner".
  • Role navigation: Haut <nav> a le role="navigation".
  • Role main: Haut <main> a le role="main".

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 tool 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 une structure de donnĂ©es ont Ă©tĂ©s testĂ©s et n'ont pas d'erreurs. Les donnĂ©es structurĂ©es aide 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 pagede votre site.

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

Guide

Le repository Front-End Checklist consiste en 2 branches:

1. maitre

La branche consiste dans ce fichier README.md créé depuis le site Front-End Checklist .

2. developpeurs

Cette branche sera utilisé pour faire des changements significatifs à la structure si besoin. Il est préférable d'utiliser la branche maitre pour corriger des petites erreurs ou pour ajouter un nouvel élément.

Contributeurs

contributeurs.

Support

Si vous avez des questions ou des suggestions, n'hesitez pas Ă  m'interpeller sur Gitter ou Twitter:

Auteurs

David Dias

License

CC0

⬆ Retour en haut