6.3Bonnes pratiques & pièges
L'essentiel en 30 secondes
- Structurer : conteneurs Flexbox simples (sans sur-imbrication), charte globale (couleurs/polices) définie tôt, parties globales au Theme Builder.
- Fiabiliser : un seul H1 par page, alt sur chaque image, overlay pour le texte sur image, formulaire testé, responsive réglé par point de rupture.
- Industrialiser : images compressées + cache, widgets Pro intégrés plutôt que plugins tiers, sauvegardes, kit réutilisable — tester sur un vrai mobile avant de livrer.
Fil Nadia — la règle collée au mur
Après quelques projets, Nadia a collé sa règle au mur à Oran : structuré et testé d'abord, « joli » ensuite. Ce qui a le plus compté n'est pas un widget, mais trois habitudes — structure simple, charte globale, test mobile — et son plus gros piège évité de justesse : une bannière magnifique sur son écran mais illisible sur téléphone, rattrapée avant livraison.
Choisissez une seule habitude à ancrer dans votre rituel, puis passez à la suivante.
Les do / don't d'un site fiable
La différence entre un site solide et une usine à retouches tient à quelques habitudes de conception. Voici celles qui reviennent le plus.
✓ À faire
- Structurer en conteneurs Flexbox simples ; imbriquer seulement si nécessaire.
- Définir la charte (couleurs/polices) en global, dès le début.
- Concevoir en-tête/pied au Theme Builder (une fois, pour tout le site).
- Un seul H1 par page ; alt descriptif sur chaque image.
- Poser une superposition dès qu'il y a du texte sur une image.
- Compresser les images (WebP) et activer un cache.
- Préférer les widgets Pro intégrés (formulaire) aux plugins tiers.
- Sauvegarder avant toute intervention et tester sur un vrai mobile avant de livrer.
✗ À éviter
- Sur-imbriquer des conteneurs « pour contrôler ».
- Régler les couleurs élément par élément au lieu du global.
- Recopier l'en-tête sur chaque page au lieu du Theme Builder.
- Mettre du texte directement sur une image contrastée (illisible).
- Téléverser des images lourdes non compressées.
- Multiplier les plugins qui font double emploi.
- Pop-up dès l'arrivée, difficile à fermer (surtout mobile).
- Juger « beau » seulement sur l'écran d'ordinateur, sans tester le mobile.
Script prêt à dire — vérifier son site avant livraison (30 s)
« Structure simple ? Charte globale ? En-tête/pied globaux ? Un H1 + alt ? Overlay sur le texte en image ? Images compressées + cache ? Formulaire testé ? Mobile vérifié ? Si un non, je corrige avant de livrer. »
Modèle copier-coller — check avant livraison
STRUCTURE : conteneurs simples, zéro sur-imbrication
GLOBAL : charte (couleurs/polices) + en-tête/pied (Theme Builder)
CONTENU : 1 H1/page, alt partout, overlay si texte sur image
PERF : images WebP compressées + cache actif
FORMULAIRE : envoi testé (e-mail reçu)
MOBILE : testé sur un vrai téléphoneArtisan / petit budget
Une seule habitude par projet suffit : charte globale + structure simple d'abord, le reste ensuite.
PME Oran
Adapter les rituels aux livraisons : un créneau images compressées + test mobile tenu à chaque projet.
Remote / hybride
La discipline n°1 à distance : sauvegarde, charte et preuve de test écrites, même pour les petits sites.
Multilingue
Vérifier la charte et les parties globales dans chaque langue, et l'affichage RTL (AR).
Défi 48h — appliquez demain
Passez une page au crible : charte globale appliquée, zéro sur-imbrication, overlay sur le texte en image, images compressées. Corrigez le premier écart trouvé et testez sur mobile.
- Je connais les 8 réflexes à faire et les 8 pièges à éviter.
- J'ai vérifié mes 3 points critiques (structure simple, charte globale, test mobile).
- J'ai fait le défi 48h ou planifié sa date.
Avant de livrer, quel réflexe protège le mieux Nadia ?
Règle d'or : un réglage défini une seule fois (charte, parties globales), appliqué partout — jamais recopié à la main.