Responsive design et mobile-first : concevoir pour tous les écrans

Pourquoi le mobile-first en 2025

Google utilise l’indexation mobile-first depuis 2021 : c’est la version mobile de votre site qui est crawlée et indexée en priorité. Un site non optimisé pour le mobile perd en visibilité et en conversions.

Chez Lueur Externe, chaque projet est conçu en mobile-first, puis enrichi pour les écrans plus grands.

L’approche mobile-first en CSS

Le principe

Au lieu de partir du desktop et de réduire, partez du mobile et enrichissez :

/* Styles de base = mobile */
.container {
  padding: 1rem;
}

.grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Tablette */
@media (min-width: 768px) {
  .grid {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .grid > * {
    flex: 1 1 calc(50% - 0.5rem);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
  }
  
  .grid > * {
    flex: 1 1 calc(33.333% - 0.67rem);
  }
}

Breakpoints recommandés

Breakpoint	Cible	Usage
480px	Petits mobiles	Ajustements typographiques
768px	Tablettes	Passage à 2 colonnes
1024px	Desktop	Layout complet
1200px	Grand écran	Largeur maximale du contenu

Images adaptatives

L’attribut srcset

<img
  src="photo-400.webp"
  srcset="
    photo-400.webp 400w,
    photo-800.webp 800w,
    photo-1200.webp 1200w
  "
  sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
  alt="Description de l'image"
  loading="lazy"
/>

Le navigateur choisit automatiquement la taille d’image adaptée à l’écran et à la résolution.

L’élément picture

Pour des images radicalement différentes selon le contexte :

<picture>
  <source media="(max-width: 768px)" srcset="hero-mobile.webp" />
  <source media="(max-width: 1024px)" srcset="hero-tablet.webp" />
  <img src="hero-desktop.webp" alt="Hero image" />
</picture>

Typographie responsive

Unités fluides avec clamp()

h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  /* Minimum 1.75rem, idéal 4vw, maximum 2.5rem */
}

body {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
}

Échelle typographique

Définissez une échelle cohérente qui s’adapte :

:root {
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.35rem);
  --step-2: clamp(1.44rem, 1.25rem + 0.95vw, 1.75rem);
  --step-3: clamp(1.73rem, 1.4rem + 1.65vw, 2.25rem);
}

UX mobile : les fondamentaux

Zones tactiles

Taille minimale : 44×44 pixels (recommandation Apple) ou 48×48 pixels (Google)
Espacement entre éléments cliquables : 8px minimum
Boutons d’action principaux accessibles au pouce

Menu hamburger pour la navigation secondaire
Barre de navigation fixe en bas pour les actions principales
Fil d’Ariane simplifié sur mobile
Recherche accessible en un tap

Formulaires mobiles

Champs de saisie pleine largeur
Labels au-dessus des champs (pas à côté)
Clavier adapté au type de champ (type="email", type="tel")
Autocomplétion activée (autocomplete)

Tests et validation

Chrome DevTools : émulation d’appareils intégrée
BrowserStack : tests sur de vrais appareils
Google Mobile-Friendly Test : validation de la compatibilité mobile
Lighthouse : audit de performance mobile

Chez Lueur Externe, nous testons chaque projet sur une matrice d’appareils réels avant livraison.

Conclusion

Le responsive design mobile-first n’est plus une option, c’est le standard. Un site qui offre une expérience mobile dégradée perd en SEO, en conversions et en crédibilité. Contactez Lueur Externe pour un site parfaitement adapté à tous les écrans.