Comment rendre un site web adaptatif sur mobile

Pour rendre un site web adaptatif sur mobile, ajoutez une balise meta viewport, construisez la mise en page en partant du mobile avec des largeurs fluides, et utilisez des points de rupture CSS pour la réorganiser sur les grands écrans : empiler les colonnes, replier le menu et ajuster les images à la taille disponible. Vérifiez ensuite chaque page à la largeur d’un téléphone : défilement horizontal, texte minuscule, boutons trop petits pour être touchés. Sur un site créé par IA, une consigne claire et une vérification dans un aperçu à la taille d’un téléphone règlent généralement la plupart des problèmes.

Ce qu’est vraiment la conception adaptative

Un site adaptatif utilise un seul ensemble de pages et d’adresses qui s’ajustent à l’écran. Au lieu d’un site « m. » distinct, le CSS modifie la mise en page à certaines largeurs, appelées points de rupture. Les éléments de base :

La balise meta viewport indique aux navigateurs mobiles d’utiliser la largeur réelle de l’appareil.
Les mises en page fluides utilisent les pourcentages, flexbox et grid plutôt que des largeurs fixes en pixels.
Les requêtes de médias (ou les classes d’un cadre comme md: de Tailwind) modifient la mise en page au-delà d’une largeur donnée.
Les médias flexibles : images et vidéos qui rétrécissent pour s’adapter à leur conteneur.

Cela compte, car une grande part de votre trafic provient probablement de téléphones, et parce que Google indexe la version mobile de vos pages. Si le contenu ou les liens n’existent que sur ordinateur, Google ne les verra peut-être pas non plus.

Options et compromis

Approche	Fonctionnement	Convient à	Compromis
Adaptatif mobile d’abord	Styles de base pour les téléphones, puis ajout de la mise en page pour les écrans plus larges	Nouveaux sites et apps (recommandé)	Demande de penser petit d’abord
Adaptatif bureau d’abord	Styles de bureau, puis remplacements pour les petits écrans	Adapter un site de bureau existant	Plus de remplacements; le mobile semble une réflexion après coup
Site mobile distinct	Adresses différentes pour les téléphones	Rarement justifié aujourd’hui	Deux sites à maintenir, complications pour le référencement
Application web progressive (PWA)	Site adaptatif qui peut être installé sur l’écran d’accueil	Outils semblables à des apps, utilisés souvent	Configuration supplémentaire; voir applications natives et progressives

L’approche mobile d’abord est généralement plus simple : une seule colonne est la mise en page la plus facile, et ajouter des colonnes à mesure que l’espace augmente demande moins de travail que d’en retirer.

Les éléments qui se brisent habituellement

La balise viewport

Si une page ressemble à un petit site de bureau sur un téléphone, la balise viewport manque :

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

N’ajoutez pas maximum-scale=1 ni user-scalable=no. Bloquer le zoom au pincement rend le site plus difficile à utiliser pour les personnes malvoyantes.

Largeurs fixes et défilement horizontal

Le bogue adaptatif le plus courant est un élément plus large que l’écran : un conteneur de width: 1200px fixe, un tableau large, une adresse ou un bloc de code trop long, une image sans max-width: 100%. La page entière défile alors latéralement. Utilisez max-width plutôt que width, laissez le texte se replier, et donnez aux éléments larges leur propre zone de défilement.

Cinq liens de menu de bureau tiennent rarement sur un téléphone. La solution habituelle est un bouton de menu qui ouvre un panneau. Gardez visibles les deux ou trois actions les plus importantes (« Réserver », « Panier », « Se connecter ») et assurez-vous que le menu fonctionne au clavier et se ferme facilement.

Texte et zones tactiles

Un texte de corps d’environ 16 px est un minimum raisonnable sur téléphone. Les champs dont le texte est plus petit font zoomer les iPhone lorsqu’on les touche.
Rendez les boutons et les liens faciles à toucher. La norme WCAG 2.2 AA fixe un seuil de 24 par 24 pixels CSS (ou un espacement suffisant); environ 44 pixels est plus confortable pour le pouce.
Laissez de l’espace entre les liens adjacents pour que les gens ne touchent pas le mauvais.

Tableaux et données

Les tableaux larges sont la partie la plus difficile d’une app adaptative. Options, par ordre de préférence : afficher moins de colonnes sur les téléphones, transformer chaque ligne en carte, ou placer le tableau dans un conteneur défilant horizontalement avec la première colonne figée. Choisissez selon ce que les gens doivent comparer.

Images et médias

Utilisez max-width: 100% et height: auto, servez des fichiers plus petits aux petits écrans avec srcset, et définissez la largeur et la hauteur pour éviter les sauts de mise en page. Les vidéos et cartes intégrées ont besoin d’un enveloppeur adaptatif pour conserver leur proportion. Des images plus légères rendent aussi les pages plus rapides; consultez comment accélérer votre site web.

Formulaires

Placez les étiquettes au-dessus des champs, rendez les champs pleine largeur, et utilisez les bons types d’entrée (type="email", type="tel", inputmode="numeric") pour que les téléphones affichent le clavier approprié. Placez le bouton d’envoi là où un pouce peut l’atteindre, et gardez-le visible lorsque le clavier s’ouvre.

Interactions au survol seulement

Les téléphones ne survolent pas. Les info-bulles, menus déroulants et aperçus qui n’apparaissent qu’au survol sont invisibles pour les utilisateurs tactiles. Faites-les fonctionner aussi au toucher.

Consignes qui fonctionnent

Pour une nouvelle construction, dites-le dès le départ :

Construis ceci en partant du mobile. Une seule colonne sur les téléphones, deux colonnes à partir de la largeur tablette, mise en page complète sur ordinateur. Pas de défilement horizontal à 320 px de large, texte d’au moins 16 px, zones tactiles d’au moins 44 px, un bouton de menu sur les petits écrans, et des tableaux qui deviennent des cartes sur téléphone.

Pour une page existante, décrivez ce que vous voyez :

Sur les téléphones, la page /pricing défile latéralement et les trois cartes de forfait sont écrasées côte à côte. Empile les cartes verticalement sous 768 px, fais défiler horizontalement le tableau de comparaison dans son propre conteneur avec la colonne des fonctions figée, et garde la mise en page de bureau inchangée.

Vérifie chaque page à 375 px de large. Liste tout ce qui déborde, se chevauche, a un texte plus petit que 16 px, des zones tactiles plus petites que 44 px, ou ne fonctionne qu’au survol, puis corrige chacun de ces points.

Étapes

Confirmez la balise viewport dans l’en-tête de la page.
Testez à 320–375 px de large dans le mode appareil du navigateur ou un aperçu à la taille d’un téléphone. Faites défiler chaque page du haut vers le bas.
Corrigez d’abord le défilement horizontal. Trouvez l’élément trop large; tout le reste est difficile à juger tant qu’il est là.
Réglez la navigation : bouton de menu, actions clés visibles.
Vérifiez le texte, les zones tactiles et les formulaires sur chaque parcours clé : inscription, recherche, paiement, contact.
Gérez les tableaux et les médias : cartes ou conteneurs défilants, images et intégrations adaptatives.
Vérifiez les tailles intermédiaires. Faites glisser lentement la largeur du téléphone vers l’ordinateur; les mises en page cassent souvent autour de la largeur tablette.
Testez sur un vrai téléphone. Les émulateurs ratent des choses comme le clavier à l’écran qui cache un bouton, les encoches et la rapidité du site sur les données mobiles.

Erreurs courantes

Tester à une seule taille de téléphone. Vérifiez un petit téléphone, un grand téléphone et une tablette.
Cacher du contenu sur mobile pour que ça rentre. Google indexe la version mobile, et les utilisateurs de téléphone veulent la même information.
Désactiver le zoom dans la balise viewport.
Des images de taille bureau sur les téléphones, qui coûtent du temps de chargement et des données.
Des éléments fixes qui s’accumulent : un en-tête collant, une bannière de témoins et une bulle de clavardage peuvent couvrir la moitié de l’écran d’un téléphone.
Des fenêtres contextuelles impossibles à fermer sur un petit écran parce que le bouton de fermeture est hors de vue.

Liste de vérification mobile

Balise meta viewport présente; zoom non désactivé
Aucun défilement horizontal à 320 px sur aucune page
Texte d’environ 16 px; les champs ne déclenchent pas le zoom
Zones tactiles suffisamment grandes et espacées
Le menu fonctionne sur téléphone et au clavier
Tableaux lisibles sur téléphone (cartes, moins de colonnes ou conteneur défilant)
Images et intégrations s’adaptent; fichiers de bonne taille servis
Les formulaires utilisent les bons types d’entrée; le bouton d’envoi est accessible
Rien d’important ne dépend du survol
Testé sur au moins un vrai téléphone

L’adaptation de la mise en page fait aussi partie de l’accessibilité : WCAG exige que le contenu fonctionne à 320 px de large et à 200 % de zoom. Si vous construisez une app que les gens utiliseront chaque jour sur leur téléphone, comment créer une app web adaptée au mobile va plus loin, y compris les PWA installables.

La conception adaptative dans Mythex

Mythex construit des apps web adaptatives, et avec le forfait Pro, il peut les envelopper en apps Android et iPhone. Dans l’espace de travail, cliquez sur l’icône de téléphone au-dessus de l’aperçu (Passer en mode mobile) pour voir votre app dans un cadre à la taille d’un téléphone, et faites glisser le bord du cadre pour essayer d’autres largeurs (Aperçu et code). La documentation contient une brève consigne de départ pour corriger la mise en page sur petit écran, dans les consignes adaptatives mobiles. Vérifiez aussi sur un vrai téléphone : ouvrez l’URL publiée, ou partagez un lien d’aperçu et ouvrez-le sur votre téléphone.

Questions

Que signifie un site adaptatif sur mobile?

Un site web adaptatif ajuste sa mise en page à l’écran sur lequel il s’affiche. La même page et la même adresse se réorganisent pour un téléphone, une tablette ou un ordinateur : les colonnes s’empilent, les images rétrécissent, les menus se replient, au lieu d’afficher une page de bureau rapetissée ou un site mobile distinct.

Pourquoi mon site apparaît-il trop éloigné sur un téléphone?

C’est presque toujours l’absence de la balise meta viewport. Sans elle, les navigateurs mobiles affichent la page comme si l’écran faisait la largeur d’un ordinateur, puis la rétrécissent. Ajoutez une balise viewport avec width=device-width et initial-scale=1.

Quelles tailles d’écran devrais-je prendre en compte?

Concevez pour le contenu, pas pour des appareils : commencez vers 320 à 375 pixels de largeur et ajoutez des points de rupture là où la mise en page commence à mal paraître. Des cadres comme Tailwind CSS utilisent par défaut des points de rupture autour de 640, 768, 1024 et 1280 pixels.

L’adaptation mobile influence-t-elle le classement dans Google?

Google utilise la version mobile d’une page pour l’indexation; un contenu ou des liens absents sur mobile peuvent donc être absents de la vue qu’en a Google. Une mise en page mobile utilisable compte aussi pour les Core Web Vitals et pour les visiteurs.