Le responsive n’est pas une option — c’est la réalité du web africain

Au Sénégal et en Afrique de l’Ouest, 70 à 80 % du trafic web provient de smartphones. Les visiteurs naviguent sur des écrans de 5 à 6,5 pouces, souvent en connexion 3G ou 4G instable. Un site qui n’est pas responsive — c’est-à-dire qui ne s’adapte pas automatiquement à toutes les tailles d’écran — perd la majorité de son audience dès la première visite.

Le design responsive repose sur 3 piliers techniques : les media queries CSS, les unités relatives et les layouts flexibles (Flexbox et Grid). Maîtrisez ces trois éléments et vous pourrez créer n’importe quel site adaptatif.

Le viewport meta tag : le prérequis absolu

Sans cette balise dans votre <head>, rien ne fonctionne sur mobile :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Cette balise dit au navigateur mobile : « utilise la largeur réelle de l’écran, pas une émulation desktop de 980px ». Sans elle, votre site s’affiche en miniature sur smartphone, obligeant l’utilisateur à zoomer.

Les media queries : adapter le CSS selon l’écran

Les breakpoints standards

/* Mobile first : les styles de base sont pour mobile */
.container {
    padding: 16px;
    max-width: 100%;
}

/* Tablette (768px et plus) */
@media (min-width: 768px) {
    .container {
        padding: 24px;
        max-width: 720px;
        margin: 0 auto;
    }
}

/* Desktop (1024px et plus) */
@media (min-width: 1024px) {
    .container {
        padding: 32px;
        max-width: 960px;
    }
}

/* Grand écran (1280px et plus) */
@media (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }
}

L’approche Mobile First

Écrivez d’abord le CSS pour mobile (le plus petit écran), puis ajoutez des règles pour les écrans plus grands avec min-width. C’est l’approche recommandée car :

Elle force à prioriser le contenu essentiel (sur mobile, chaque pixel compte)
Les appareils mobiles téléchargent uniquement le CSS dont ils ont besoin
Google utilise le « mobile-first indexing » — il évalue votre site par sa version mobile

Flexbox : la base des layouts modernes

Flexbox gère la disposition des éléments sur un axe (horizontal ou vertical). C’est l’outil idéal pour les barres de navigation, les cartes en rangée et les alignements.

Barre de navigation responsive

/* Mobile : menu empilé verticalement */
.nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-item {
    padding: 12px 16px;
    text-align: center;
}

/* Desktop : menu en ligne */
@media (min-width: 768px) {
    .nav {
        flex-direction: row;
        justify-content: center;
        gap: 24px;
    }
}

Grille de cartes produits

.products {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.product-card {
    /* Mobile : 1 par ligne (100%) */
    flex: 1 1 100%;
}

@media (min-width: 640px) {
    .product-card {
        /* Tablette : 2 par ligne */
        flex: 1 1 calc(50% - 8px);
    }
}

@media (min-width: 1024px) {
    .product-card {
        /* Desktop : 3 par ligne */
        flex: 1 1 calc(33.333% - 11px);
    }
}

CSS Grid : pour les mises en page complexes

CSS Grid gère la disposition sur deux axes (lignes et colonnes). C’est l’outil pour les layouts de page complets.

Layout page complète

.page-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

/* Desktop : sidebar + contenu */
@media (min-width: 1024px) {
    .page-layout {
        grid-template-columns: 280px 1fr;
    }
}

La puissance de auto-fit et minmax

La ligne de CSS la plus puissante pour le responsive — une grille qui s’adapte automatiquement sans media query :

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

Cette règle signifie : « crée autant de colonnes que possible, chacune d’au moins 280px. Si l’écran est trop petit pour 2 colonnes de 280px, passe à 1 colonne. » Aucune media query nécessaire — le navigateur fait le calcul.

Les unités relatives : rem, em, vw, vh, clamp()

rem vs px

1rem = la taille de police du <html> (16px par défaut). Utilisez rem pour les tailles de police, les paddings et les margins. L’avantage : si l’utilisateur zoom le texte dans son navigateur, tout s’adapte proportionnellement.

clamp() : le responsive sans media queries

clamp(min, idéal, max) définit une valeur qui s’adapte à l’écran avec des limites :

/* Titre qui va de 24px (mobile) à 48px (desktop) */
h1 {
    font-size: clamp(1.5rem, 4vw, 3rem);
}

/* Padding qui s'adapte */
.section {
    padding: clamp(1rem, 3vw, 4rem);
}

/* Container avec largeur max */
.container {
    width: clamp(300px, 90vw, 1200px);
    margin: 0 auto;
}

Images responsives

L’image de base

img {
    max-width: 100%;
    height: auto;
    display: block;
}

Ces 3 propriétés empêchent les images de déborder de leur conteneur et maintiennent les proportions.

Servir la bonne taille d’image selon l’écran

<img srcset="product-400.jpg 400w,
             product-800.jpg 800w,
             product-1200.jpg 1200w"
     sizes="(max-width: 640px) 100vw,
            (max-width: 1024px) 50vw,
            33vw"
     src="product-800.jpg"
     alt="Description du produit">

Le navigateur choisit automatiquement l’image la plus adaptée à l’écran et à la connexion. Sur mobile 3G, il charge la version 400px (légère). Sur desktop Retina, il charge la 1200px (nette).

Tester le responsive

Chrome DevTools

Ouvrez votre site dans Chrome
F12 pour ouvrir les DevTools
Cliquez sur l’icône 📱 Toggle device toolbar (ou Ctrl+Shift+M)
Sélectionnez un appareil (iPhone SE, Samsung Galaxy S20, iPad) ou entrez une largeur personnalisée
Testez toutes les interactions : navigation, formulaires, scroll

Appareils réels

Les émulateurs ne sont pas parfaits. Testez sur au moins 2 appareils réels :

Un smartphone d’entrée de gamme (Samsung Galaxy A, Tecno, Itel) — ce que la majorité des utilisateurs africains utilisent
Un iPhone ou Samsung Galaxy haut de gamme — pour vérifier l’affichage Retina

Erreurs responsive les plus courantes

Texte trop petit sur mobile : le corps de texte doit être au minimum 16px. En dessous, le navigateur mobile zoom automatiquement sur les champs de formulaire, ce qui casse la mise en page
Éléments qui débordent horizontalement : testez en scrollant horizontalement. Si une barre de scroll horizontale apparaît, un élément est trop large. Souvent causé par une image sans max-width: 100% ou une table fixe
Boutons trop petits ou trop proches : la taille minimum tactile est 44x44px (recommandation Apple/Google) avec au moins 8px d’espacement entre les éléments cliquables
Navigation non adaptée : un menu avec 7 items en ligne ne tient pas sur un écran de 360px. Utilisez un menu hamburger sur mobile
Contenu caché sur mobile : évitez display: none sur du contenu important. Réorganisez plutôt la mise en page pour que tout soit visible

Guide pratique : Le design responsive — principes et techniques