Pendant longtemps, un site web se concevait d'abord pour un écran d'ordinateur, et le mobile arrivait après, comme une version dégradée qu'on adaptait tant bien que mal. Le mobile first inverse cette habitude : le CSS de base est écrit pour le plus petit écran, et chaque Media query ajoutée sert ensuite à enrichir la mise en page à mesure que l'écran grandit.
Ce choix n'est pas qu'une question d'ordre d'écriture. Il change la façon même de penser une page, en obligeant à décider ce qui est vraiment essentiel avant de décider ce qui peut s'ajouter en plus.
Définition
Écrire en mobile first, c'est placer hors de toute media query le CSS pensé pour le plus petit écran, puis utiliser des media queries en min-width pour ajouter de la complexité à mesure que la largeur disponible augmente : plus de colonnes, une navigation horizontale plutôt qu'un menu replié, des marges plus généreuses.
L'ordre historique inverse : le desktop-first
L'approche opposée, le desktop-first, écrit le CSS complet pour un grand écran puis retire de la complexité avec des media queries en max-width à mesure que l'écran rétrécit. Le tableau met les deux logiques face à face.
| Desktop first | Mobile first |
|---|---|
| Le style de base cible le grand écran | Le style de base cible le petit écran |
Les media queries utilisent max-width | Les media queries utilisent min-width |
| Chaque media query retire de la complexité | Chaque media query en ajoute |
| Le mobile hérite d'un style pensé pour autre chose | Le mobile reçoit le style pensé pour lui |
Exemple concret
Une grille de trois cartes commence en une seule colonne empilée, la disposition la plus simple à lire sur un écran étroit, puis passe à deux puis trois colonnes à mesure que la largeur augmente.
.grille {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 600px) {
.grille {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 900px) {
.grille {
grid-template-columns: 1fr 1fr 1fr;
}
}Aucune ligne ne redéfinit l'espacement ou la disposition en une seule colonne : ces valeurs sont posées une fois, dans le style de base, et restent valables partout où aucune media query ne vient les remplacer. Notre formation HTML et CSS construit cette même grille en mobile first, colonne par colonne, jusqu'au breakpoint qui ajoute la troisième carte.
Le piège classique
L'erreur la plus courante consiste à écrire quand même le CSS en pensant au grand écran, puis à empiler des media queries en min-width qui ne font que défaire ce qui vient d'être posé. Le résultat ressemble au mobile first dans sa syntaxe, mais garde la logique du desktop-first dans son raisonnement, et perd l'essentiel du bénéfice : décider en premier ce qui compte vraiment sur le plus petit écran.
min-width doit annuler une propriété plutôt que la faire évoluer, c'est souvent le signe que le style de base a été pensé pour le grand écran malgré tout. Repartez du plus simple, sans media query, et n'ajoutez que ce qui manque réellement en montant en largeur.Pourquoi cette approche a fini par s'imposer
Le trafic mobile a dépassé le trafic ordinateur sur la majorité des sites, ce qui rend absurde le fait de concevoir d'abord pour la minorité. Le mobile first pousse aussi à choisir des Unités CSS fluides et un contenu réellement prioritaire, deux habitudes qui profitent au site entier et pas seulement à sa version la plus étroite : un Breakpoint mal placé se remarque tout de suite quand le point de départ est le strict nécessaire.
Questions fréquentes
Non, il s'agit d'un ordre d'écriture du CSS, pas d'un ordre de test. Le site doit être vérifié sur toutes les tailles visées, mobile first signifie seulement que le style par défaut, celui écrit sans aucune media query, correspond au plus petit écran.
Non. Un outil interne consulté uniquement sur un poste fixe n'a aucune raison de partir du mobile. L'approche vaut surtout pour un site public, où la part du trafic mobile justifie de traiter ce cas comme le cas normal plutôt que comme une exception.
min-width et max-width dans le même projet ?Techniquement oui, mais mélanger les deux logiques dans les mêmes composants rend le CSS difficile à suivre : une propriété peut alors être modifiée par une media query qui ajoute et une autre qui retire, sans qu'il soit évident laquelle s'applique en dernier.