clawic/skills

Règles de développement web

Performance

• Les images sont la cause principale de lenteur des sites — utilisez WebP/AVIF, chargez en différé le contenu hors écran, et définissez des dimensions explicites pour éviter les décalages de mise en page
• Le CSS bloquant le rendu retarde le premier affichage — intégrez le CSS critique dans <head>, differez le reste
• Les scripts tiers (analytiques, widgets de chat) ajoutent souvent plus de 500 ms — chargez-les avec async ou defer, auditez régulièrement
• Les polices provoquent un affichage invisible du texte (FOIT) — utilisez font-display: swap et préchargez les polices critiques
• Mesurez avec Lighthouse en mode incognito — les extensions faussent les résultats

Mobile First

• Commencez le CSS avec les styles mobiles, ajoutez de la complexité avec des requêtes média min-width — plus facile de monter en gamme que de réduire
• Les cibles tactiles doivent mesurer au moins 44 x 44 pixels — les doigts sont imprécis, les petits boutons frustrent les utilisateurs
• Testez sur de vrais appareils, pas seulement avec les outils de développement du navigateur — la simulation de limitation ne reproduit pas les ralentissements réels
• Le défilement horizontal est un bug critique — testez chaque page à une largeur minimale de 320 pixels
• La balise méta viewport est obligatoire : <meta name="viewport" content="width=device-width, initial-scale=1">

Accessibilité

• Chaque <img> nécessite un texte alt — alt="" pour les images décoratives, texte descriptif pour les images significatives
• Rapport de contraste des couleurs d'au moins 4,5:1 pour le texte courant — utilisez l'outil de vérification de contraste WebAIM
• Les champs de formulaire doivent avoir des éléments <label> associés — les seuls espaces réservés ne sont pas accessibles
• La navigation au clavier doit fonctionner — testez chaque élément interactif avec la touche Tab
• Les lecteurs d'écran annoncent la hiérarchie des titres — utilisez H1 à H6 dans un ordre logique, ne sautez jamais de niveau

Structure HTML

• Un seul <h1> par page — c'est le titre de la page, pas un outil de style
• Utilisez des éléments sémantiques : <nav>, <main>, <article>, <aside>, <footer> — ils communiquent la structure aux navigateurs et aux technologies d'assistance
• <button> pour les actions, <a> pour la navigation — n'utilisez pas de div avec des gestionnaires de clic
• Les liens externes doivent avoir rel="noopener" — évite une vulnérabilité de sécurité avec target="_blank"
• Validez le HTML — un balisage défectueux provoque des rendus imprévisibles selon les navigateurs

Modèles CSS

• Évitez !important — il casse la cascade et rend le débogage pénible. Corrigez plutôt la spécificité
• Utilisez des unités relatives (rem, em, %) plutôt que des px fixes pour le texte — respecte les préférences de taille de police de l'utilisateur
• Les propriétés personnalisées CSS (variables) réduisent la répétition — définissez les couleurs et l'espacement une fois, utilisez-les partout
• Flexbox pour les dispositions 1D, Grid pour les 2D — ne forcez pas l'un à faire le travail de l'autre
• Testez sans chargement CSS — le contenu doit toujours être lisible en HTML brut

Erreurs courantes

• L'absence de favicon provoque du spam 404 dans les journaux du serveur — incluez-en toujours un, même un simple PNG
• Ne pas définir <html lang="fr"> casse la prononciation des lecteurs d'écran
• Les liens codés en dur avec http:// cassent sur les sites HTTPS — utilisez // relatif au protocole ou toujours https://
• Supposez que JavaScript est disponible — le contenu principal doit fonctionner sans JS (amélioration progressive)
• Oubliez les styles d'impression — ajoutez @media print pour les pages que les utilisateurs pourraient imprimer (reçus, articles)

Avant le lancement

• Testez que tous les formulaires envoient bien — des formulaires de contact défaillants font perdre des prospects en silence
• Vérifiez que la page 404 existe et est utile — une page 404 par défaut du serveur semble peu professionnelle
• Validez les aperçus de partage sur les réseaux sociaux avec les balises Open Graph — testez dans les débogueurs Facebook/Twitter
• Soumettez le plan du site à Google Search Console — accélère l'indexation
• Mettez en place une surveillance de la disponibilité — sachez quand votre site tombe avant que les utilisateurs ne vous le disent