- ! Plan du document HTML5 (headingsMap)
- Vérifier que vous avez bien les bonnes polices de caractère ! => UTILE : extension FontFinder dans Firefox (ou WhatFont dans Chrome)
- Soigner les longueurs de ligne et les espaces interligne, et plus généralement le rythme vertical du texte (à revoir chez la plupart d'entre vous)
- Poids des images !!
=> enregistrer au format nécessaire pour l'afficahe choisi
- passer dans ImageOptim (https://imageoptim.com/fr.html)
- Optimisation en général :
- vérifier optimisation du site avec GTmetrix
- Mettre vos lunettes : "jeu des 7 erreurs"
- Total validator
- HeadingsMap
- Outil de testing des micro-datas
- Web Developer : entourer les éléments positionnés
- Colour Contrast Analyser
- Quickscan
- GTmetrix
- FontFinder dans Firefox (ou WhatFont dans Chrome)
- Redimensionnement fenêtre, redimensionnement polices
- Vue adaptative dans Firefox => tester aussi pour tous grands écrans (! jutification, max-width ?)
- Compatibilité => Autres navigateurs
- Désactiver les styles, désactiver javascript
- Opquast en cochant différentes checklist
- CSS Stats
- CSS Specificity graph generator
- Onglet "Audits" de Chrome
- TYPS A More Modular Scale de Thomas Hupkens
- Type scale
- Opquast : pour le télécharger
- Opquast demo : vidéo d'explication d'une minute
- Opaquast - article Alsa : brève préstatnion d'opquast par Dew sur Alsacréations
- Opquast Desktop : l’extension Opquast pour Firefox : présentation d'Opquast
- Quickscan inspiré de la checklist d'anysurfer.
Pour obtenir une appréciation quantifiable, chacun des 15 critères est pondéré de 1, de 2 ou de 3. Chaque critère est apprécié comme OK, pas OK ou « Je ne sais pas ». Un site web réussit le test du QuickScan s'il obtient un score d'au moins 75%.
Détail complet de la méthode ici et là. Cette dernière page reprend, pour chaque critère, une courte explication théorique, des exemples de bonnes et mauvaises pratiques, ainsi que des instructions pour tester ce critère.
- Juicy studio accessibility tooblar => color contrast analyser (extension de FF)
- Colour Contrast Analyser : une application en local du Paciello Group dans laquelle on peut entrer à la main les valeurs de couleur d'avant-plan et d'arrière plan et qui donne les différences de luminosité et de couleur / intensité et si cela passe les seuils pour les textes normaux et grands aux niveaux AA et AAA
- CSS évolutif : Votre CSS est malade - Astuces et bonnes pratiques pour un CSS évolutif, traduction partielle de conseils de Chris Coyier
- 10 ressources sur les couleurs pour le web design