Cet article s’adresse à tout débutant en intégration, opération consistant à transformer une maquette en gabarit pour un CMS.
Il ne parle pas d’automatisation, d’industrialisation, de CI, de CD…
Travaux en cours : Si vous voyez des choses à ajouter, à corriger, à retirer, n’hésitez pas à en discuter en ouvrant une issue.
- Organisez votre code HTML
- Pensez CSP, dégagez tous les « inline »
- Utilisez l’attribut
class, pas l’attributid - Mettez un attribut
altà toutes les images ! - Utilisez les « nouvelles » balises de HTML5
- Utilisez la balise
<button>pour afficher des boutons - Utilisez la balise
<details>pour des blocs dépliables
- Maîtrisez le modèle de boîte
- Restez en dessous de 14 Ko
- Choisissez entre documents et composants
- N’utilisez pas d’image pur CSS
- Unifiez le rendu entre navigateurs avec CSS reset ou Normalize.css
- Utilisez des astuces qui vous simplifient la vie
- Optimisez vos CSS
- Faites de bonnes captures d’écran
- Demandez du RVB à votre graphiste
- Travaillez en sRGB
- Vectoriel ou bitmap, choisissez le plus adapté
- Pensez multiples de 8 pour les JPEG
- Choisissez WEBP ou APNG pour les images animées plutôt que GIF
- Récupérez proprement les images contenues dans un PDF
- Oubliez Internet Explorer
- Vérifiez le support des balises, styles et fonctionnalités
- Pensez mobile-first
- Ayez une pensée pour l’accessibilité
- N’oubliez pas de configurer
robots.txtlors du développement - Utilisez
<picture>pour les images, les résolutions et les vieux navigateurs - Recueillez des valeurs numériques correctement