Mobile first : définition et mise en pratique en design et en CSS

Le mobile first consiste à concevoir et à intégrer un site d’abord pour le plus petit écran, puis à ajouter colonnes et fonctionnalités à mesure que l’espace augmente. En CSS, les styles par défaut décrivent la version smartphone, et des media queries en min-width ajoutent la mise en page des écrans plus larges. Cette approche oblige à décider ce qui compte vraiment et donne en général des pages plus légères et plus rapides pour les visiteurs qui ont le moins de bande passante et d’espace à l’écran.

Le mobile first comme démarche de conception

L’idée, popularisée par le designer Luke Wroblewski entre 2009 et 2011, parle de priorités avant de parler de code. Un écran de téléphone affiche sans défilement un titre, une phrase et une action. Partir de cet espace oblige à décider :

• quelle est l’action la plus importante de la page ;
• quel contenu est indispensable et lequel est décoratif ;
• dans quel ordre les éléments doivent apparaître sur une seule colonne.

Quand la maquette s’élargit ensuite à la tablette et au desktop, l’espace supplémentaire sert au contenu secondaire, pas à ce qui manquait sur mobile. Les équipes qui partent d’une maquette desktop finissent souvent par réduire et masquer des blocs, et c’est ainsi que des informations importantes disparaissent sur smartphone.

Mobile first et desktop first en CSS

La même mise en page peut s’écrire dans les deux sens.

Desktop first définit la mise en page large par défaut et retire des éléments avec des requêtes max-width :

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

@media (max-width: 1023px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .cards { grid-template-columns: 1fr; gap: 1rem; }
}

Mobile first définit une seule colonne par défaut et ajoute avec des requêtes min-width :

.cards { display: grid; gap: 1rem; }

@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

La version mobile first a des avantages concrets. Sur téléphone, seules les règles de base s’appliquent et le navigateur a moins de surcharges à résoudre. Les styles s’additionnent au lieu de s’annuler, ce qui rend le CSS plus lisible. Et les navigateurs ou clients e-mail qui ignorent les media queries affichent une colonne utilisable plutôt qu’une page desktop écrasée.

Les frameworks suivent la même logique : dans Tailwind CSS comme dans Bootstrap, les classes sans préfixe s’appliquent à toutes les tailles, et les préfixes de breakpoint signifient « à partir de cette largeur ».

Le mobile first, c’est aussi la performance

Un téléphone sur une connexion faible ne devrait pas télécharger ce dont seul le desktop a besoin. En pratique :

• servir de petites images par défaut et les plus grandes via srcset ;
• ne charger les composants lourds (cartes, vidéos d’arrière-plan, grands carrousels) que lorsqu’ils sont utiles ;
• garder le JavaScript des fonctions réservées au desktop hors du bundle initial.

Google indexe la version mobile des pages : c’est donc l’expérience mobile que le moteur évalue. Pour mesurer le résultat, voir le guide du test de vitesse mobile.

Appliquer le mobile first sur un vrai projet

1. Commencez par la hiérarchie du contenu. Avant tout design visuel, listez le contenu de la page sur une colonne, par ordre de priorité.
2. Dessinez la maquette en 360–390 px. La plupart des téléphones en circulation mesurent entre 360 et 440 pixels CSS de large.
3. Élargissez aux breakpoints naturels. Étirez le canevas jusqu’à ce que la mise en page paraisse distendue et placez un breakpoint à cet endroit. Les valeurs courantes sont dans le guide des breakpoints responsive.
4. Écrivez le CSS dans le même ordre. Styles de base pour les téléphones, requêtes min-width pour le reste.
5. Testez les tailles de téléphone pendant le développement, pas à la fin. Garder une vue mobile ouverte dans Chrome aide beaucoup : le mode appareil des DevTools fonctionne, tout comme Mobile View Extension, qui s’active en un clic et garde le cadre du téléphone quand vous changez de page.

Les erreurs fréquentes du mobile first

• Le mobile first uniquement dans le CSS. Si la maquette a été finalisée sur desktop, écrire le CSS en mobile first ne règle pas le problème de priorité du contenu.
• Considérer « mobile » comme une seule taille. Un téléphone de 360 px et un autre de 440 px diffèrent de 20 %. Testez les deux, et le mode paysage.
• Masquer le contenu au lieu de le réorganiser. Si un bloc ne mérite pas d’être affiché sur téléphone, demandez-vous s’il mérite d’être affiché tout court.
• Oublier le tactile sur grand écran. Tablettes et portables tactiles affichent la mise en page desktop mais n’ont pas de survol. Réservez les effets au survol avec @media (hover: hover).
• Mobile first, desktop en dernier. Les grands écrans demandent aussi du soin : des lignes de texte trop longues et des images étirées sont l’échec du même processus, côté desktop.

Questions fréquentes

Quelle différence entre mobile first et responsive design ?

Le responsive design est l’objectif : un seul site qui s’adapte à tous les écrans. Le mobile first est une façon d’y arriver, en partant du plus petit écran. Voir qu’est-ce que le responsive design.

Faut-il toujours utiliser des media queries en min-width ?

Pour la plupart des mises en page, oui. Les requêtes max-width restent utiles pour de petites exceptions, comme un ajustement qui ne s’applique qu’en dessous d’une largeur.

Le mobile first est-il encore pertinent en 2026 ?

Oui. Les téléphones représentent une grande part du trafic de la plupart des sites, et Google indexe la version mobile des pages. Partir du mobile évite à ces visiteurs une version au rabais de votre site.