Pour rendre un site adapté au mobile, ajoutez une balise meta viewport correcte, laissez la mise en page s’ajuster à la largeur de l’écran au lieu de largeurs fixes en pixels, utilisez des media queries pour réorganiser le contenu sur petit écran, rendez le texte lisible et les boutons faciles à toucher, et servez des images dimensionnées pour les téléphones. Ensuite, testez dans de vrais affichages mobiles. Les dix corrections ci-dessous couvrent ce que presque tous les sites non responsive ratent, dans l’ordre où les traiter.
1. Ajoutez la balise meta viewport
Sans elle, les téléphones supposent que la page a été conçue pour un ordinateur, l’affichent sur environ 980 px de large puis la réduisent. Le texte devient minuscule et il faut zoomer avec les doigts. Placez ceci dans le <head> de chaque page :
<meta name="viewport" content="width=device-width, initial-scale=1">N’ajoutez pas user-scalable=no ni maximum-scale=1 : bloquer le zoom pénalise les personnes qui ont besoin d’un texte plus grand. Détails : la balise meta viewport expliquée.
2. Remplacez les largeurs fixes par des largeurs fluides
Un conteneur en width: 960px ne peut pas tenir sur un écran de 390 px. Utilisez des pourcentages, max-width et les outils de mise en page modernes :
.container {
width: min(100% - 2rem, 72rem);
margin-inline: auto;
}Flexbox avec flex-wrap: wrap et CSS Grid avec repeat(auto-fit, minmax(16rem, 1fr)) font passer les colonnes à la ligne d’elles-mêmes, souvent sans aucune media query.
3. Faites rétrécir les images et les contenus intégrés
img, video, iframe {
max-width: 100%;
height: auto;
}Pour les vidéos et cartes intégrées, indiquez aspect-ratio: 16 / 9; width: 100% pour qu’elles se redimensionnent sans casser la mise en page. Cette seule règle supprime bien des cas de défilement horizontal.
4. Réorganisez le contenu avec des media queries
Certaines mises en page doivent changer, pas seulement rétrécir : la barre latérale passe sous le contenu, un pied de page à quatre colonnes n’en a plus qu’une. Écrivez d’abord la version mobile et ajoutez de la complexité pour les écrans larges :
.layout { display: grid; gap: 2rem; }
@media (min-width: 64rem) {
.layout { grid-template-columns: 3fr 1fr; }
}Le choix des largeurs est traité dans les breakpoints responsive, la syntaxe dans le guide des media queries CSS, et l’approche elle-même dans le design mobile first.
5. Utilisez une typographie lisible
Réglez le texte courant à 16 px minimum (1rem dans la plupart des navigateurs) avec une hauteur de ligne d’environ 1,5. Utilisez des unités rem pour que le texte respecte la taille de police choisie dans le navigateur. Gardez une longueur de ligne confortable sur grand écran avec max-width: 65ch sur les blocs de texte. Les titres peuvent suivre la taille de l’écran grâce à clamp() :
h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }6. Prévoyez des zones tactiles grandes et espacées
Un doigt est moins précis qu’un pointeur de souris. Les WCAG 2.2 fixent une taille de cible minimale de 24 × 24 pixels CSS ; les recommandations d’Apple et de Google conseillent environ 44 à 48 px pour un appui confortable. Donnez assez de padding aux liens dans le texte et aux boutons icônes, et assez d’espace entre éléments voisins.
7. Concevez une navigation qui fonctionne sans survol
Le survol n’existe pas sur écran tactile. Sur petit écran, utilisez un bouton de menu qui ouvre une liste au toucher, limitez le nombre d’entrées principales et vérifiez que les sous-menus s’ouvrent au toucher comme au clavier. Assurez-vous que le menu se referme quand on choisit un lien.
8. Adaptez les formulaires aux téléphones
- Utilisez les bons types de champ (
email,tel,url,number) etinputmode, pour que le téléphone affiche le clavier adapté. - Ajoutez les attributs
autocomplete(name,email,street-address,cc-number) pour que la saisie automatique fonctionne. - Gardez un texte de champ d’au moins 16 px : Safari sur iOS zoome sur les champs plus petits quand ils prennent le focus.
- Placez les libellés au-dessus des champs sur écran étroit et donnez toute la largeur au bouton d’envoi.
9. Servez des images dimensionnées pour le mobile
Une image d’en-tête de 2 400 px représente un gros téléchargement sur téléphone. Utilisez des images responsive pour que le navigateur choisisse le bon fichier :
<img src="hero-800.jpg"
srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1600.jpg 1600w"
sizes="(min-width: 64rem) 50vw, 100vw"
alt="Tableau de bord du produit sur un téléphone">Les formats modernes comme WebP et AVIF réduisent encore le poids. Ajoutez loading="lazy" aux images situées sous le premier écran. Pour accélérer les pages, voir le guide du test de vitesse mobile.
10. Supprimez les irritants mobiles
Les pop-ups plein écran à l’arrivée, les bulles de chat posées sur le bouton « Acheter » et les barres fixes qui occupent un quart de l’écran rendent un site désagréable sur téléphone. Retardez les pop-ups, rendez-les faciles à fermer et gardez les éléments fixes compacts.
Comment vérifier votre travail
Après chaque modification, regardez la page à taille de téléphone. Le plus rapide est un affichage mobile dans Chrome sur ordinateur : le mode appareil de DevTools ou une extension en un clic comme Mobile View Extension, qui recharge l’onglet avec un vrai user agent mobile et permet de comparer les tailles d’appareils. Lancez ensuite un audit Lighthouse mobile et, avant la mise en ligne, la checklist de test d’un site mobile. Les outils qui remplacent l’ancien test en un clic de Google sont présentés dans les alternatives au test d’optimisation mobile.
Votre site tourne sous WordPress ? Les principes restent les mêmes, mais la plupart des corrections se font dans le thème. Voir comment rendre un site WordPress responsive.
Questions fréquentes
Quel est le moyen le plus rapide de rendre un vieux site compatible mobile ?
Ajoutez la balise meta viewport, mettez max-width: 100% sur les images et contenus intégrés, supprimez les largeurs fixes des conteneurs principaux et empilez les colonnes avec une media query. Cela règle en un après-midi l’essentiel du défilement horizontal et du texte minuscule.
Faut-il un site mobile séparé ?
Non. Un seul site responsive qui s’adapte à l’écran est plus simple à maintenir, et c’est ce que recommande Google. Les sites m. séparés sont une approche dépassée.
Comment savoir si mon site est adapté au mobile ?
Regardez-le à taille de téléphone, lancez un audit Lighthouse en mode mobile et vérifiez la capture de l’inspection d’URL dans Google Search Console. Ensemble, ces outils remplacent le test d’optimisation mobile retiré par Google.