Conception mobile-first

Qu'est-ce que la conception mobile-first ?

La conception mobile-first est une approche où l'on conçoit et construit d'abord pour le plus petit écran, puis où l'on ajoute mise en page et fonctions à mesure que l'écran s'élargit. La base est une page simple, sur une colonne, avec ce dont un visiteur sur mobile a besoin. Les grands écrans sont une amélioration ajoutée par-dessus, et non le point de départ qu'on comprime ensuite.

Comment ça marche

Côté conception, on part de la tâche principale : que doit pouvoir faire ou lire un visiteur sur un petit écran ? Côté code, le CSS de base décrit cette mise en page étroite, et les media queries min-width ajoutent des colonnes et des extras dès qu'il y a de la place. MDN décrit l'idée ainsi : une mise en page simple sur une colonne pour les écrans étroits, puis plusieurs colonnes quand la largeur le permet. La page a aussi besoin de la balise meta viewport, sinon les téléphones l'affichent à une largeur de bureau et la réduisent. Voir viewport.

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

/* base styles: one column, for every screen */
.cards { display: grid; gap: 1rem; }

/* wider screens get more */
@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

L'approche inverse, desktop-first, écrit d'abord la mise en page complète puis la défait avec des requêtes max-width sur les petits écrans. Les téléphones téléchargent alors souvent du CSS qu'ils n'utilisent jamais.

Pourquoi les équipes la choisissent

• Priorités claires. Un petit écran oblige à hiérarchiser contenus et actions, ce qui améliore souvent aussi la version bureau.
• Moins de charge sur les appareils modestes. MDN rappelle que les mobiles restent limités par la batterie et la bande passante, et qu'une seule grande image servie à tous les appareils gaspille de la bande passante. Servir des images à la bonne taille et charger tard les médias situés plus bas aide ; voir taille d'image et chargement différé.
• Recherche. Google indique utiliser la version mobile du contenu, explorée avec l'agent smartphone, pour l'indexation et le classement, et demande que le site mobile contienne le même contenu que le site de bureau.

Exemple

Une page de réservation. Sur mobile, on voit le sélecteur de dates, le prix et un bouton, sur une colonne. À partir de 700 px apparaît une colonne latérale avec des photos et la liste des chambres. Rien n'a été retiré de la version bureau : la version mobile a simplement été construite en premier, puis étendue.

Erreurs courantes

• Bloquer le zoom. user-scalable=no dans la balise viewport empêche les personnes malvoyantes d'agrandir le texte. Selon MDN, WCAG exige au moins un agrandissement de 2x, et certains navigateurs ignorent ce réglage de toute façon.
• Masquer du contenu sur mobile. Supprimer du texte ou des sections sur petit écran peut coûter du trafic, car Google indexe la version mobile. Réorganisez plutôt avec des onglets ou des accordéons.
• Ressources de bureau sur mobile. Une image d'en-tête de 2 000 px servie à tous les appareils annule l'avantage. Utilisez srcset et sizes.
• Interactions au survol uniquement. Les menus et infobulles qui exigent un survol à la souris n'ont pas d'équivalent tactile.
• N'y voir qu'une astuce de mise en page. Si la version mobile est lente, la mise en page n'y change rien. Mesurez-la.

Mobile-first, design responsive et indexation mobile-first

Ces notions sont liées mais distinctes. Le design responsive signifie qu'une page s'adapte à n'importe quel écran. Le mobile-first est l'ordre dans lequel on construit une page responsive. L'indexation mobile-first décrit la façon dont Google explore le web : cela concerne la recherche, pas la façon d'écrire votre CSS.

Mobile-first, tests et surveillance

Une page mobile-first doit quand même être rapide sur de vrais téléphones. Vérifiez les Core Web Vitals avec un profil mobile, car les décalages de mise en page et les images lentes s'y voient en premier, et recommencez après chaque version. Le vérificateur gratuit de Core Web Vitals donne une mesure rapide pour une URL, et la surveillance de la vitesse de page de LoadFocus lance des audits Lighthouse planifiés depuis des régions cloud, avec l'appareil de votre choix pour chaque moniteur. Pour le contexte métier, lisez notre article sur les tests de performance pour les entreprises mobile-first et la comparaison des tests de performance mobile dans le cloud et en local. Une bonne mise en page mobile sert aussi l'expérience utilisateur dans son ensemble.

Questions fréquentes

Mobile-first, est-ce la même chose que le design responsive ?

Non. Le design responsive signifie qu'une page s'adapte à différentes tailles d'écran. Le mobile-first est une manière de le construire : on écrit d'abord la version petit écran, puis on ajoute des mises en page plus larges avec des media queries min-width.

Faut-il des media queries min-width pour un CSS mobile-first ?

C'est le schéma habituel. Les styles de base sont ceux du mobile, et les requêtes min-width ajoutent des styles pour les écrans plus larges. La syntaxe par plage, comme width >= 700px, signifie la même chose.

Quelle balise meta viewport utiliser ?

MDN recommande width=device-width. Beaucoup de sites ajoutent initial-scale=1, généralement facultatif mais qui fixe le zoom initial à 100 %. Évitez user-scalable=no et maximum-scale, qui peuvent bloquer le zoom.

La conception mobile-first aide-t-elle le SEO ?

Indirectement. Google indexe la version mobile de votre contenu : il voit donc une page mobile complète et rapide. L'approche de conception n'est pas en soi un facteur de classement.

Le desktop-first est-il parfois pertinent ?

Pour des outils utilisés presque uniquement sur grand écran, comme des tableaux de bord denses, c'est possible. Même alors, la page doit rester utilisable sur un téléphone.