Boutique mobile d'abord : le design que la personne voit

L'essentiel

Une boutique mobile d'abord, c'est dessiner la vitrine à la largeur du téléphone, avec le doigt comme souris, et seulement ensuite voir comment cela se réarrange sur le moniteur. Google indexe la version mobile du site, explorée avec l'agent smartphone. Ce que vous cachez ou effacez sur le téléphone cesse d'exister pour la recherche, même si c'est beau sur le desktop. Un thème de boutique est presque toujours responsive : la même page, la même URL, la mise en page change avec l'écran. Responsive ne veut pas dire pensé pour le téléphone. Cela veut dire que le desktop a rétréci. Plus bas, je montre l'ordre dans lequel je dessine, ce qui ne peut pas disparaître, la taille de la cible tactile et ce qu'il faut vérifier au checkout du téléphone.

1. Google lit le téléphone, pas le moniteur

L'indexation mobile-first veut dire ceci : la version que Google utilise pour indexer et classer est celle du téléphone. Avoir une version mobile n'est pas obligatoire pour apparaître dans la recherche. Google dit que c'est fortement recommandé.

Pour une boutique, le chemin qu'il recommande est le design responsive. Le même HTML, la même URL, la présentation change avec la taille de l'écran. Les deux autres chemins (un HTML différent sur la même URL, ou un site séparé de type m.) existent, et ils demandent plus de travail pour garder le titre, le contenu et les liens identiques. Un thème Shopify naît déjà sur le premier chemin. Je n'ouvre pas un second site pour le téléphone.

Le détail qui change le dessin : si le téléphone a moins de contenu que le desktop, Google prévient qu'on peut s'attendre à une perte de trafic, parce qu'il ne voit plus la page entière. L'accordéon et l'onglet sont acceptés pour gagner de la place. Effacer un bloc ne l'est pas.

Si vous montez la boutique entière, le projet e-commerce est l'endroit où l'accueil, la collection et le produit entrent ensemble. La page produit elle-même, avec photo, variante et prix, est dans l'article sur ce que le design doit montrer sur la page produit.

2. Ce qui ne peut pas disparaître quand l'écran rétrécit

Google demande le même contenu principal, les mêmes titres clairs, le même title, la même meta description et le même texte alternatif des images. Les données structurées aussi, des deux côtés. S'il faut prioriser ce qu'on balise sur le téléphone, l'ordre qu'il donne est Breadcrumb, Product et VideoObject.

Cela devient une règle de mise en page. Le menu hamburger peut garder les pages secondaires. Il ne peut pas garder le nom du produit, le prix, la variante et le bouton d'achat. Une photo « seulement sur desktop, parce qu'elle pèse » retire de la recherche l'image que la personne utiliserait pour décider. Google demande encore une image de qualité sur le téléphone, pas une miniature floue à la place de la grande photo.

Le texte sur les mesures, le délai et l'échange peut aller dans un accordéon sous le bouton. Le texte doit être dans le HTML de la page, pas derrière un clic qui charge autre chose. Google déclare qu'il ne charge pas le contenu principal qui dépend d'un glissement, d'un clic ou d'une saisie. Un accordéon qui apporte déjà le texte dans la page, seulement caché visuellement, est différent d'un bouton qui va chercher le texte ensuite.

Une publicité ou une bannière en haut mange l'écran du téléphone. Google cite Better Ads et dit qu'une publicité en haut peut occuper trop de place. Dans la boutique, l'équivalent est d'empiler une bande de livraison, un avis de cookies et une barre d'application. J'en laisse une, courte. Le reste attend que la personne fasse défiler.

La vidéo du produit reste près du haut, pas après dix blocs. L'aide de Google dit qu'une vidéo difficile à trouver sur mobile, parce qu'elle exige beaucoup de défilement, peut nuire à la vidéo dans la recherche.

Source : Google Search Central, page d'indexation mobile-first, mise à jour le 10/12/2025, lue le 16/10/2026.

3. Dessiner à la largeur du pouce

Je commence le fichier de mise en page sur un écran étroit. Accueil, liste et produit. Ce n'est que lorsque l'achat a du sens à cette largeur que j'étire vers le desktop. L'inverse produit une colonne vide sur le téléphone, un bouton sous la ligne de flottaison et un menu qui n'existe qu'au survol. Le survol n'existe pas au doigt.

Sur l'accueil, le premier bloc répond à « ce que cette boutique vend » sans dépendre d'un slider qui change tout seul. Un slider qui change tout seul cache la phrase que Google et la personne devaient lire. Une photo, une phrase, un bouton.

Dans la liste, la carte montre la photo, le nom et le prix sans couper le prix par des points de suspension. Le filtre ne peut pas être une barre latérale qui, sur le téléphone, devient une page entière sans bouton appliquer visible. Je mets le filtre dans un bouton, avec appliquer fixé au bas de l'écran.

Sur la page produit, galerie, nom, prix, variante et acheter tiennent dans le premier écran ou juste au début du défilement. La recherche sur l'abandon aide à se souvenir de ce qui ne peut pas rester « plus bas » : le coût supplémentaire est le motif de 40% des abandons, hors ceux qui ne faisaient que regarder (42%). La livraison et le délai ne sont pas le pied de page. Ils font partie de la décision, et sur le téléphone le pied de page est loin.

Le contraste suit les WCAG : 4,5:1 pour le texte normal et 3:1 pour le grand texte (18 points, ou 14 en gras). Au soleil, le gris clair sur blanc disparaît. J'évite un texte de prix en gris sur une photo.

Si votre boutique a été dessinée sur le moniteur et que, sur le téléphone, le prix, le bouton ou la livraison disparaissent, envoyez l'URL et un produit d'exemple. Si vous n'avez pas encore créé la boutique, parlez-moi avant de la créer : la boutique naît comme boutique de développement, est montée prête et transférée à votre nom.

Parler du projet

4. Cible tactile

Le critère 2.5.8 des WCAG 2.2 demande que la cible du pointeur fasse au moins 24 par 24 pixels CSS. Il y a des exceptions : des cibles plus petites peuvent exister si un cercle de 24 pixels sur chacune ne touche pas la voisine, s'il existe un autre contrôle équivalent sur la page, si la cible est au milieu d'une phrase, si la taille vient du navigateur, ou si la petite taille est essentielle.

Dans la boutique, cela concerne le menu, la variante de taille, la quantité, la corbeille du panier et le lien « voir plus » du filtre. Une petite lettre avec une icône collée à la voisine, c'est là que la personne achète la mauvaise taille. J'agrandis la zone cliquable même quand le dessin de l'icône reste petit. C'est la zone qui compte, pas seulement le trait.

Le bouton d'achat est la plus grande cible de la page. Largeur de la colonne sur le téléphone, texte court (« Acheter » ou « Ajouter »), une couleur qui passe le contraste. Un bouton secondaire (« favori », « prévenir au retour ») n'a pas la même taille ni la même couleur, sinon les deux se font concurrence.

5. Une photo que Google voit encore

L'image en chargement paresseux est normale dans une longue liste. La limite de Google est autre : ne pas laisser le contenu principal dépendre d'un geste pour exister. Les premières photos du produit entrent dans la page sans que la personne ait à toucher un « plus » qui va chercher le fichier.

La photo du téléphone est la même photo, pas un recadrage qui coupe le produit. Une URL qui change à chaque chargement gêne Google pour indexer l'image. Le texte alternatif décrit le produit (« basket blanche, vue de côté »), pas le mot « image » répété.

Si la boutique utilise une URL d'image différente sur desktop et sur téléphone, Google prévient que le trafic image peut baisser un moment, parce que la nouvelle URL n'a pas encore d'historique. Dans le thème responsive, la même URL avec une taille ajustée évite ce détour. Je ne crée pas une seconde galerie « light » avec un autre nom de fichier rien que pour le téléphone.

6. Checkout sur le téléphone

L'évaluation du checkout de Baymard, mise à jour en novembre 2025, a trouvé 63% des sites mobiles avec une performance médiocre ou pire. Sur desktop, 64%. Seuls 2% des sites mobiles ont été jugés bons. Réduire le checkout de desktop ne résout rien. L'écran est déjà court. Un champ de plus devient un défilement de plus.

Sur Shopify, le résumé de commande et le coupon commencent repliés sur le téléphone. La personne doit toucher pour voir le total et le code. Si la boutique vit de coupons, l'admin laisse le champ de coupon toujours visible. Je veux le montant de la commande lisible avant ce toucher. Un coût qui apparaît tard est sur la liste des abandons.

18% ont abandonné parce que le site a demandé de créer un compte. 17% parce que le processus était long ou compliqué. Sur le téléphone, cela pèse davantage : le clavier couvre le champ, et chaque étape en plus est un motif pour fermer le navigateur. L'achat sans compte reste l'action principale. Le compte reste le chemin de celui qui a déjà acheté.

Le checkout Shopify ne se dessine pas dans le thème. Couleurs, logo et police vont dans l'éditeur de checkout. La décision d'utiliser le checkout natif ou un checkout externe (Yampi, Cartpanda) est dans l'article sur le checkout Shopify au Brésil. Le visuel du téléphone continue de valoir dans les deux cas : total visible, peu de champs, un bouton que le doigt atteint.

La moyenne documentée d'abandon de panier est de 70,22%. Une partie, ce sont des gens qui ne font que regarder. La partie que le design atteint, c'est le coût, le compte obligatoire et le flux long. Sur le téléphone, ces trois-là apparaissent en premier.

7. Ordre de travail

Quand je prends une boutique à relire, l'ordre est celui-ci.

D'abord j'ouvre l'accueil, la liste et un produit à la largeur du téléphone, sans passer en paysage. Je note ce qui ne tient pas : prix coupé, bouton hors de l'écran, menu qui ne se ferme pas, bannière qui pousse le produit.

Ensuite je vérifie si le texte qui existe sur desktop est aussi sur le téléphone, même à l'intérieur d'un accordéon. Titre de page et description identiques. Alt des photos rempli.

Ensuite le toucher : variante, quantité, filtre, acheter. Si deux contrôles tiennent sous le même doigt, je les écarte.

En dernier, le desktop. Là, j'utilise l'espace qui reste pour montrer plus de photos côte à côte, pas pour inventer un contenu que le téléphone n'a pas. Un contenu nouveau sur desktop, sans équivalent sur le téléphone, est un contenu que la recherche n'utilise pas.

Un thème prêt accélère. Il ne remplace pas ce passage. Un thème installé et jamais ouvert sur le téléphone répète l'erreur des 63% : l'écran existe, l'achat non.

Questions fréquentes

Une boutique mobile d'abord, est-ce un site séparé pour le téléphone ?

Non. Google recommande le même HTML et la même URL, avec la mise en page qui s'adapte à l'écran. Un site séparé ou un HTML différent sur la même URL exige le même titre, le même contenu, les mêmes images et les mêmes liens sur les deux versions. Un thème de boutique responsive est déjà sur le chemin le plus simple. Le travail est de dessiner cet écran étroit exprès.

Puis-je cacher du texte sur le téléphone pour que la page soit plus nette ?

On peut le replier dans un accordéon ou un onglet, avec le texte encore dans la page. On ne peut pas l'effacer. Google indexe le mobile. Si le téléphone a moins de contenu, la recherche perd ce qui n'était que sur desktop. Le contenu principal ne peut pas non plus dépendre d'un clic qui va chercher le texte ensuite.

Quelle est la taille minimale d'un bouton ?

Les WCAG 2.2 demandent une cible d'au moins 24 par 24 pixels CSS, avec des exceptions pour l'espace entre les cibles, un autre contrôle équivalent, un lien au milieu de la phrase, un contrôle du navigateur et un cas essentiel. Dans la boutique, je l'applique à la variante, à la quantité, au filtre et à acheter. Le bouton principal occupe la largeur de la colonne.

Le checkout Shopify sur téléphone montre-t-il le total tout seul ?

Le résumé et le coupon commencent repliés. La personne touche pour ouvrir. On peut laisser le champ de coupon toujours visible. Le total doit être lisible tôt : un coût supplémentaire élevé est l'un des motifs d'abandon que Baymard mesure, chez 40% de ceux qui ne faisaient pas que regarder.

Une bannière de promotion en haut gêne-t-elle la recherche ?

Google dit qu'une publicité en haut peut occuper trop de place sur le téléphone et cite la norme Better Ads. Une bande courte de livraison ou de campagne tient. Plusieurs bandes empilées poussent le produit et la photo vers le bas. J'en laisse une.

Conclusion

Une boutique mobile d'abord, c'est l'ordre du dessin et l'ordre de la recherche : Google lit le téléphone, la personne achète sur le téléphone, et le desktop reprend ce qui a déjà fonctionné sur l'écran étroit. Le contenu reste le même, la cible tactile reste large, la photo reste nette et le checkout montre le coût avant la carte. Si votre boutique a été montée sur le moniteur et jamais relue sur l'appareil, le projet e-commerce est l'endroit pour voir ce travail. Envoyez l'URL de la boutique et un produit que vous voulez comme exemple. Si vous n'avez pas encore créé la boutique, parlez-moi avant de la créer : la boutique naît comme boutique de développement, est montée prête et transférée à votre nom.

Parler du projet