Responsive design : Pourquoi votre site apparaît mal sur mobile ?

Vous avez un site qui semble parfaitement normal sur ordinateur, mais qui apparaît déformé, trop large, minuscule ou difficile à utiliser sur smartphone ? Le responsive design permet justement d’adapter automatiquement l’affichage d’un site web aux différentes tailles d’écran. Lorsqu’un site n’est pas correctement responsive, les visiteurs peuvent devoir zoomer, faire défiler horizontalement ou chercher des boutons qui sortent de l’écran.

Aujourd’hui, un site web doit pouvoir fonctionner correctement sur un ordinateur, une tablette et un téléphone. Mais le responsive design ne consiste pas simplement à « réduire » la version ordinateur. Il faut concevoir une interface capable de réorganiser son contenu en fonction de l’espace réellement disponible.

Quelle est la définition du responsive design ?

Le responsive design, appelé aussi responsive web design, est une approche de conception web qui permet à une page de s’adapter à la taille et aux caractéristiques de l’écran sur lequel elle est consultée.

En français, on peut parler de conception adaptative, de design réactif ou de conception web adaptative. Le terme anglais « responsive » reste cependant très largement utilisé par les professionnels du web.

Concrètement, un site responsive peut modifier sa mise en page selon la largeur disponible :

• plusieurs colonnes sur ordinateur ;
• deux colonnes ou une disposition simplifiée sur tablette ;
• une seule colonne sur smartphone ;
• un menu complet sur grand écran ;
• un menu compact sur mobile ;
• des images qui réduisent leur largeur ;
• des boutons suffisamment grands pour être utilisés au doigt.

Le contenu peut rester identique, mais sa présentation s’adapte.

Le responsive design n’est donc pas une technologie unique. C’est plutôt une méthode de conception qui combine plusieurs techniques HTML et CSS pour rendre une interface adaptable.

Comment dit-on « responsive » en français ?

Dans le domaine du web, responsive est un terme anglais que les développeurs et designers utilisent couramment en français.

Les expressions françaises possibles sont :

• conception web adaptative ;
• design adaptatif ;
• conception réactive ;
• site adapté aux écrans ;
• site compatible mobile.

Ainsi, « responsive design » peut être traduit par conception web adaptative.

Cependant, dans une conversation professionnelle, un développeur dira généralement qu’un site est « responsive » plutôt que « conçu de manière adaptative ».

Pourquoi un site responsive apparaît-il mal sur mobile ?

Un site peut fonctionner correctement sur ordinateur tout en étant inutilisable sur smartphone pour plusieurs raisons.

La première cause est souvent l’utilisation de largeurs fixes. Par exemple, si un bloc possède une largeur de 1200px, il risque de dépasser largement la largeur d’un téléphone.

Le navigateur doit alors afficher une partie du contenu en dehors de l’écran. L’utilisateur doit faire défiler horizontalement la page pour voir la suite.

D’autres problèmes sont fréquents :

• images trop larges ;
• textes trop petits ;
• boutons difficiles à toucher ;
• menu qui sort de l’écran ;
• colonnes qui restent côte à côte sur mobile ;
• tableaux trop larges ;
• vidéos ou iframes qui débordent ;
• éléments positionnés avec des valeurs fixes ;
• mauvaise utilisation des media queries ;
• absence de balise viewport ;
• CSS prévu uniquement pour ordinateur ;
• thème ou plugin mal adapté aux mobiles.

Un site responsive doit donc être pensé pour plusieurs tailles d’écran et pas uniquement testé sur un ordinateur.

Responsive design CSS : comment ça fonctionne ?

Le responsive design CSS repose notamment sur les grilles flexibles, les unités relatives et les media queries.

Une media query permet d’appliquer certaines règles CSS uniquement lorsque certaines conditions sont réunies, par exemple lorsque la largeur de l’écran est inférieure à une certaine valeur.

Voici un exemple simple :

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }
}

Sur ordinateur, les trois éléments peuvent être affichés côte à côte.

Sur un écran plus petit, ils passent automatiquement sur une seule colonne.

C’est l’un des principes fondamentaux du CSS responsive.

Les méthodes modernes comme Flexbox et CSS Grid facilitent également la création de mises en page adaptatives sans devoir prévoir une règle CSS pour chaque modèle de téléphone.

Responsive mobile : pourquoi commencer par le petit écran ?

Une méthode très utilisée est le mobile-first.

Le principe consiste à concevoir d’abord l’interface pour un écran étroit, puis à ajouter progressivement des améliorations lorsque l’espace disponible augmente.

Par exemple :

.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

On commence donc avec une colonne, puis deux, puis trois lorsque l’écran devient suffisamment large.

Cette approche évite de concevoir une énorme interface desktop avant d’essayer de la faire rentrer sur un smartphone. MDN recommande notamment de penser les mises en page en fonction de l’espace disponible plutôt que de cibler uniquement une liste précise de tailles d’appareils.

HTML responsive design : la balise viewport est essentielle

Un élément HTML particulièrement important pour le responsive mobile est la balise viewport.

Elle se place généralement dans le <head> :

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

Elle indique au navigateur mobile comment interpréter la largeur de la page.

Sans cette configuration, le navigateur peut utiliser une largeur de rendu virtuelle beaucoup plus importante que la largeur physique de l’écran. Les media queries prévues pour les petits écrans peuvent alors ne pas fonctionner comme prévu.

Pour un site responsive, cette balise doit donc faire partie de la structure HTML de base.

Comment rendre une image responsive ?

Une image trop large est l’une des causes classiques d’un mauvais affichage mobile.

La solution CSS la plus simple consiste à empêcher l’image de dépasser son conteneur :

img {
    max-width: 100%;
    height: auto;
}

L’image peut ainsi réduire sa largeur lorsque son conteneur devient plus petit, tout en conservant ses proportions.

Une autre approche peut être utilisée lorsqu’une image doit remplir une zone précise :

.image {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

La propriété object-fit: cover permet alors de remplir la zone tout en conservant les proportions, quitte à recadrer une partie de l’image.

Pour les sites qui utilisent beaucoup d’images, il faut également penser aux performances. Une image de plusieurs milliers de pixels destinée à un grand écran n’a pas toujours besoin d’être téléchargée dans cette même résolution sur un smartphone.

Le HTML propose notamment srcset, sizes et <picture> pour permettre au navigateur de sélectionner une ressource adaptée à la situation.

Responsive design exemple : avant et après

Imaginez une page présentant trois services.

Sur ordinateur, vous pouvez avoir :

[ Service 1 ] [ Service 2 ] [ Service 3 ]

Sur mobile, conserver cette structure peut rendre chaque colonne trop étroite.

Une meilleure présentation serait :

[        Service 1        ]

[        Service 2        ]

[        Service 3        ]

Le contenu reste le même. C’est uniquement la mise en page qui change.

C’est exactement le principe du responsive design : réorganiser l’interface pour conserver une bonne expérience utilisateur lorsque l’espace disponible diminue.

Comment savoir si mon site est responsive ?

Vous pouvez commencer par une vérification très simple.

Ouvrez votre site sur ordinateur puis réduisez progressivement la largeur de la fenêtre du navigateur.

Observez notamment :

• si une barre de défilement horizontale apparaît ;
• si le texte reste lisible ;
• si les images dépassent ;
• si les boutons restent accessibles ;
• si le menu s’adapte ;
• si les colonnes se réorganisent ;
• si les formulaires restent utilisables ;
• si les vidéos restent dans leur conteneur.

Vous pouvez également utiliser les outils de développement de votre navigateur pour simuler différentes tailles d’écran. Il est toutefois préférable de compléter cette simulation par des tests sur de vrais smartphones et tablettes.

Un site peut sembler correct à une largeur donnée et présenter un problème à une autre largeur.

Que faire si une page Internet ne s’affiche pas correctement ?

Il faut d’abord déterminer si le problème vient du site ou du navigateur.

Si plusieurs sites affichent normalement leur contenu mais qu’un seul site est déformé, le problème peut venir de ce site : CSS, JavaScript, thème, plugin, images ou mise en page responsive.

Si plusieurs sites présentent simultanément des problèmes d’affichage, vérifiez plutôt :

• le zoom du navigateur ;
• les extensions installées ;
• le cache ;
• JavaScript ;
• les paramètres d’affichage ;
• la connexion ;
• une éventuelle panne du navigateur.

Vous pouvez également ouvrir la page dans une fenêtre privée ou dans un autre navigateur. Si l’affichage redevient normal, cela donne une indication sur l’origine du problème.

Comment remettre ma page Internet normalement ?

Si une page semble soudainement trop grande ou trop petite, vérifiez d’abord le niveau de zoom du navigateur.

Sur la plupart des navigateurs desktop, le raccourci Ctrl + 0 permet de réinitialiser le zoom à sa valeur normale.

Si le problème persiste, essayez ensuite :

1. actualiser la page ;
2. ouvrir la page en navigation privée ;
3. tester un autre navigateur ;
4. désactiver temporairement les extensions ;
5. vider le cache du navigateur ;
6. vérifier si JavaScript est activé ;
7. tester le site depuis un autre appareil.

Si le problème apparaît uniquement sur smartphone et uniquement sur votre site, il est beaucoup plus probable qu’il s’agisse d’un problème de responsive design.

Comment remettre l’affichage normal sur Google ?

Il faut distinguer Google du site que vous consultez.

Si vous parlez d’une page de résultats Google qui semble trop grande ou trop petite, commencez par réinitialiser le zoom du navigateur avec Ctrl + 0 sur ordinateur.

Si c’est un site particulier qui s’affiche mal après avoir été ouvert depuis Google, Google n’est généralement pas responsable de la mise en page de cette page. Le problème peut se situer au niveau du site, de son CSS, de son thème ou du navigateur.

Cette distinction est importante : un mauvais affichage mobile n’est pas nécessairement un problème Google.

Les erreurs de responsive design les plus fréquentes

Certaines erreurs reviennent régulièrement dans les projets web.

Utiliser trop de largeurs fixes

Une règle comme :

.element {
    width: 1200px;
}

peut devenir problématique sur un téléphone.

Il vaut souvent mieux utiliser des dimensions flexibles :

.element {
    width: 100%;
    max-width: 1200px;
}

Oublier les images

Une image avec une largeur fixe peut dépasser de son conteneur.

img {
    max-width: 100%;
    height: auto;
}

constitue une bonne base pour éviter ce problème.

Créer des boutons trop petits

Un bouton qui semble confortable avec une souris peut être difficile à utiliser avec un doigt.

Le responsive design concerne donc aussi l’ergonomie, et pas uniquement la largeur des éléments.

Adapter uniquement l’écran d’accueil

Un site peut avoir une homepage parfaitement responsive tout en ayant des articles, formulaires, tableaux ou pages produits mal adaptés.

Il faut tester l’ensemble des parcours importants.

Multiplier les breakpoints inutilement

Il n’est pas nécessaire de créer une règle CSS pour chaque modèle d’iPhone, Samsung ou tablette.

Les breakpoints doivent plutôt être déterminés lorsque le contenu commence réellement à manquer d’espace. Les techniques modernes de mise en page permettent d’ailleurs de limiter la dépendance à des tailles d’appareils précises.

Responsive design et expérience utilisateur

Un site responsive ne doit pas seulement « rentrer » dans l’écran.

Il doit rester agréable à utiliser.

Sur mobile, l’utilisateur doit pouvoir :

• lire facilement les textes ;
• comprendre la hiérarchie de la page ;
• naviguer sans difficulté ;
• toucher les boutons ;
• remplir les formulaires ;
• consulter les images ;
• accéder rapidement aux informations importantes.

C’est pourquoi le responsive design est directement lié à l’expérience utilisateur (UX).

Un site qui oblige le visiteur à zoomer ou à faire défiler horizontalement donne immédiatement une impression de mauvaise qualité.

Responsive design et référencement naturel

Le responsive design joue également un rôle important dans la qualité globale d’un site destiné aux utilisateurs mobiles.

Google recommande notamment de proposer une expérience adaptée aux différents appareils. Mais il faut éviter une confusion : rendre un site responsive ne garantit pas à lui seul une meilleure position dans Google.

Le responsive design constitue plutôt une composante d’un site techniquement et ergonomiquement bien conçu.

Il faut donc également travailler :

• la vitesse de chargement ;
• les contenus ;
• la structure HTML ;
• l’accessibilité ;
• les performances ;
• les Core Web Vitals ;
• la qualité de l’expérience utilisateur.

Responsive design : la checklist avant de mettre un site en ligne

Avant de publier un site, vérifiez au minimum :

• la page d’accueil sur smartphone ;
• le menu mobile ;
• les titres et paragraphes ;
• les images ;
• les boutons ;
• les formulaires ;
• les tableaux ;
• les vidéos ;
• les cartes et contenus intégrés ;
• le footer ;
• les pages produits ;
• les articles ;
• les fenêtres modales ;
• les éléments avec position: fixed ;
• l’orientation portrait et paysage.

Testez ensuite plusieurs largeurs d’écran.

Le véritable objectif n’est pas d’obtenir exactement le même affichage partout. Il est de proposer une expérience cohérente et confortable sur chaque appareil.

Faut-il refaire un site qui n’est pas responsive ?

Pas forcément.

Dans certains cas, quelques corrections CSS et HTML suffisent : images qui débordent, mauvais width, media queries manquantes, problème de viewport ou menu mal adapté.

Dans d’autres situations, le problème est plus profond. Le thème peut être ancien, la structure HTML peut être difficile à maintenir ou plusieurs composants peuvent avoir été construits uniquement pour desktop.

Une refonte responsive peut alors être plus pertinente qu’une succession de correctifs.

L’essentiel est donc de commencer par un diagnostic précis avant de décider de reconstruire entièrement le site.

Si votre site professionnel s’affiche mal sur mobile ou si vous souhaitez moderniser son interface pour tous les écrans, vous pouvez découvrir mes services.

Conclusion

Le responsive design consiste à concevoir un site capable de s’adapter à différents écrans, et non simplement à réduire une page destinée à l’ordinateur.

Un mauvais affichage mobile peut venir d’une largeur fixe, d’une image trop grande, d’une mauvaise utilisation des media queries, d’un menu non adapté, d’un problème de viewport ou d’une structure CSS mal pensée.

La bonne méthode consiste à construire une mise en page flexible, utiliser les possibilités modernes de CSS, rendre les images adaptatives, prévoir une navigation mobile efficace et tester réellement le site sur différentes tailles d’écran.

Si votre site fonctionne bien sur ordinateur mais mal sur smartphone, le problème n’est donc pas forcément à chercher dans le téléphone. Il faut d’abord examiner la manière dont le site a été conçu pour s’adapter à l’écran.