larsderidder/theredbeard-pi-agent

Règles de développement de sites web

Performances

• Les images sont la cause numéro 1 des sites lents — utilisez WebP/AVIF, chargez en différé les images hors écran, et définissez des largeurs/hauteurs explicites pour éviter les décalages de mise en page.
• Le CSS bloquant le rendu retarde le premier affichage — incorporez le CSS critique dans <head>, différé le reste.
• Les scripts tiers (analytique, widgets de chat) ajoutent souvent 500ms+ — chargez-les avec async ou defer, auditez régulièrement.
• Les polices provoquent un flash de texte invisible (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 les media queries min-width — il est plus facile de monter en gamme que de réduire.
• Les cibles tactiles doivent mesurer au minimum 44x44px — les doigts sont imprécis, les petits boutons frustrent les utilisateurs.
• Testez sur des appareils réels, pas seulement dans les outils de développement du navigateur — la simulation de limitation de bande passante ne reproduit pas les à-coups réels.
• Le défilement horizontal est un bug critique — testez chaque page à une largeur minimum de 320px.
• La balise meta viewport est obligatoire : <meta name="viewport" content="width=device-width, initial-scale=1">.

Accessibilité

• Chaque <img> nécessite un texte alt — alt="" vide pour les images décoratives, texte descriptif pour les images significatives.
• Rapport de contraste des couleurs minimum 4.5:1 pour le texte du corps — utilisez l'outil de vérification de contraste WebAIM.
• Les champs de formulaire doivent avoir des éléments <label> associés — les espaces réservés seuls 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 divs avec des gestionnaires de clic.
• Les liens externes doivent avoir rel="noopener" — cela évite une vulnérabilité de sécurité avec target="_blank".
• Validez le HTML — un balisage cassé provoque un rendu imprévisible dans tous les navigateurs.

Patterns CSS

• Évitez !important — cela casse la cascade et rend le débogage pénible. Corrigez la spécificité à la place.
• 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 simple.

Erreurs courantes

• L'absence de favicon entraîne des 404 en masse dans les journaux serveur — incluez-en toujours un, même un simple PNG.
• Ne pas définir <html lang="en"> casse la prononciation des lecteurs d'écran.
• Les liens http:// en dur 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).
• Oublier les styles d'impression — ajoutez @media print pour les pages que les utilisateurs pourraient imprimer (reçus, articles).

SEO / Indexation

• Les URL canoniques doivent correspondre à l'URL réelle servie par le serveur — une non-correspondance (ex. barre oblique finale vs pas de barre oblique finale) confond Google et peut empêcher l'indexation.
• Chaque page de contenu doit avoir au moins un lien interne pointant vers elle — les pages uniquement dans un sitemap mais sans page de référence sont dépriorisées par le robot d'exploration de Google.
• Les filtres de contenu dans les modèles peuvent exclure silencieusement des pages de la navigation — vérifiez que toutes les pages sont accessibles en suivant les liens depuis la page d'accueil, pas seulement en consultant le sitemap.
• « Découvert - actuellement non indexé » dans la Search Console signifie généralement qu'il n'y a pas de liens internes, pas un blocage technique — corrigez d'abord le maillage avant de demander une indexation.

Avant le lancement

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