Conception mobile-first : guide pratique étape par étape
Ce que signifie réellement le mobile-first, sa différence avec le responsive et comment concevoir et créer un site mobile-first : ordre du contenu, zones tactiles, points de rupture CSS min-width, images et tests, avec des conseils pour les entreprises multisites.
Questions fréquentes
Quelle est la différence entre le mobile-first et le responsive design ?
Le responsive design désigne un site dont la mise en page s’adapte à toutes les tailles d’écran. Le mobile-first décrit l’ordre dans lequel vous concevez et codez : commencez par le petit écran, puis ajoutez des éléments de mise en page pour les écrans plus grands. Un site mobile-first est responsive, mais un site responsive conçu d’abord pour ordinateur finit souvent avec une version mobile étriquée, traitée après coup.
Pourquoi le mobile-first est-il important pour le SEO ?
Google utilise l’indexation mobile-first : il se sert principalement de la version mobile d’une page pour l’indexation et le classement. Si du contenu, des titres, des données structurées ou des liens manquent sur mobile, Google risque de ne pas les voir.
Quels points de rupture utiliser pour un site mobile-first ?
Laissez le contenu décider : élargissez la fenêtre du navigateur jusqu’à ce que la mise en page paraisse étirée, puis ajoutez un point de rupture à cet endroit. Les valeurs de départ courantes sont environ 640px, 768px, 1024px et 1280px, utilisées par de nombreux frameworks CSS sous forme de requêtes média min-width.
Quelle taille donner aux boutons sur mobile ?
WCAG 2.2 fixe une cible minimale de 24 par 24 pixels CSS (niveau AA) et recommande 44 par 44 (niveau AAA). Les recommandations d’Apple indiquent 44 points et celles de Material de Google, 48dp. Visez environ 44 à 48 pixels pour les boutons principaux et les liens des menus.
Comment les franchises doivent-elles gérer leur site mobile-first ?
Utilisez un modèle commun avec une page par établissement, comprenant en haut un appel en un clic, l’itinéraire en un toucher, les horaires et une action de réservation ou de commande propre au lieu. Les visiteurs mobiles qui cherchent « près de moi » veulent agir tout de suite : le localisateur et l’action principale doivent fonctionner avec un seul pouce.
En bref : en conception web mobile-first, vous concevez et créez d’abord la version téléphone d’une page, puis ajoutez des mises en page pour les tablettes et ordinateurs à mesure que l’écran s’élargit. Dans le code, votre CSS de base correspond à la mise en page mobile ; vous l’enrichissez avec des requêtes média min-width. Cette méthode vous oblige à décider de ce qui compte le plus sur chaque page et correspond à la façon dont Google indexe les sites aujourd’hui.
Mobile-first et responsive : la vraie différence
Ces termes sont souvent employés comme des synonymes, mais ils répondent à des questions différentes.
Responsive design
Conception mobile-first
Définition
Un site dont la mise en page s’adapte à la taille de l’écran
Une méthode : commencer petit, puis enrichir
Style CSS
Peut utiliser max-width (réduire la version ordinateur) ou min-width
min-width (élargir la version mobile)
Priorité du contenu
Souvent décidée sur ordinateur, puis comprimée
Décidée sur le plus petit écran
Échec fréquent
Contenu masqué, cibles tactiles minuscules, pages lourdes sur téléphone
Mise en page ordinateur clairsemée si elle n’est pas enrichie
La meilleure pratique associe les deux : un site responsive conçu selon l’approche mobile-first.
Étape 1 : définir l’ordre du contenu sur téléphone
Sur un écran étroit, tout tient dans une seule colonne : l’ordre constitue donc toute la mise en page. Pour chaque page, dressez une liste numérotée des sections dans l’ordre utile à un visiteur sur téléphone.
Pour la page d’accueil d’un service local, cela pourrait donner :
Votre activité et votre zone (une ligne)
Action principale : appeler ou réserver
Preuves : note, avis ou clients connus
Services sous forme de courtes cartes tactiles
Zone d’intervention ou établissements
Preuves complémentaires : photos, avant/après
FAQ
Pied de page avec horaires, adresse et coordonnées
Tout élément qui ne mérite pas de place dans cette liste n’a probablement pas non plus sa place sur ordinateur.
Étape 2 : penser aux pouces
Zones tactiles : donnez aux boutons et liens de menu une hauteur d’au moins 44 à 48 pixels, avec de l’espace entre eux. Le minimum WCAG 2.2 est 24 par 24 pixels CSS ; c’est un seuil, pas un objectif.
Action principale à portée de main : une barre fixe en bas avec « Appeler » et « Réserver » fonctionne bien pour les commerces locaux. Gardez-la courte pour qu’elle ne masque pas le contenu.
Navigation : un bouton de menu qui ouvre une liste plein écran convient. Limitez cette liste à cinq à sept éléments et placez l’action principale en dehors du menu.
Formulaires : une colonne, des libellés au-dessus des champs et les bons types de saisie (tel, email, number) pour afficher le clavier adapté. Utilisez les attributs autocomplete pour que les navigateurs puissent remplir les noms et adresses.
Texte : 16px est une taille minimale courante pour le corps de texte et évite le zoom d’iOS Safari dans les champs de formulaire. Gardez des lignes agréables à lire et un contraste d’au moins 4.5:1 pour le texte courant (WCAG AA).
Étape 3 : créer le site en mobile-first
Commencez par la balise viewport dans l’en-tête de chaque page :
@media (min-width: 1024px) { .services { grid-template-columns: repeat(3, 1fr); } .site-nav { display: flex; } /* afficher la navigation complète, masquer le bouton de menu */ } ```
Quelques techniques pour vous simplifier la tâche :
Typographie et espacements fluides avec clamp(), par exemple font-size: clamp(1.75rem, 5vw, 3rem) pour un titre, afin de réduire le nombre de points de rupture.
Flexbox et Grid avec auto-fit : grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) ne crée des colonnes que si l’espace le permet.
Requêtes de conteneur (prises en charge par les principaux navigateurs actuels) : une carte peut changer de mise en page selon la largeur de son conteneur plutôt que celle de tout l’écran ; utile pour les composants réutilisables.
Frameworks utilitaires comme Tailwind CSS, mobile-first par défaut : les classes sans préfixe s’appliquent à toutes les tailles et les préfixes comme md: à partir de cette largeur.
Choisissez les points de rupture là où votre contenu se désorganise, pas en fonction de modèles de téléphone précis.
Étape 4 : assurer la rapidité sur une vraie connexion mobile
Les téléphones ont des processeurs plus lents et des réseaux moins fiables que l’ordinateur portable utilisé pour concevoir le site. Les Core Web Vitals de Google mesurent cela : Largest Contentful Paint (chargement), Interaction to Next Paint (réactivité) et Cumulative Layout Shift (stabilité visuelle).
Images adaptatives : utilisez srcset et sizes pour que les téléphones téléchargent des fichiers plus légers, ainsi que des formats modernes comme WebP ou AVIF.
Définissez toujours la largeur et la hauteur (ou aspect-ratio) des images et intégrations pour éviter les décalages de mise en page.
Chargez en différé les images sous la ligne de flottaison avec loading="lazy", mais pas l’image principale.
Limitez les polices à une ou deux familles et quelques graisses.
Réduisez les scripts tiers : widgets de chat, outils de suivi et intégrations ralentissent souvent l’interaction sur téléphone. Chargez-les tardivement ou seulement là où ils sont nécessaires.
Étape 5 : enrichir la mise en page pour les grands écrans
Une fois la mise en page mobile au point, élargissez la fenêtre et ajoutez de la valeur, pas seulement de la largeur :
Grilles de services et produits à plusieurs colonnes
Barre de navigation complète au lieu du bouton de menu
Texte et images côte à côte
Barre latérale fixe pour les longs articles ou récapitulatifs de réservation
Effets au survol, mais jamais d’information disponible uniquement au survol, car les écrans tactiles ne le permettent pas
Étape 6 : tester comme un visiteur
Mode appareil des outils de développement du navigateur pour vérifier rapidement les largeurs 360px, 390px et 414px, ainsi que les tailles de tablette.
Au moins un vrai Android et un vrai iPhone, car les émulateurs ne révèlent pas les problèmes de défilement, les claviers qui recouvrent les champs ni les processeurs lents.
Lighthouse dans Chrome DevTools et PageSpeed Insights, qui affiche aussi les données de terrain des utilisateurs Chrome lorsque le site a assez de trafic.
Passez en mode paysage et vérifiez que les barres fixes ne couvrent pas la moitié de l’écran.
Effectuez l’action principale (réserver, acheter, appeler) d’un seul pouce avec les données mobiles.
Consultez Search Console après le lancement pour repérer les problèmes mobiles. Notre guide Google Search Console explique où regarder.
Le mobile-first pour les franchises et entreprises multisites
Les sites de franchise et multisites ont un problème mobile particulier : la plupart des visiteurs arrivent sur téléphone depuis une recherche « près de moi » et veulent immédiatement les détails d’un établissement.
Localisateur d’abord : « Utiliser ma position » avec une recherche par code postal ou ville et des résultats sous forme de cartes tactiles.
Une page par établissement à partir d’un modèle commun : adresse, horaires, téléphone, lien cartographique, services et action locale de réservation ou commande, avec le bouton d’appel en haut.
Détails locaux distincts : si possible, chaque page doit avoir ses propres photos, son équipe ou ses avis, et pas seulement un nom de ville remplacé.
Marque cohérente, contrôle local : les franchisés doivent pouvoir actualiser les horaires et offres sans toucher à la mise en page.
Données structurées : un schéma LocalBusiness sur chaque page d’établissement, avec les bons nom, adresse et numéro de téléphone.
Liste de contrôle mobile-first
[ ] Balise meta viewport sur chaque page
[ ] Ordre du contenu défini pour une seule colonne
[ ] Action principale visible sans faire défiler sur téléphone
[ ] Zones tactiles d’environ 44 à 48px, avec des espacements
[ ] Texte courant de 16px ou plus, contraste de 4.5:1
[ ] CSS de base pour mobile, requêtes min-width pour les écrans plus grands
[ ] Images adaptatives avec dimensions définies
[ ] Même contenu et mêmes données structurées sur mobile et ordinateur
[ ] Tests sur de vrais appareils iOS et Android
En créer un sans repartir de zéro
Tous les sites créés par We.Inc sont adaptatifs dès le départ. Vous pouvez prévisualiser la mise en page téléphone dans l’éditeur, puis la modifier visuellement ou dans le code. Parcourez les modèles pour voir comment les mises en page passent à une colonne, ou décrivez votre activité pour obtenir une première version à tester sur votre téléphone.