Design responsive : Mobile-first et breakpoints

Introduction

En 2024, plus de 60% du trafic web mondial provient d’appareils mobiles. Le design responsive n’est plus une option, c’est une nécessité. Google privilégie les sites mobile-friendly dans son classement, et les utilisateurs abandonnent les sites non optimisés en moins de 3 secondes.

Dans cet article, vous découvrirez l’approche mobile-first, comprendrez le système de breakpoints, et apprendrez à créer des interfaces qui s’adaptent parfaitement à tous les écrans.

Qu’est-ce que le design responsive ?

Le design responsive est une approche qui permet à un site web de s’adapter automatiquement à la taille de l’écran de l’utilisateur, qu’il utilise un smartphone, une tablette, un ordinateur portable ou un grand écran desktop.

Les trois piliers du responsive

1. Grilles fluides (Fluid Grids)

Des layouts basés sur des pourcentages plutôt que des pixels fixes.

/* Mauvais exemple - Largeurs fixes */
.container-bad {
  width: 960px;  /* Ne s'adapte pas */
}

.sidebar-bad {
  width: 300px;  /* Rigide */
}

/* Bon exemple - Largeurs fluides */
.container-good {
  width: 90%;
  max-width: 1200px;  /* Limite sur grands écrans */
  margin: 0 auto;
  padding: 0 1rem;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Les colonnes s'adaptent automatiquement */
.card {
  background: #ffffff;
  padding: 1.5rem;
  border-radius: 0.5rem;
}

2. Images flexibles

Images qui s’adaptent à leur conteneur.

/* Images responsive de base */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Image avec ratio préservé */
.image-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;  /* Ratio 16:9 (9/16 * 100) */
  overflow: hidden;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Remplit le conteneur en gardant le ratio */
}

/* Images responsive modernes avec aspect-ratio */
.modern-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 0.5rem;
}

/* Images adaptatives (différentes images selon l'écran) */

<picture>
  <!-- Image pour grands écrans -->
  <source media="(min-width: 1024px)" srcset="hero-desktop.jpg">
  <!-- Image pour tablettes -->
  <source media="(min-width: 768px)" srcset="hero-tablet.jpg">
  <!-- Image par défaut pour mobile -->
  <img src="hero-mobile.jpg" alt="Hero image" class="responsive-img">
</picture>

3. Media queries

Règles CSS qui s’appliquent selon les caractéristiques de l’appareil.

/* Media query de base */
.element {
  font-size: 1rem;
  padding: 1rem;
}

@media (min-width: 768px) {
  .element {
    font-size: 1.125rem;
    padding: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .element {
    font-size: 1.25rem;
    padding: 2rem;
  }
}

L’approche Mobile-First

Pourquoi mobile-first ?

Avantages :

• Performance : Chargez d’abord le minimum, ajoutez pour les écrans plus grands
• Priorité au contenu : Force à identifier l’essentiel
• Progressive Enhancement : Amélioration progressive de l’expérience
• SEO : Google indexe la version mobile en priorité
• Réalité du marché : La majorité des utilisateurs sont sur mobile

Desktop-first vs Mobile-first

/* DESKTOP-FIRST (approche traditionnelle - à éviter) */
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 4 colonnes par défaut */
  gap: 2rem;
  padding: 3rem;
  font-size: 1.125rem;
}

/* On retire des fonctionnalités en descendant */
@media (max-width: 1024px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
    padding: 2rem;
  }
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    padding: 1rem;
    font-size: 1rem;
  }
}

/* MOBILE-FIRST (approche moderne - recommandée) */
.container {
  display: grid;
  grid-template-columns: 1fr;  /* 1 colonne par défaut (mobile) */
  gap: 1rem;
  padding: 1rem;
  font-size: 1rem;
}

/* On ajoute des fonctionnalités en montant */
@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 3rem;
    font-size: 1.125rem;
  }
}

HTML de base responsive

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">

  <!-- ESSENTIEL : Viewport meta tag -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Prévenir le zoom automatique sur iOS lors du focus sur input -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <title>Site Responsive</title>
</head>
<body>
  <!-- Votre contenu -->
</body>
</html>

Attention : Sans <meta name="viewport">, votre site s’affichera comme si l’écran faisait 980px sur mobile !

Système de breakpoints

Breakpoints standards

Les breakpoints sont les points de rupture où le design s’adapte. Voici les standards de l’industrie :

/* Système de breakpoints moderne (basé sur Tailwind CSS) */
:root {
  /* Mobile first : pas de breakpoint pour mobile */
  --screen-sm: 640px;   /* Petites tablettes */
  --screen-md: 768px;   /* Tablettes */
  --screen-lg: 1024px;  /* Desktop */
  --screen-xl: 1280px;  /* Large desktop */
  --screen-2xl: 1536px; /* Très large desktop */
}

/* Usage */
/* Mobile (défaut) : 0-639px */
.element {
  padding: 1rem;
  font-size: 0.875rem;
}

/* Small (sm) : 640px+ */
@media (min-width: 640px) {
  .element {
    padding: 1.25rem;
    font-size: 1rem;
  }
}

/* Medium (md) : 768px+ */
@media (min-width: 768px) {
  .element {
    padding: 1.5rem;
    font-size: 1rem;
  }
}

/* Large (lg) : 1024px+ */
@media (min-width: 1024px) {
  .element {
    padding: 2rem;
    font-size: 1.125rem;
  }
}

/* Extra Large (xl) : 1280px+ */
@media (min-width: 1280px) {
  .element {
    padding: 2.5rem;
    font-size: 1.125rem;
  }
}

/* 2XL : 1536px+ */
@media (min-width: 1536px) {
  .element {
    padding: 3rem;
    font-size: 1.25rem;
  }
}

Breakpoints par catégorie d’appareil

/* APPROCHE PAR APPAREIL (moins flexible, mais parfois utile) */

/* Smartphones portrait : 320px - 479px */
@media (min-width: 320px) and (max-width: 479px) {
  .mobile-only {
    display: block;
  }
}

/* Smartphones paysage : 480px - 767px */
@media (min-width: 480px) and (max-width: 767px) {
  .mobile-landscape {
    display: flex;
  }
}

/* Tablettes portrait : 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .tablet-portrait {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablettes paysage et petits desktops : 1024px - 1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
  .tablet-landscape {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop standard : 1280px+ */
@media (min-width: 1280px) {
  .desktop {
    grid-template-columns: repeat(4, 1fr);
  }
}

Breakpoints personnalisés

Adaptez selon votre contenu, pas seulement selon les appareils.

/* Breakpoint basé sur le contenu */
.text-content {
  max-width: 100%;
  padding: 1rem;
}

/* À 600px, le texte devient trop large pour être confortable */
@media (min-width: 600px) {
  .text-content {
    max-width: 65ch;  /* 65 caractères max */
    margin: 0 auto;
  }
}

/* À 900px, on peut ajouter une sidebar */
@media (min-width: 900px) {
  .layout-with-sidebar {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
  }
}

Techniques responsive essentielles

1. Navigation responsive

<header class="site-header">
  <div class="header-container">
    <a href="/" class="logo">MonSite</a>

    <!-- Bouton hamburger (visible mobile uniquement) -->
    <button class="menu-toggle" aria-label="Menu" aria-expanded="false">
      <span class="hamburger"></span>
    </button>

    <!-- Navigation -->
    <nav class="main-nav">
      <ul class="nav-list">
- <a href="/services">Services</a>
- <a href="/portfolio">Portfolio</a>
- <a href="/blog">Blog</a>
- <a href="/contact">Contact</a>
    </nav>
  </div>
</header>

/* Mobile first : Menu empilé */
.site-header {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  text-decoration: none;
}

/* Menu hamburger visible sur mobile */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger {
  width: 24px;
  height: 2px;
  background: #1f2937;
  position: relative;
  transition: background 0.3s ease;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background: #1f2937;
  transition: transform 0.3s ease;
}

.hamburger::before {
  top: -8px;
}

.hamburger::after {
  bottom: -8px;
}

/* Animation hamburger en X */
.menu-toggle[aria-expanded="true"] .hamburger {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .hamburger::before {
  transform: rotate(45deg);
  top: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger::after {
  transform: rotate(-45deg);
  bottom: 0;
}

/* Navigation mobile : verticale et cachée par défaut */
.main-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.main-nav.is-open {
  max-height: 400px;
}

.nav-list {
  list-style: none;
  padding: 1rem;
  margin: 0;
}

.nav-list li {
  margin: 0;
}

.nav-list a {
  display: block;
  padding: 0.75rem 1rem;
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s ease;
}

.nav-list a:hover {
  background: #f3f4f6;
  color: #2563eb;
}

/* Tablette et desktop : Navigation horizontale */
@media (min-width: 768px) {
  .menu-toggle {
    display: none;  /* Cache le hamburger */
  }

  .main-nav {
    position: static;
    max-height: none;
    overflow: visible;
    border: none;
  }

  .nav-list {
    display: flex;
    gap: 0.5rem;
    padding: 0;
  }

  .nav-list a {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
  }
}

// JavaScript pour le menu mobile
const menuToggle = document.querySelector('.menu-toggle');
const mainNav = document.querySelector('.main-nav');

menuToggle.addEventListener('click', () => {
  const isOpen = menuToggle.getAttribute('aria-expanded') === 'true';
  menuToggle.setAttribute('aria-expanded', !isOpen);
  mainNav.classList.toggle('is-open');
});

2. Grilles responsive

/* Grille CSS moderne avec auto-fit */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

/* Les cartes s'adaptent automatiquement :
   - Mobile : 1 colonne (si largeur < 280px + gap)
   - Tablette : 2-3 colonnes
   - Desktop : 3-4 colonnes
   Sans media query ! */

/* Contrôle plus précis avec media queries */
.custom-grid {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

/* Mobile : 1 colonne */
.custom-grid {
  grid-template-columns: 1fr;
}

/* Tablette : 2 colonnes */
@media (min-width: 640px) {
  .custom-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

/* Desktop : 3 colonnes */
@media (min-width: 1024px) {
  .custom-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 2rem;
  }
}

/* Large desktop : 4 colonnes */
@media (min-width: 1280px) {
  .custom-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

3. Typographie responsive

/* Approche avec clamp() (moderne et recommandée) */
:root {
  /* Typographie fluide entre min et max */
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --font-size-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --font-size-4xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
}

body {
  font-size: var(--font-size-base);
  line-height: 1.6;
}

h1 {
  font-size: var(--font-size-4xl);
  line-height: 1.1;
}

h2 {
  font-size: var(--font-size-3xl);
  line-height: 1.2;
}

h3 {
  font-size: var(--font-size-2xl);
  line-height: 1.3;
}

/* Approche traditionnelle avec media queries */
.traditional-heading {
  font-size: 2rem;  /* Mobile : 32px */
  line-height: 1.2;
}

@media (min-width: 768px) {
  .traditional-heading {
    font-size: 2.5rem;  /* Tablette : 40px */
  }
}

@media (min-width: 1024px) {
  .traditional-heading {
    font-size: 3.5rem;  /* Desktop : 56px */
  }
}

@media (min-width: 1280px) {
  .traditional-heading {
    font-size: 4rem;  /* Large desktop : 64px */
  }
}

4. Espacement responsive

/* Système d'espacement adaptatif */
:root {
  /* Mobile */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 1.5rem;   /* 24px */
  --space-lg: 2rem;     /* 32px */
  --space-xl: 3rem;     /* 48px */
  --space-2xl: 4rem;    /* 64px */
}

@media (min-width: 768px) {
  :root {
    /* Tablette : espacements légèrement augmentés */
    --space-md: 2rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
  }
}

@media (min-width: 1024px) {
  :root {
    /* Desktop : espacements généreux */
    --space-md: 2.5rem;
    --space-lg: 3rem;
    --space-xl: 5rem;
    --space-2xl: 8rem;
  }
}

/* Utilisation */
.section {
  padding: var(--space-lg) var(--space-sm);
}

.card {
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

5. Masquer/Afficher selon l’écran

/* Classes utilitaires pour masquer/afficher */

/* Masquer sur mobile, afficher sur desktop */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }
}

/* Afficher sur mobile, masquer sur desktop */
.show-mobile {
  display: block;
}

@media (min-width: 768px) {
  .show-mobile {
    display: none;
  }
}

/* Masquer sur tablette uniquement */
@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet {
    display: none;
  }
}

/* Exemple d'utilisation */

<div class="contact-section">
  <!-- Numéro cliquable sur mobile -->
  <a href="tel:+33123456789" class="show-mobile">
    📞 Appelez-nous
  </a>

  <!-- Numéro simple sur desktop -->
  <p class="hide-mobile">
    Téléphone : 01 23 45 67 89
  </p>
</div>

Mise en pratique : Page responsive complète

Créons une landing page responsive de A à Z.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Design Responsive - Landing Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Header avec navigation responsive -->
  <header class="header">
    <div class="container">
      <div class="header-content">
        <a href="/" class="logo">DesignPro</a>

        <button class="menu-toggle" aria-label="Menu" aria-expanded="false">
          <span class="hamburger"></span>
        </button>

        <nav class="nav">
          <ul class="nav-list">
- <a href="#services">Services</a>
- <a href="#portfolio">Portfolio</a>
- <a href="#pricing">Tarifs</a>
- <a href="#contact" class="nav-cta">Contact</a>
        </nav>
      </div>
    </div>
  </header>

  <!-- Hero Section -->
  <section class="hero">
    <div class="container">
      <div class="hero-grid">
        <div class="hero-content">
          <h1 class="hero-title">
            Créez des designs <span class="highlight">inoubliables</span>
          </h1>
          <p class="hero-subtitle">
            Transformez vos idées en interfaces web modernes, responsive et accessibles.
            Des designs qui convertissent et enchantent vos utilisateurs.
          </p>
          <div class="hero-actions">
            <a href="#demo" class="button button-primary">Démo gratuite</a>
            <a href="#learn" class="button button-secondary">En savoir plus</a>
          </div>

          <!-- Stats (cachées sur mobile) -->
          <div class="hero-stats hide-mobile">
            <div class="stat">
              **500+**
              <span>Clients satisfaits</span>
            </div>
            <div class="stat">
              **98%**
              <span>Taux de satisfaction</span>
            </div>
            <div class="stat">
              **24/7**
              <span>Support disponible</span>
            </div>
          </div>
        </div>

        <div class="hero-visual">
          <picture>
            <source media="(min-width: 1024px)" srcset="hero-desktop.jpg">
            <source media="(min-width: 768px)" srcset="hero-tablet.jpg">
            <img src="hero-mobile.jpg" alt="Design illustration" class="hero-image">
          </picture>
        </div>
      </div>
    </div>
  </section>

  <!-- Features Section -->
  <section class="features" id="services">
    <div class="container">
      <h2 class="section-title">Nos services</h2>
      <p class="section-subtitle">
        Des solutions complètes pour tous vos besoins en design web
      </p>

      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-icon">🎨</div>
          <h3 class="feature-title">Design UI/UX</h3>
          <p class="feature-description">
            Interfaces intuitives centrées sur l'expérience utilisateur.
          </p>
        </div>

        <div class="feature-card">
          <div class="feature-icon">📱</div>
          <h3 class="feature-title">Responsive Design</h3>
          <p class="feature-description">
            Sites parfaitement adaptés à tous les appareils.
          </p>
        </div>

        <div class="feature-card">
          <div class="feature-icon">⚡</div>
          <h3 class="feature-title">Performance</h3>
          <p class="feature-description">
            Optimisation pour des temps de chargement ultra-rapides.
          </p>
        </div>

        <div class="feature-card">
          <div class="feature-icon">♿</div>
          <h3 class="feature-title">Accessibilité</h3>
          <p class="feature-description">
            Conformité WCAG pour une expérience inclusive.
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="cta">
    <div class="container">
      <div class="cta-content">
        <h2 class="cta-title">Prêt à transformer votre présence en ligne ?</h2>
        <p class="cta-subtitle">
          Rejoignez plus de 500 clients satisfaits et démarquez-vous de la concurrence.
        </p>
        <a href="#contact" class="button button-large">Démarrer maintenant</a>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-col">
          #### DesignPro
          <p>Créer des expériences web exceptionnelles depuis 2020.</p>
        </div>

        <div class="footer-col">
          #### Services
- <a href="#">Design UI/UX</a>
- <a href="#">Développement</a>
- <a href="#">Consulting</a>
        </div>

        <div class="footer-col">
          #### Contact
- <a href="mailto:contact@designpro.be">contact@designpro.be</a>
- <a href="tel:+33123456789">01 23 45 67 89</a>
        </div>
      </div>

      <div class="footer-bottom">
        <p>&copy; 2024 DesignPro. Tous droits réservés.</p>
      </div>
    </div>
  </footer>

  <script src="script.js"></script>
</body>
</html>

/* styles.css - Mobile First Responsive */

/* Reset et configuration de base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Couleurs */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-text: #1f2937;
  --color-text-light: #6b7280;
  --color-bg: #ffffff;
  --color-bg-secondary: #f9fafb;
  --color-border: #e5e7eb;

  /* Espacements (mobile) */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;

  /* Typographie fluide */
  --font-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem);
  --font-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --font-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --font-3xl: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

/* HEADER - Navigation responsive */
.header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-sm) 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}

/* Menu hamburger (mobile) */
.menu-toggle {
  display: flex;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 101;
}

.hamburger {
  width: 24px;
  height: 2px;
  background: var(--color-text);
  position: relative;
  transition: background 0.3s ease;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  transition: transform 0.3s ease;
}

.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }

.menu-toggle[aria-expanded="true"] .hamburger {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .hamburger::before {
  transform: rotate(45deg);
  top: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger::after {
  transform: rotate(-45deg);
  bottom: 0;
}

/* Navigation mobile */
.nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 300px;
  height: 100vh;
  background: var(--color-bg);
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease;
  padding: 5rem 2rem 2rem;
  overflow-y: auto;
}

.nav.is-open {
  right: 0;
}

.nav-list {
  list-style: none;
}

.nav-list li {
  margin-bottom: var(--space-sm);
}

.nav-list a {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: background 0.2s ease;
}

.nav-list a:hover {
  background: var(--color-bg-secondary);
  color: var(--color-primary);
}

.nav-cta {
  background: var(--color-primary);
  color: #ffffff !important;
  margin-top: var(--space-md);
}

.nav-cta:hover {
  background: var(--color-primary-dark) !important;
}

/* HERO SECTION */
.hero {
  padding: var(--space-xl) 0;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}

.hero-grid {
  display: grid;
  gap: var(--space-lg);
}

.hero-title {
  font-size: var(--font-3xl);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.highlight {
  background: linear-gradient(135deg, var(--color-primary) 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: var(--font-lg);
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.75rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  text-align: center;
}

.button-primary {
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.button-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

.button-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.button-secondary:hover {
  background: var(--color-primary);
  color: #ffffff;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.stat {
  text-align: center;
}

.stat strong {
  display: block;
  font-size: var(--font-2xl);
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}

.stat span {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.hero-image {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* FEATURES SECTION */
.features {
  padding: var(--space-2xl) 0;
}

.section-title {
  font-size: var(--font-2xl);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--space-sm);
}

.section-subtitle {
  text-align: center;
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.features-grid {
  display: grid;
  gap: var(--space-md);
}

.feature-card {
  background: var(--color-bg);
  padding: var(--space-lg);
  border-radius: 0.75rem;
  border: 1px solid var(--color-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-sm);
}

.feature-title {
  font-size: var(--font-xl);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.feature-description {
  color: var(--color-text-light);
  line-height: 1.6;
}

/* CTA SECTION */
.cta {
  padding: var(--space-2xl) 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, #7c3aed 100%);
  color: #ffffff;
}

.cta-content {
  text-align: center;
}

.cta-title {
  font-size: var(--font-2xl);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.cta-subtitle {
  font-size: var(--font-lg);
  opacity: 0.9;
  margin-bottom: var(--space-lg);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.button-large {
  padding: 1.25rem 2.5rem;
  font-size: var(--font-lg);
  background: #ffffff;
  color: var(--color-primary);
}

.button-large:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}

/* FOOTER */
.footer {
  background: var(--color-text);
  color: #ffffff;
  padding: var(--space-xl) 0 var(--space-md);
}

.footer-grid {
  display: grid;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.footer-col h4 {
  margin-bottom: var(--space-sm);
  font-size: var(--font-lg);
}

.footer-col p {
  color: #9ca3af;
  line-height: 1.6;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 0.5rem;
}

.footer-col a {
  color: #d1d5db;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: #ffffff;
}

.footer-bottom {
  padding-top: var(--space-md);
  border-top: 1px solid #374151;
  text-align: center;
  color: #9ca3af;
  font-size: 0.875rem;
}

/* Masquer éléments sur mobile */
.hide-mobile {
  display: none;
}

/* TABLETTE : 768px+ */
@media (min-width: 768px) {
  :root {
    --space-md: 2rem;
    --space-lg: 3rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
  }

  .container {
    padding: 0 var(--space-md);
  }

  /* Menu horizontal */
  .menu-toggle {
    display: none;
  }

  .nav {
    position: static;
    width: auto;
    max-width: none;
    height: auto;
    background: none;
    box-shadow: none;
    padding: 0;
    overflow: visible;
  }

  .nav-list {
    display: flex;
    gap: 0.5rem;
  }

  .nav-list li {
    margin-bottom: 0;
  }

  .nav-cta {
    margin-top: 0;
  }

  /* Hero en 2 colonnes */
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-xl);
  }

  .hero-actions {
    flex-direction: row;
  }

  .hide-mobile {
    display: block;
  }

  /* Features en 2 colonnes */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  /* Footer en 3 colonnes */
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

/* DESKTOP : 1024px+ */
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1.2fr 1fr;
  }

  /* Features en 4 colonnes */
  .features-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* LARGE DESKTOP : 1280px+ */
@media (min-width: 1280px) {
  :root {
    --space-xl: 5rem;
    --space-2xl: 8rem;
  }
}

/* Préférence mouvement réduit (accessibilité) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

// script.js - Menu mobile
const menuToggle = document.querySelector('.menu-toggle');
const nav = document.querySelector('.nav');
const body = document.body;

menuToggle.addEventListener('click', () => {
  const isOpen = menuToggle.getAttribute('aria-expanded') === 'true';

  menuToggle.setAttribute('aria-expanded', !isOpen);
  nav.classList.toggle('is-open');

  // Empêcher le scroll quand le menu est ouvert
  body.style.overflow = isOpen ? '' : 'hidden';
});

// Fermer le menu en cliquant sur un lien
const navLinks = document.querySelectorAll('.nav-list a');
navLinks.forEach(link => {
  link.addEventListener('click', () => {
    menuToggle.setAttribute('aria-expanded', 'false');
    nav.classList.remove('is-open');
    body.style.overflow = '';
  });
});

// Fermer le menu avec Escape
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && nav.classList.contains('is-open')) {
    menuToggle.setAttribute('aria-expanded', 'false');
    nav.classList.remove('is-open');
    body.style.overflow = '';
  }
});

Tests et debugging responsive

Outils de développement

/* Helper pour visualiser les breakpoints en développement */
body::before {
  content: 'Mobile: < 640px';
  position: fixed;
  bottom: 0;
  right: 0;
  background: #ef4444;
  color: #ffffff;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  z-index: 9999;
  border-top-left-radius: 0.375rem;
}

@media (min-width: 640px) {
  body::before {
    content: 'Tablet: ≥ 640px';
    background: #f59e0b;
  }
}

@media (min-width: 768px) {
  body::before {
    content: 'Tablet: ≥ 768px';
    background: #10b981;
  }
}

@media (min-width: 1024px) {
  body::before {
    content: 'Desktop: ≥ 1024px';
    background: #3b82f6;
  }
}

@media (min-width: 1280px) {
  body::before {
    content: 'Large: ≥ 1280px';
    background: #8b5cf6;
  }
}

/* Retirer en production */

Checklist de tests

Outils recommandés

Erreurs courantes à éviter

1. Oublier la meta viewport

<!-- SANS CECI, VOTRE SITE NE SERA PAS RESPONSIVE -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Utiliser des largeurs fixes

/* MAL */
.container {
  width: 1200px;
}

/* BIEN */
.container {
  max-width: 1200px;
  width: 100%;
  padding: 0 1rem;
}

3. Ignorer les orientations

/* Adapter le design en mode paysage mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    padding: 2rem 0;  /* Réduire padding vertical */
  }

  .hero-title {
    font-size: 2rem;  /* Réduire titre */
  }
}

4. Tester uniquement sur desktop

Testez TOUJOURS sur de vrais appareils mobiles, pas seulement en mode device.

5. Négliger la performance mobile

<!-- Images responsive pour économiser la bande passante -->
<img
  srcset="image-320w.jpg 320w,
          image-640w.jpg 640w,
          image-960w.jpg 960w,
          image-1280w.jpg 1280w"
  sizes="(max-width: 640px) 100vw,
         (max-width: 1024px) 50vw,
         33vw"
  src="image-640w.jpg"
  alt="Description"
>

Conclusion

Le design responsive mobile-first est devenu la norme de l’industrie. En commençant par mobile et en ajoutant progressivement des fonctionnalités pour les écrans plus grands, vous créez des expériences optimales pour tous vos utilisateurs.

Points clés à retenir :

Prochaines étapes :

Le responsive design demande de la pratique, mais une fois maîtrisé, il devient une seconde nature. Chaque projet vous rendra plus efficace !

Ressources complémentaires :

À propos de l'auteur

Pascal

Pascal — SRE & Observability Engineer. J'applique les pratiques SRE (SLI/SLO, alerting, observabilité) à mon homelab Proxmox, avec les mêmes exigences qu'en production.

À propos nines.arewel.com LinkedIn GitHub X Tous les articles