Mobile-first design : concevoir pour les petits écrans

Pourquoi mobile-first n'est plus optionnel en 2024

En France, plus de 60% du trafic web provient désormais des mobiles. Google indexe votre site en priorité depuis la version mobile (Mobile-First Indexing depuis 2023 pour tous les sites). Et pourtant, combien de sites professionnels s'affichent encore correctement sur desktop mais sont une catastrophe sur téléphone ?

L'approche mobile-first n'est pas juste une technique CSS. C'est une façon de penser le design qui force à prioriser ce qui compte vraiment.

La philosophie mobile-first

Desktop-first vs Mobile-first : la différence fondamentale

Approche desktop-first (ancienne méthode) :

1. Concevoir pour un grand écran (1440px)
2. Ajouter des media queries pour "casser" le layout sur mobile
3. Résultat : mobile traité comme une contrainte, pas un contexte

1. Concevoir pour le plus petit contexte (320px-375px)
2. Enrichir progressivement pour les grands écrans
3. Résultat : fonctionnalités essentielles garanties partout

/* ❌ Desktop-first : media queries qui réduisent */
.container {
  width: 1200px;
  padding: 0 40px;
}

@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 16px;
  }
}

/* ✅ Mobile-first : media queries qui enrichissent */
.container {
  width: 100%;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .container {
    max-width: 1200px;
    padding: 0 40px;
    margin: 0 auto;
  }
}

Les breakpoints à utiliser en 2025

Les breakpoints doivent correspondre aux vrais appareils populaires :

/* Breakpoints recommandés (mobile-first) */
/* xs — Petit mobile : 320px - 374px (par défaut, pas de media query) */

/* sm — Mobile standard */
@media (min-width: 375px) { }

/* md — Tablette portrait / Grand mobile */
@media (min-width: 768px) { }

/* lg — Tablette paysage / Petit laptop */
@media (min-width: 1024px) { }

/* xl — Desktop standard */
@media (min-width: 1280px) { }

/* 2xl — Grand desktop */
@media (min-width: 1536px) { }

Conseil : évitez d'avoir plus de 4-5 breakpoints. Chaque breakpoint supplémentaire multiplie la complexité du CSS.

Typographie responsive

La règle du 16px minimum

Ne jamais descendre sous 16px pour le texte de corps sur mobile. Le zoom sur iPhone se déclenche sous 16px sur les inputs — irritant pour l'utilisateur.

/* ✅ Typographie fluide avec clamp() */
html {
  font-size: 16px; /* Base mobile */
}

h1 {
  /* Se redimensionne entre 28px (mobile) et 56px (desktop) */
  font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem);
  line-height: 1.15;
}

h2 {
  font-size: clamp(1.4rem, 3vw + 0.5rem, 2.2rem);
  line-height: 1.25;
}

p, li {
  font-size: clamp(1rem, 0.9rem + 0.25vw, 1.125rem);
  line-height: 1.75;
}

Espacement vertical mobile

Sur mobile, l'espacement doit être plus compact qu'en desktop :

.section {
  padding: 48px 0; /* Mobile */
}

@media (min-width: 768px) {
  .section {
    padding: 80px 0; /* Tablette */
  }
}

@media (min-width: 1024px) {
  .section {
    padding: 120px 0; /* Desktop */
  }
}

Navigation mobile : les patterns qui marchent

Bottom navigation vs Hamburger

Le hamburger menu (les 3 lignes) est partout, mais ce n'est pas toujours la meilleure solution. Comparaison :

/* Bottom navigation mobile-friendly */
.nav-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.1);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding-bottom: env(safe-area-inset-bottom); /* iPhone notch */
  z-index: 1000;
}

.nav-bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 4px 8px;
  font-size: 10px;
  color: #9ca3af;
  text-decoration: none;
  gap: 4px;
}

.nav-bottom-item.active {
  color: var(--primary);
}

.nav-bottom-item i {
  font-size: 22px;
}

Zones tactiles

Apple et Google recommandent une taille minimale de 44x44px pour les zones tactiles (boutons, liens, icônes).

/* Agrandir la zone de clic sans modifier l'apparence visuelle */
.btn-icon {
  width: 24px;
  height: 24px;
  position: relative;
}

.btn-icon::after {
  content: '';
  position: absolute;
  inset: -10px; /* Zone de tap agrandie à 44x44px */
}

/* Plus simple avec padding */
.nav-link {
  padding: 12px 16px;
  min-height: 44px;
  display: flex;
  align-items: center;
}

Images et médias responsives

L'élément pour les images artistiques

Quand l'image doit être différente selon l'écran (pas juste redimensionnée) :

<picture>
  <!-- Mobile : image carrée recadrée sur le visage -->
  <source media="(max-width: 767px)"
          srcset="/equipe-portrait-400.webp 400w,
                  /equipe-portrait-800.webp 800w"
          sizes="100vw">
  <!-- Desktop : image paysage avec décor -->
  <source media="(min-width: 768px)"
          srcset="/equipe-paysage-800.webp 800w,
                  /equipe-paysage-1600.webp 1600w"
          sizes="50vw">
  <!-- Fallback -->
  <img src="/equipe-paysage-800.webp" alt="L'équipe de Benjamin Schweitzer" loading="lazy">
</picture>

Vidéos responsives

/* Ratio 16:9 garanti sur tous les écrans */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 9/16 = 56.25% */
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Formulaires mobile-friendly

Les formulaires sont le point de friction numéro 1 sur mobile. Quelques règles :

<!-- Déclencher le bon clavier sur mobile -->
<input type="email" placeholder="Email">
<!-- → Clavier avec @ et .com sur iOS/Android -->

<input type="tel" placeholder="Téléphone">
<!-- → Pavé numérique -->

<input type="number" inputmode="decimal" placeholder="Prix">
<!-- → Pavé numérique avec virgule décimale -->

<!-- Éviter le zoom automatique sur iOS -->
<input type="text" style="font-size: 16px">
<!-- iOS zoome si font-size < 16px sur les inputs -->

/* Styles mobile-optimisés pour les champs */
.form-input {
  height: 52px; /* Facilement tappable */
  font-size: 16px; /* Évite le zoom iOS */
  padding: 0 16px;
  border-radius: 10px;
  border: 2px solid #e5e7eb;
  width: 100%;
  -webkit-appearance: none; /* Évite les styles iOS natifs */
  appearance: none;
}

/* Feedback visuel clair */
.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(46,86,147,.15);
}

Performance mobile : le budget de 200Ko

Sur réseau 3G (encore majoritaire dans certaines zones), chaque Ko compte. Visez un Time to Interactive < 5 secondes sur 3G lent.

# Analyser la taille de vos assets avec webpack-bundle-analyzer
npx webpack-bundle-analyzer dist/stats.json

# Budget de performance recommandé
# HTML : < 20 Ko
# CSS critique (inline) : < 15 Ko
# JavaScript initial : < 100 Ko (gzippé)
# Images above-the-fold : < 100 Ko
# Total above-the-fold : < 200 Ko

Pour mesurer votre site sur une connexion mobile simulée :

1. Chrome DevTools → Network → "Slow 3G"
2. Recharger la page (Ctrl+Shift+R)
3. Vérifier le temps de chargement