Comment rendre un site web responsive pour mobile

Pour rendre un site web responsive pour mobile, ajoutez une balise meta viewport, construisez la mise en page en mobile-first avec des largeurs flexibles, et utilisez des points de rupture CSS pour la réorganiser sur les grands écrans — en empilant les colonnes, en repliant le menu et en adaptant la taille des images. Vérifiez ensuite chaque page à la largeur d'un téléphone : défilement horizontal, texte trop petit, boutons trop petits pour être touchés. Sur un site créé par IA, un prompt clair suivi d'une passe dans un aperçu de taille téléphone règle en général l'essentiel.

Ce qu'est vraiment le design responsive

Un site responsive utilise un seul ensemble de pages et d'URL qui s'adaptent à l'écran. Au lieu d'un site « m. » séparé, le CSS modifie la mise en page à certaines largeurs, appelées points de rupture (breakpoints). 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 des pourcentages, flexbox et grid plutôt que des largeurs fixes en pixels.
• Les media queries (ou les classes de frameworks 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 tenir dans leur conteneur.

C'est important parce qu'une grande partie de votre trafic provient probablement des téléphones, et parce que Google indexe la version mobile de vos pages. Si un contenu ou des liens n'existent que sur ordinateur, Google ne les verra peut-être pas non plus.

Options et compromis

Le mobile-first 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 parties qui cassent le plus souvent

La balise viewport

Si une page ressemble à un petit site de bureau sur 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 pincement pour zoomer rend le site plus difficile à utiliser pour les personnes malvoyantes.

Largeurs fixes et défilement horizontal

Le bug responsive le plus courant est un élément plus large que l'écran : un conteneur à width: 1200px fixe, un tableau large, une URL ou un bloc de code longs, 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 couper à la ligne, et donnez aux éléments larges leur propre zone de défilement.

Navigation

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 d'environ 16 px est un minimum raisonnable sur téléphone. Les champs avec un texte plus petit font zoomer les iPhone au moment où on les touche.
• Rendez les boutons et les liens faciles à toucher. La norme WCAG 2.2 AA fixe un minimum 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 voisins pour que les gens ne touchent pas le mauvais.

Tableaux et données

Les tableaux larges sont la partie la plus difficile d'une application responsive. Options, par ordre de préférence : afficher moins de colonnes sur téléphone, transformer chaque ligne en carte, ou placer le tableau dans un conteneur à défilement horizontal 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 conteneur responsive pour conserver leur ratio. Des images plus légères rendent aussi les pages plus rapides — voir comment rendre votre site plus rapide.

Formulaires

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

Interactions réservées au survol

Les téléphones ne survolent pas. Les infobulles, menus déroulants et aperçus qui n'apparaissent qu'au survol sont invisibles pour les personnes qui utilisent le tactile. Faites-les fonctionner aussi au toucher.

Prompts qui fonctionnent

Pour une création neuve, dites-le dès le départ :

Construis ceci en mobile-first. Une seule colonne sur téléphone, deux colonnes à partir de la largeur tablette, mise en page complète sur ordinateur. Pas de défilement horizontal à 320 px de large, texte du corps 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 téléphone, la page /pricing défile latéralement et les trois cartes de forfaits sont écrasées côte à côte. Empile les cartes verticalement sous 768 px, fais défiler le tableau comparatif horizontalement dans son propre conteneur avec la colonne des fonctionnalités figée, et garde la mise en page desktop 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 ou des zones tactiles plus petites que 44 px, ou ne fonctionne qu'au survol, puis corrige chaque point.

Étape par étape

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

Erreurs fréquentes

• Ne tester qu'une seule taille de téléphone. Vérifiez un petit téléphone, un grand téléphone et une tablette.
• Masquer du contenu sur mobile pour que ça rentre. Google indexe la version mobile, et les utilisateurs de téléphone veulent les mêmes informations.
• Désactiver le zoom dans la balise viewport.
• Des images de taille bureau sur téléphone, 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 cookies et une bulle de chat peuvent couvrir la moitié de l'écran d'un téléphone.
• Des fenêtres modales impossibles à fermer sur petit écran, parce que le bouton de fermeture est hors de l'écran.

Liste de contrôle mobile

• Balise meta viewport présente ; zoom non désactivé
• Aucun défilement horizontal à 320 px sur aucune page
• Texte du corps d'environ 16 px ; les champs ne déclenchent pas de zoom
• Zones tactiles suffisamment grandes et espacées
• Menu fonctionnel 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 ; des fichiers de bonne taille sont servis
• Les formulaires utilisent les bons types de saisie ; le bouton d'envoi est accessible
• Rien d'important ne dépend du survol
• Testé sur au moins un vrai téléphone

La mise en page responsive fait aussi partie de l'accessibilité : le WCAG demande que le contenu fonctionne à 320 px de large et à 200 % de zoom. Si vous créez une application que les gens utiliseront chaque jour sur leur téléphone, comment créer une application web adaptée au mobile va plus loin, notamment avec les PWA installables.

Le responsive sur Mythex

Mythex crée des applications web responsives, et sur Pro il peut les encapsuler en applications Android et iPhone. Dans l'espace de travail, cliquez sur l'icône téléphone au-dessus de l'aperçu (Passer en mode mobile) pour voir votre application dans un cadre de taille téléphone, et faites glisser le bord du cadre pour essayer d'autres largeurs (Aperçu et code). La documentation propose un court prompt de départ pour corriger la mise en page sur petit écran dans les prompts responsive mobile. 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