Le responsive design (ou design adaptatif) est une approche de conception web qui permet à un site de s'adapter automatiquement à toutes les tailles d'écran : ordinateur, tablette et smartphone.
Principes du responsive design
- Grilles flexibles : Mise en page en pourcentages, pas en pixels fixes
- Images fluides : Redimensionnement automatique
- Media queries CSS : Styles adaptés selon la taille d'écran
- Breakpoints : Points de rupture pour chaque format
Importance pour le SEO
Google utilise l'indexation mobile-first depuis 2019 :
- La version mobile est celle qui est indexée
- Un site non responsive est pénalisé
- Le mobile représente 60%+ du trafic web
- Impact direct sur le positionnement
Responsive vs Adaptive vs Site mobile
- Responsive : Un seul site qui s'adapte (recommandé)
- Adaptive : Versions fixes pour certaines résolutions
- Site mobile (m.) : URL séparée pour mobile (déconseillé)
Breakpoints courants
- Mobile : 320px - 480px
- Tablette portrait : 481px - 768px
- Tablette paysage : 769px - 1024px
- Desktop : 1025px - 1200px
- Large desktop : 1201px+
Bonnes pratiques responsive
- Mobile-first : Concevoir d'abord pour mobile
- Touch-friendly : Boutons assez grands (44px minimum)
- Texte lisible : Taille minimale 16px sur mobile
- Navigation adaptée : Menu hamburger sur mobile
- Images optimisées : srcset pour différentes résolutions
Test de compatibilité mobile
- Google Mobile-Friendly Test
- Chrome DevTools (F12 → mode responsive)
- BrowserStack pour tests réels
- Lighthouse / PageSpeed Insights
Framework CSS responsive
- Bootstrap : Le plus populaire
- Tailwind CSS : Utility-first moderne
- Foundation : Robuste et flexible
- Bulma : Simple et léger