Responsive design

Le responsive design (design adaptatif) est une approche de conception web dans laquelle l'interface s'adapte automatiquement a la taille de l'écran : smartphone, tablette ou desktop. Il repose sur des grilles flexibles, des images adaptatives et des média queries CSS.

C'est l'approche recommandée par Google pour la compatibilité mobile depuis 2012, et la seule qui garantit un contenu identique entre toutes les versions (une seule base de code HTML).

• Une seule URL par page : pas de contenu dupliqué entre version mobile et desktop
• Contenu identique : compatible nativement avec le mobile-first indexing de Google
• Maintenance simplifiee : un seul code HTML à maintenir et optimiser
• Consolidation des backlinks : tous les liens pointent vers la même URL (pas de dilution mobile/desktop)
• Meilleure UX : expérience fluide sur tous les appareils, réduisant le taux de rebond

Le CLS (Cumulative Layout Shift) est fortement influence par la qualité du responsive : des images sans dimensions explicites, des polices provoquant des décalages, ou des éléments changeant de position dégradent le score. Un responsive bien implémente reserve l'espace nécessaire à chaque élément avec des attributs width/height et des classes CSS predictibles.

Le framework CSS Tailwind adopte une approche mobile-first native : les classes de base s'appliquent au mobile, et les préfixes `md:` et `lg:` ajoutent les styles pour les écrans plus grands.

<!-- Exemple Tailwind mobile-first -->
<div class="text-center md:text-left">
  <h1 class="text-2xl md:text-4xl lg:text-5xl">
    Boulangerie Artisanale Bordeaux
  </h1>
  <div class="flex justify-center md:justify-start">
    <a class="px-6 py-3">Prendre rendez-vous</a>
  </div>
</div>