Mobile First

Qu'est-ce que le Mobile First ?

Le Mobile First est une philosophie de conception web formulée par Luke Wroblewski en 2009. L'idée est simple. Au lieu de concevoir un site pour ordinateur puis de le réduire pour mobile, on part du mobile comme point de départ, et on enrichit l'interface progressivement pour les écrans plus grands.

Cette approche force à faire des choix. Sur un petit écran, l'espace est limité. On garde ce qui est essentiel, on supprime le superflu. Le résultat est souvent plus clair, plus rapide, et plus centré sur l'usage réel des visiteurs.

Mobile First Design vs Mobile-First Indexing

Ces deux termes se ressemblent mais ne désignent pas la même chose.

Google a commencé sa bascule vers l'indexation mobile en 2016, l'a étendue site par site à partir de 2018 et l'a achevée le 5 juillet 2024. Depuis cette date, il n'explore et n'indexe plus que la version mobile, pour tous les sites sans exception. Concrètement, si la version mobile est incomplète, c'est une page incomplète qui est indexée, y compris pour les visiteurs sur ordinateur. Un site conçu en Mobile First résout une grande partie du problème à la source, puisque la version mobile est la version de référence dès la maquette.

Bonnes pratiques de conception Mobile First

Voici ce que j'applique systématiquement sur les sites que je conçois ou audite :

• Prioriser le contenu essentiel : sur mobile, chaque élément doit justifier sa présence. Navigation simplifiée, appel à l'action visible sans scroll.
• Typographie lisible sans zoom : taille de texte minimale de 16 px pour le corps, interlignes suffisants.
• Zones tactiles généreuses : la norme WCAG 2.2 fixe un minimum de 24 pixels de côté, les audits Lighthouse de Google réclament 48 pixels, et Apple recommande 44 points. Je retiens 44 pixels pour les boutons et les liens de navigation, avec un espacement qui empêche de toucher le voisin.
• Images adaptées : utiliser des formats modernes (WebP), des tailles responsives (srcset), et éviter les images trop lourdes qui ralentissent le chargement mobile.
• Pas de fenêtres intrusives sur mobile : Google demande d'éviter les interstitiels qui recouvrent le contenu à l'arrivée sur la page, et les range dans les signaux d'expérience de page. Les bandeaux légaux, comme le consentement aux cookies, font exception.
• CSS mobile-first : en développement, écrire les styles de base pour mobile, puis utiliser des media queries (min-width) pour adapter au desktop, et non l'inverse.

Impact SEO concret

Un site conçu en Mobile First présente plusieurs avantages directs pour le référencement :

• Meilleure cohérence entre version mobile et desktop, ce qui simplifie l'indexation Google.
• Temps de chargement souvent plus courts (on n'a gardé que l'essentiel).
• Meilleurs scores aux Core Web Vitals, notamment le LCP et le CLS.
• Une seule version de contenu à maintenir, donc aucun risque d'indexer une page appauvrie.

À l'inverse, un site conçu pour ordinateur puis « compressé » pour mobile produit des colonnes trop étroites, des textes illisibles et des images non redimensionnées. Google a retiré fin 2023 son rapport Ergonomie mobile et son test mobile-friendly, si bien que ces défauts ne remontent plus dans la Search Console. Il reste le rapport Core Web Vitals, qui sépare mobile et ordinateur, et le contrôle à l'œil sur un vrai téléphone.

La parité de contenu entre mobile et desktop

L'un des risques les plus sous-estimés du Mobile-First Indexing est le problème de parité de contenu. Si la version mobile de votre site affiche moins de texte, moins de liens internes ou moins de données structurées que la version desktop, Google indexe une version appauvrie de vos pages. C'est la version mobile qui compte pour le classement, pas la version desktop.

Les cas les plus fréquents :

• Accordéons ou onglets fermés par défaut : Google a indiqué que, dans le cadre de l'indexation mobile, le contenu placé dans des onglets ou des blocs repliables est indexé et pris en compte normalement. Le risque n'est pas là. Il est dans les contenus chargés seulement au clic par JavaScript, ou retirés du HTML mobile pour alléger la page.
• Textes tronqués sur mobile : des introductions raccourcies via CSS ou JavaScript qui masquent une partie du contenu sur petits écrans. Google voit parfois uniquement la version visible.
• Données structurées absentes sur mobile : si votre markup Schema.org est chargé uniquement en desktop, Google n'en tient pas compte pour les rich snippets.
• Navigation différente : des liens internes présents uniquement dans la sidebar desktop et pas dans la version mobile appauvrissent le maillage interne indexé.

Comment tester la conformité mobile de votre site

Trois outils complémentaires pour valider l'état mobile d'un site :

• Google Search Console, rapport Core Web Vitals et Inspection d'URL : le premier sépare les pages mobiles qui échouent aux seuils, le second montre le HTML tel que Googlebot mobile l'a reçu, ce qui révèle un contenu absent de la version mobile. Le rapport Ergonomie mobile qui listait les textes trop petits et les éléments trop proches a été retiré en décembre 2023.
• Google PageSpeed Insights : analyse les performances de la version mobile et donne un score Core Web Vitals séparé pour mobile et desktop. La colonne mobile est toujours plus basse et c'est celle qui compte.
• Chrome DevTools en mode émulation : dans l'onglet "Toggle device toolbar", vous simulez l'affichage sur différents appareils. Vérifiez que le contenu complet s'affiche, que les zones tactiles sont suffisamment grandes, et que les polices sont lisibles sans zoom.

Questions fréquentes

Qu'est-ce que le Mobile-First Indexing de Google ?

Depuis le 5 juillet 2024, date à laquelle Google a achevé la bascule, il n'explore et n'indexe que la version mobile des sites. Si une page mobile a moins de contenu, moins de liens ou moins de données structurées que la version pour ordinateur, c'est la version appauvrie qui est indexée et classée, pour tous les visiteurs. La version mobile doit donc être complète, jamais une version dégradée.

Mobile First en design : qu'est-ce que ça veut dire concrètement ?

Concevoir d'abord pour mobile (petites largeurs d'écran, navigation tactile, interactions limitées), puis adapter pour les écrans plus grands. Approche opposée au "desktop first" classique. Mobile First force à hiérarchiser le contenu essentiel et à supprimer le superflu, ce qui améliore généralement aussi l'expérience desktop par effet rebond.

Tous les sites doivent-ils être Mobile First ?

Pour le référencement, oui, quel que soit le public, puisque Google n'indexe que la version mobile. Pour l'expérience utilisateur, cela dépend de l'audience réelle. En France, StatCounter mesure encore en août 2026 une majorité de trafic web sur ordinateur, 53 % contre 44,6 % pour le mobile, et un site B2B de logiciel professionnel peut dépasser 80 % d'usage sur ordinateur. Le rapport Appareils de la Search Console et Google Analytics donnent la répartition pour votre site, et c'est elle qui décide de l'effort à mettre sur chaque version, la version mobile devant dans tous les cas être complète.

Comment vérifier qu'on est conforme Mobile First ?

Trois tests rapides. PageSpeed Insights mesure la version mobile avec ses propres Core Web Vitals, et c'est la colonne qui compte. L'outil Inspection d'URL de la Search Console montre le HTML reçu par Googlebot mobile, ce qui révèle un contenu manquant. Le mode développeur de Chrome (F12, icône mobile) simule différents écrans. Le rapport Ergonomie mobile n'existe plus depuis fin 2023, et le test manuel sur un vrai smartphone reste indispensable pour les pages stratégiques.