Le design mobile first consiste à concevoir d’abord l’expérience sur petit écran, puis à l’enrichir pour les écrans plus larges. Ce n’est pas un style graphique, c’est un ordre de travail qui force à décider ce qui compte vraiment sur chaque page. Pour une PME, c’est aussi la manière la plus sûre de ne pas payer un site qui s’effondre sur le téléphone de ses prospects.
Nous le voyons sur le terrain depuis 2008 : beaucoup de sites « responsive » sont en réalité des sites de bureau compressés à la hâte. Le résultat ressemble à un plat de spaghettis numérique. Voici comment faire autrement.
En bref
- Le mobile first est une méthode de conception : on part des contraintes du téléphone, puis on ajoute progressivement pour les écrans plus grands.
- Google utilise la version mobile d’un site pour l’indexation et le classement : un contenu amputé sur mobile, c’est de la visibilité perdue.
- En B2B, un décideur consulte votre site entre deux rendez-vous : promesse claire, preuve, appel à l’action et formulaire court dès le premier écran.
- Accessibilité, performance et tests sur appareils réels ne sont pas des options de fin de projet, ils se pensent dès la maquette.
Table des matières
- Mobile first, responsive : quelle différence ?
- Pourquoi commencer par le téléphone
- Mobile first et SEO : ce que dit Google
- Appliquer le mobile first au site B2B
- Mettre en œuvre le mobile first en CSS
- Accessibilité et lisibilité sur mobile
- Tester un site mobile first sur de vrais appareils
- Notre point de vue : le mobile first ne sauve pas un mauvais projet
- Ce que nous faisons pour les PME
- Questions fréquentes
- Sources
Mobile first, responsive : quelle différence ?
Le responsive design désigne la capacité d’un site à s’adapter à la taille de l’écran. Le mobile first désigne la façon dont on y arrive. La méthode est généralement attribuée à Luke Wroblewski, qui l’a théorisée vers 2009 : on conçoit l’interface pour les contraintes des petits écrans, puis on l’enrichit pour les écrans larges.
Le glossaire de MDN la rattache à l’amélioration progressive : on construit d’abord une expérience fonctionnelle sur petit écran, puis on l’optimise pour les autres tailles.
Concrètement, deux sites peuvent être « responsive » et pourtant radicalement différents :
| Desktop first adapté | Mobile first | |
|---|---|---|
| Point de départ | Maquette de bureau complète | Écran de téléphone, contenu essentiel |
| Logique | On retire ou masque pour faire tenir | On ajoute quand l’espace le permet |
| Risque | Contenu caché, pages lourdes, boutons minuscules | Version bureau parfois trop sobre si on s’arrête là |
| Effet sur le contenu | Tout est conservé « au cas où » | Chaque bloc doit justifier sa place |
La deuxième ligne est la plus importante. Quand on retire, on bricole. Quand on ajoute, on construit.
Pourquoi commencer par le téléphone
Le petit écran oblige à choisir
L’Interaction Design Foundation le formule bien : les contraintes d’espace du mobile servent d’outils de clarté et obligent à éliminer le superflu, là où l’écran de bureau encourage à empiler des éléments distrayants. Sur une page de service de PME, cela veut dire : un titre qui dit ce que vous faites, deux ou trois preuves, un bouton. Le reste vient après.
Le mobile est un usage, pas seulement une taille
Les UX designers Stéphanie et Bryan Rieger rappellent, dans un article d’Orange Business, que le mobile est un outil personnel, sujet aux interruptions et associé à des interactions simples. Votre prospect ne lira pas six paragraphes dans le train. Il cherchera votre téléphone, votre zone d’intervention, un exemple de réalisation.
La vitesse se gagne ou se perd ici
Un site pensé mobile first charge moins de choses par défaut. Un article spécialisé avance qu’une seconde de délai peut coûter 7 % de conversion. Retenez l’ordre de grandeur plutôt que le chiffre exact : chaque lenteur se paie en demandes de devis. Nous détaillons les leviers dans notre guide sur l’optimisation de la vitesse d’un site internet.
Mobile first et SEO : ce que dit Google
C’est la partie que les dirigeants sous-estiment le plus, et la plus coûteuse. Selon la documentation de Google sur l’indexation orientée mobile, Google utilise la version mobile pour l’indexation et le classement. Si votre version mobile affiche moins de texte, moins de données structurées ou des métadonnées différentes, c’est cette version appauvrie que Google évalue.
Les recommandations de Google sont claires :
- un contenu principal équivalent sur mobile et sur ordinateur ;
- les mêmes données structurées ;
- les mêmes métadonnées (titres, descriptions).
Google recommande aussi le Responsive Web Design, car il utilise une seule URL et le même code HTML pour tous les appareils, ce qui simplifie la mise en œuvre et la maintenance. Pas de site « m. » séparé à entretenir, pas de contenus qui divergent.
Le piège classique : masquer des blocs de texte sur mobile « pour alléger ». Vous allégez, certes, mais vous retirez aussi ce que Google lit. Le bon réflexe est de réorganiser (accordéons, ordre des blocs), pas de supprimer.
La pagination et les listes longues posent d’autres questions d’indexation, que nous traitons dans notre article sur la pagination SEO.
Appliquer le mobile first au site B2B
On imagine souvent le B2B comme un univers de bureau. C’est une erreur de lecture. Le Nielsen Norman Group décrit des achats B2B longs et complexes : les visiteurs comparent des produits, partagent des options avec leurs collègues et établissent une présélection. Or le partage d’un lien entre collègues se fait très souvent depuis un téléphone, par messagerie. Votre page doit donc être lisible là où elle atterrit.
Le premier écran fait le travail
La CCI Paris Île-de-France recommande de placer dès le premier écran une promesse claire, une preuve crédible et un appel à l’action, puis de mesurer les clics sur les boutons, le taux de complétion des formulaires et le temps jusqu’à l’action. Sur mobile, le « premier écran » fait environ la moitié de la hauteur d’un bureau : il n’y a pas de place pour un carrousel de slogans.
Un exemple de structure d’accueil pour un artisan ou un industriel de PME :
- une phrase qui nomme votre métier, votre cible et votre zone ;
- une preuve : nombre d’années, un client reconnaissable, une certification que vous détenez réellement ;
- un bouton d’appel et un bouton de demande de devis ;
- la suite de la page, par ordre d’importance décroissante.
Le formulaire, point de rupture numéro un
Pour les parcours B2B mobiles, la même CCI conseille des formulaires courts de 4 à 6 champs, l’indication du temps de saisie, une alternative par appel ou par e-mail, et une explication de ce qui se passe après l’envoi. Demander un numéro de SIRET, un budget et trois champs optionnels sur un écran de 6 pouces, c’est inviter le prospect à partir. Si votre site ne convertit pas comme prévu, lisez aussi pourquoi un site ne convertit pas vraiment et nos conseils pour améliorer la conversion d’un site web.
Les fiches produit et services
Si vous vendez en ligne, la page produit est l’endroit où le mobile first se voit le plus : image, prix, disponibilité et bouton d’achat sans défilement inutile. Nous avons rassemblé ces points dans les éléments clés d’une page produit efficace.
Mettre en œuvre le mobile first en CSS
Sans entrer dans un tutoriel complet, voici la logique que doit suivre l’intégrateur.
Le viewport d’abord
La balise meta viewport est indispensable. MDN précise qu’il faut inclure width=device-width, initial-scale=1 : sans elle, les points d’arrêt CSS pourraient ne pas fonctionner comme prévu sur les navigateurs mobiles. C’est la panne la plus bête et on la rencontre encore sur des sites payés plusieurs milliers d’euros.
Le CSS de base est celui du mobile
Le code qui n’est enveloppé dans aucune media query décrit la version téléphone. Les règles pour les écrans plus larges s’ajoutent ensuite avec min-width. Résultat : le téléphone, qui a le moins de puissance, télécharge le moins de règles à interpréter. À l’inverse, une feuille de style desktop first doit défaire à coup de max-width ce qu’elle a posé avant, ce qui fabrique de la dette technique.
Choisir les points de rupture selon le contenu
Ne calez pas vos breakpoints sur la taille de tel ou tel appareil du moment. Étirez la page jusqu’à ce que la mise en page « casse » (lignes trop longues, colonnes trop étroites) et placez le point de rupture à cet endroit. Le contenu décide, pas le catalogue d’un fabricant.
Pas de survol sur un téléphone
Les états de survol n’existent pas sur mobile : ils enrichissent l’expérience sur ordinateur sans en être la condition. Un menu qui ne s’ouvre qu’au survol, une info-bulle qui porte le prix : tout cela disparaît pour une partie de vos visiteurs.
Accessibilité et lisibilité sur mobile
Le W3C le dit sans ambiguïté : les WCAG s’appliquent aux pages et applications web, y compris au contenu mobile, sans règles séparées pour l’accessibilité mobile. Un site mobile first n’est donc pas dispensé d’accessibilité, il en hérite.
La CCI Paris Île-de-France liste des gestes simples : titres descriptifs, paragraphes courts, listes, contrastes suffisants, textes alternatifs et navigation au clavier (même source que plus haut). Sur un petit écran, on y ajoute des zones tactiles assez grandes et un espacement qui évite de toucher le mauvais lien.
Les formulaires sont l’endroit où l’accessibilité mobile se joue le plus : étiquettes visibles, messages d’erreur compréhensibles, champs adaptés au clavier du téléphone. Ce principe vaut pour tout secteur, comme le montre cette ressource sur l’accessibilité web des formulaires d’inscription.
Pour le cadre français, voir notre point sur le fait de savoir si un site accessible est obligatoire en France, les nouvelles règles RGAA et notre guide d’accessibilité en 7 étapes.
Tester un site mobile first sur de vrais appareils
Un site n’est pas mobile first parce que la maquette l’affirme. Il l’est quand il tient sur un téléphone qui a un an de plus que le vôtre, avec une connexion moyenne.
- L’émulateur ne suffit pas. Chrome for Developers avertit que les émulateurs sont utiles pour tester la réactivité, mais qu’ils ne reproduisent pas forcément les comportements, les API ou la prise en charge CSS d’un vrai navigateur mobile. Complétez par des appareils réels.
- Les deux grands environnements. Pour un site mobile grand public, le RGAA conseille fortement de tester Android avec TalkBack et Chrome, et iOS avec VoiceOver et Safari. Les versions se choisissent selon le contexte d’usage réel de votre site.
- Les formulaires, de bout en bout. web.dev recommande de tester les formulaires sur ordinateur au clavier seul, puis sur téléphone, pour couvrir plusieurs méthodes de saisie, tailles d’écran, navigateurs et systèmes.
Une grille minimale de recette avant mise en ligne :
- le bouton d’appel compose bien votre numéro ;
- le formulaire s’envoie, et le message de confirmation s’affiche ;
- aucune information présente sur desktop n’est absente sur mobile ;
- la page principale s’affiche vite sur une connexion moyenne ;
- le menu se manipule au pouce, d’une seule main.
Notre point de vue : le mobile first ne sauve pas un mauvais projet
Nous allons être directs. Le mobile first est devenu un argument de vente creux : tout le monde le promet, peu le pratiquent. Un site « adaptatif » livré en trois semaines à partir d’un thème acheté, c’est un mirage. Il passe le test du navigateur redimensionné, puis se révèle lent, lourd, mal structuré pour Google et pénible à faire évoluer. La facture arrive plus tard, sous forme de dette technique.
Ce que nous défendons, à Nîmes comme pour nos clients de Montpellier ou de Lyon :
- Un seul interlocuteur pour l’image, la technique et la visibilité. Quand le designer, le développeur et la personne chargée du SEO ne se parlent pas, le mobile en paie le prix : la maquette est belle, le code est lourd, le référencement arrive après coup.
- Le contenu avant la maquette. Si vous ne savez pas dire en deux phrases ce que doit faire la page d’accueil sur un téléphone, aucun outil ne le fera à votre place.
- La performance comme critère de conception. Un composant qui alourdit la page doit prouver son utilité.
- Le mobile n’est pas tout. Une PME qui vend des machines ou des prestations complexes a aussi des visiteurs sur grand écran, qui comparent et lisent des fiches techniques. Le mobile first donne le point de départ, pas la ligne d’arrivée : la version large doit être pensée, pas simplement étirée.
Notre conviction : méfiez-vous des promesses sans méthode, et exigez qu’on vous montre le site sur un vrai téléphone avant de signer.
— David
Ce que nous faisons pour les PME
Nous concevons des sites vitrine, e-commerce et sur mesure pensés pour la conversion, rapides sur mobile et structurés pour le référencement. Selon les tarifs publiés sur notre site, une création de site internet se situe entre 2 500 et 8 000 €, un site e-commerce entre 5 000 et 25 000 €, et une refonte entre 3 000 et 15 000 €. Si votre site actuel est un vestige desktop first, la refonte de site internet est souvent le moment de tout remettre dans le bon ordre. Une fois en ligne, la maintenance du site (de 80 à 800 € par mois) évite que la performance se dégrade au fil des mises à jour.
Pour un devis cadré, le point de départ reste notre page création web.
Questions fréquentes
Le mobile first remplace-t-il le responsive design ?
Non, il le complète. Le responsive design est le résultat : un site qui s’adapte à toutes les tailles d’écran. Le mobile first est la méthode pour y arriver, en partant du petit écran. Google recommande d’ailleurs le responsive design avec une seule URL pour tous les appareils.
Mon site est responsive, dois-je quand même m’inquiéter ?
Oui, vérifiez ce que contient réellement la version mobile. Google se base sur elle : si du texte, des données structurées ou des métadonnées y manquent, ils ne comptent pas dans l’évaluation. Testez aussi la vitesse et les formulaires sur un vrai téléphone.
Faut-il un site mobile first pour un public B2B ?
Oui, car les décideurs consultent et se transmettent des liens depuis leur téléphone, même si la décision d’achat se prolonge ensuite sur ordinateur. Misez sur un premier écran clair, un formulaire court de quatre à six champs et une alternative par appel ou e-mail.
Le mobile first rend-il un site accessible ?
Pas automatiquement. Les WCAG s’appliquent au contenu mobile comme au reste, et il faut vérifier contrastes, textes alternatifs, navigation au clavier et lecteur d’écran. En France, le RGAA fournit la méthode de test.
Sources
- Mobile d’abord, glossaire MDN
- Responsive design, MDN
- Indexation orientée mobile : bonnes pratiques, Google
- UX/UI : 7 améliorations qui font bouger les conversions, CCI Paris Île-de-France
- B2B Website Usability, Nielsen Norman Group
- Mobile First, Interaction Design Foundation
- Concevoir des services adaptés aux usages mobiles, Orange Business
- L’accessibilité mobile, W3C WAI
- Environnement de test, RGAA
- Émuler et tester d’autres navigateurs, Chrome DevTools
- Test your forms, web.dev
- Mobile-first design : méthode, principes et différences
- Mobile-first design : pourquoi concevoir d’abord votre site web pour le mobile
