Un site responsive est un site qui s’adapte tout seul à la taille de l’écran sur lequel on le regarde : votre iPhone, une tablette ou un grand écran d’ordinateur. Vous l’avez déjà vécu sans y penser. Sur l’ordinateur, le menu s’étale en haut de la page. Sur le téléphone, il se cache derrière trois petits traits. C’est le même site, simplement rangé autrement.
D’où vient ce mot ?
« Responsive » est un mot anglais qui veut dire « qui réagit ». Le site réagit à la largeur de l’écran. On dit aussi « site adapté au mobile ». En français, les professionnels gardent presque toujours le mot anglais, alors autant le connaître.
Avant, beaucoup de sites étaient conçus uniquement pour les ordinateurs. Sur un téléphone, on voyait la page en tout petit. Il fallait écarter deux doigts pour zoomer, puis se promener à droite et à gauche pour lire une ligne. Vous vous en souvenez peut-être. Aujourd’hui, une bonne partie des visites se font sur téléphone, et un site qui oblige à zoomer fait fuir les visiteurs.
Comment ça marche concrètement ?
Un site est fait de plusieurs sortes de fichiers. Le HTML contient le texte et la structure : le titre, les paragraphes, les photos. Le CSS s’occupe de l’apparence : les couleurs, les polices, la place de chaque élément. C’est lui qui fait tout le travail du responsive.
Dans le CSS, on écrit des consignes du genre : « si l’écran fait moins de telle largeur, placer les blocs les uns sous les autres et grossir un peu le texte ». Ces consignes conditionnelles s’appellent des media queries, à peu près « questions posées à l’écran ». Le navigateur, Safari ou Chrome, mesure la largeur de l’écran, lit les consignes et applique celles qui correspondent.
Il y a aussi une petite ligne indispensable en haut de chaque page, la balise <meta name="viewport">. Elle dit au téléphone : « affiche la page à la vraie largeur de l’écran, sans imiter un ordinateur ». Sans elle, même un CSS parfait ne sert à rien.
Un exemple réel
Prenez la page d’une boulangerie. Sur l’ordinateur, on voit à gauche une grande photo des croissants, à droite les horaires et l’adresse, et en haut un menu avec cinq liens. Sur l’iPhone, la photo passe en haut, sur toute la largeur. Les horaires viennent juste en dessous, en gros caractères. Le menu se replie derrière une icône. Le numéro de téléphone devient un bouton qu’on touche pour appeler.
Rien n’a été écrit deux fois. Il n’y a qu’un seul site, une seule adresse, un seul contenu à mettre à jour. Seule la mise en page change.
Pourquoi Google y tient
Google regarde d’abord la version téléphone de votre site pour décider de sa place dans les résultats. On appelle ça l’indexation mobile first, « le mobile d’abord ». Un site pénible à lire sur téléphone part donc avec un handicap pour le référencement, c’est-à-dire pour être bien placé dans le moteur de recherche.
Il y a aussi une raison plus humaine : vos clients vous cherchent souvent dans la rue, téléphone en main, pour trouver votre adresse ou vos horaires. S’ils doivent zoomer et plisser les yeux, ils iront voir le voisin.
Les mots qu’on vous dira
- Mobile first : on conçoit d’abord la version téléphone, puis on l’agrandit pour l’ordinateur. C’est souvent la meilleure méthode.
- Menu burger : l’icône à trois petits traits qui ouvre le menu sur téléphone. Le nom vient de sa ressemblance avec un hamburger vu de côté.
- Point de rupture : la largeur d’écran à partir de laquelle la mise en page change.
Ce que vous avez à faire
Le test le plus simple tient dans votre poche. Ouvrez votre site sur votre iPhone. Pouvez-vous tout lire sans zoomer ? Les boutons sont-ils assez gros pour le pouce ? Rien ne dépasse sur le côté ? Si la réponse est oui partout, votre site est responsive. Sinon, la correction se fait dans le CSS, et c’est un chantier tout à fait courant pour un développeur ou un assistant IA.