1. Structure & bases techniques

• Utiliser une balise viewport correcte

• Adopter une approche mobile-first
• Utiliser des unités flexibles (%, vw, vh, rem) au lieu de px fixes
• Mettre en place des media queries cohérentes

2. Layout & design adaptatif

• Utiliser Flexbox ou CSS Grid pour la mise en page
• Éviter les largeurs fixes (ex: width: 1200px)
• Prévoir des breakpoints principaux :
  • Mobile : ~320–480px
  • Tablette : ~768px
  • Desktop : ~1024px+
• Vérifier que :
  • Les colonnes se réorganisent correctement
  • Les éléments ne débordent pas
  • Les marges/paddings s’adaptent

3. Images & médias

• Utiliser des images fluides :

• Employer srcset pour charger la bonne taille d’image
• Compresser les images (WebP recommandé)
• Vérifier les vidéos (YouTube, etc.) :
  • Responsive avec un container adaptatif
  • Pas de débordement

4. Typographie & lisibilité

• Utiliser des tailles de texte adaptatives (rem/em)
• Vérifier la lisibilité sur mobile :
  • Taille minimum : 16px
• Adapter les titres (pas trop grands sur petit écran)
• Gérer les longueurs de ligne (éviter les textes trop larges)

5. Navigation & UX mobile

• Mettre en place un menu responsive (hamburger)
• Assurer des zones cliquables suffisantes :
  • Minimum ~44px de hauteur
• Espacer correctement les boutons/liens
• Éviter les hover-only (pas de hover sur mobile)
• Garder les actions importantes visibles (CTA)

6. Formulaires

• Adapter les champs à la largeur de l’écran
• Utiliser les bons types HTML :
  • email, tel, number (clavier mobile adapté)
• Ajouter des labels clairs
• Éviter les formulaires trop longs

7. Performance mobile

• Optimiser le temps de chargement
• Lazy load des images
• Minimiser CSS / JS
• Éviter les scripts lourds inutiles

👉 Tester avec Google PageSpeed Insights

8. Tests multi-appareils

• Tester sur :
  • Smartphones (iOS / Android)
  • Tablettes
  • Desktop
• Utiliser des outils comme :
  • Google Chrome DevTools
  • Responsively App
• Vérifier :
  • Scroll horizontal (doit être absent ❌)
  • Alignements
  • Bugs visuels

9. Contenu & priorisation

• Adapter le contenu pour mobile :
  • Aller à l’essentiel
  • Réduire les blocs trop longs
• Prioriser les éléments importants en haut
• Masquer ou simplifier certains éléments secondaires

10. Accessibilité (souvent oubliée ⚠️)

• Contraste suffisant (texte/fond)
• Boutons lisibles et accessibles
• Navigation au clavier possible
• Images avec attribut alt

11. Bonnes pratiques avancées

• Utiliser clamp() pour des tailles fluides :

• Prévoir le mode paysage (mobile horizontal)
• Tester avec connexion lente (3G/4G)
• Éviter les pop-ups intrusifs sur mobile

🚀 Résumé rapide

👉 Mobile-first toujours
👉 Layout flexible (Flexbox / Grid)
👉 Images adaptatives
👉 Navigation pensée pour le tactile
👉 Tests réels indispensables