Une refonte qui livre sans bug, c'est un mythe — sauf si tu coches une checklist. Voici les 32 points que je valide systématiquement chez RYADESIGN avant chaque mise en prod. Méthode appliquée pour BNP Paribas (600+ analystes), MAAF (4M utilisateurs), Orange.
1. Stratégie & contenu (4 points)
- Personae validées par 3-5 interviews utilisateurs minimum.
- Architecture d'information testée en card-sorting ou tree-test.
- Contenu rédigé par un copywriter (pas placeholder "Lorem ipsum") avant le design.
- SEO keywords définis pour chaque page (1 keyword primaire + 3 secondaires).
2. Design (6 points)
- Design system ou tokens définis (colors, typo, spacing, radius) avant les écrans.
- Mobile-first : tous les écrans designés à 390 px avant le desktop.
- États interactifs définis : hover, focus, active, disabled, loading, error.
- Hiérarchie de l'attention claire (1 CTA primaire par écran).
- Contraste WCAG AA validé sur tous les textes (4,5:1 minimum).
- Cohérence cross-page : tous les composants identiques d'une page à l'autre.
3. Développement (8 points)
- Semantic HTML5 : section, article, nav, header, footer utilisés correctement.
- Alt text sur 100 % des images informatives.
- ARIA labels sur les boutons icônes.
- Lazy loading sur toutes les images sous le fold.
- Format moderne : WebP avec fallback JPG, AVIF pour les hero.
- Fonts en woff2 avec font-display:swap.
- Critical CSS inlined dans le head.
- JS deferred sauf scripts critiques (analytics, consent).
4. Performance (4 points)
- LCP < 1,8s sur mobile 4G (test Lighthouse réel, pas dev tools).
- INP < 200 ms sur tous les écrans interactifs.
- CLS < 0,05 sur toutes les pages.
- Bundle JS < 100 KB minifié + gzippé pour la page d'accueil.
5. SEO (5 points)
- Meta tags uniques par page (title 50-65 chars, description 140-160 chars).
- Schema.org JSON-LD sur toutes les pages (Organization, Article, FAQPage, BreadcrumbList).
- Sitemap XML et robots.txt à jour.
- Open Graph + Twitter Card avec OG image dédiée par page.
- Canonical URL sur chaque page.
6. Conversion (3 points)
- 1 CTA primaire au-dessus du fold mobile sur la home.
- Formulaire avec 3 champs max au premier contact.
- Tracking Google Analytics 4 + Pixel Meta + Conversion API configuré.
7. Sécurité & RGPD (2 points)
- HTTPS avec HSTS preload activé.
- Cookie consent conforme CNIL + gtag consent v2.
Comment utiliser cette checklist
Trois modes d'usage selon ton contexte :
Tu fais ton site toi-même : imprime la liste, valide point par point avant chaque mise en ligne. Si tu en rates 3+, ton site va converter moins bien sans que tu saches pourquoi.
Tu pilotes une équipe : intègre cette checklist dans ton process. Aucune mise en prod sans validation 32/32. C'est ce qu'on fait chez RYADESIGN.
Tu prends une agence : demande son équivalent. Si elle n'a pas de checklist équivalente, fuis. Une agence sans process livre des bugs.
La version PDF imprimable
La checklist complète au format PDF imprimable (avec captures d'écran, contre-exemples, et cases à cocher) est dans le Kit Site Pro gratuit (32 points + Template Figma + grille tarifaire RYADESIGN).
Si tu veux qu'on audite ton site sur ces 32 points : audit gratuit en 24h ou 30 min d'appel.