« Est-ce que mon site est responsive ? » La question a l'air technique. Elle ne l'est pas. Elle revient à demander si votre site reste lisible et utilisable quand on le regarde sur un écran de six pouces, tenu d'une seule main, dans la rue, avec du soleil sur la vitre. La réponse se lit en cinq minutes, sans outil et sans développeur.
Cet article explique ce que le mot recouvre vraiment, comment vérifier vous-même l'état de votre site, quels défauts reviennent presque toujours, et ce que coûte leur correction. Les montants cités sont des ordres de grandeur constatés sur le marché français : ils servent à situer un devis reçu, pas à en fixer un.
Responsive, adaptatif, mobile : trois mots pour deux choses différentes
Trois termes circulent dans les devis, et ils ne désignent pas la même chose. La confusion n'est pas grave en soi, mais elle fait payer des prestations très différentes sous un même nom.
Responsive décrit un site unique dont la mise en page se réorganise en continu selon la largeur disponible. Une seule adresse, un seul contenu, un seul jeu de fichiers : c'est la disposition qui bouge, jamais le fond. L'image utile est celle d'un liquide versé dans un récipient. Il prend la forme du verre, du bol ou de la carafe, mais c'est le même liquide et on n'en fabrique pas trois.
Adaptatif décrit un site qui bascule entre quelques mises en page fixes, dessinées à l'avance pour trois ou quatre largeurs types. Plutôt qu'une rampe, un escalier : entre deux marches rien ne bouge, et au passage de la marche tout change d'un coup. C'est plus simple à dessiner et plus prévisible à valider ; c'est aussi moins souple face aux tailles d'écran qui n'existaient pas le jour où le site a été fait.
Site mobile, au sens ancien du terme, désigne une seconde version du site servie sur une autre adresse, souvent de la forme m.monsite.fr. Deux sites à tenir, deux contenus à mettre à jour, deux jeux d'adresses à faire indexer. La pratique a été abandonnée par à peu près tout le monde, mais des sites construits ainsi tournent encore, et leur entretien coûte mécaniquement le double.
Ce que vous pouvez vérifier vous-même. Ouvrez votre site sur un ordinateur et réduisez lentement la largeur de la fenêtre en tirant sur son bord droit. Si la mise en page glisse sans à-coups, le site est responsive. Si elle reste figée puis bascule d'un seul coup à deux ou trois largeurs précises, il est adaptatif. Et si, en ouvrant le site sur un téléphone, l'adresse change pour commencer par m., vous avez un site mobile séparé.
Pourquoi ce n'est plus une option
Google explore et indexe les sites à partir de leur version mobile. Ce n'est pas une préférence esthétique, c'est le fonctionnement annoncé publiquement : ce que le robot voit sur un écran de téléphone est ce qui sert à comprendre la page et à la classer. Un contenu présent sur l'ordinateur mais masqué, tronqué ou illisible sur le téléphone est un contenu qui pèse moins, parfois pas du tout.
La conséquence est contre-intuitive et vaut la peine d'être posée clairement. Un site non responsive n'est pas seulement désagréable sur téléphone : il est aussi diminué dans les résultats affichés sur un ordinateur, puisque c'est la version mobile qui a servi de référence à l'indexation. On perd donc des positions auprès de visiteurs qui, eux, n'auraient jamais sorti leur téléphone.
Le second argument n'a rien à voir avec les moteurs. Un visiteur qui doit zoomer pour lire votre numéro, faire glisser la page pour voir la fin d'une phrase, ou viser un bouton de trois millimètres de côté, n'est pas en train d'évaluer votre sérieux sur le fond. Il en tire une conclusion en trois secondes, et elle est rarement à votre avantage. Le jugement porte sur le soin, pas sur la technique.
Ce que vous pouvez vérifier vous-même. Dans votre outil de mesure d'audience, cherchez la répartition des visites par type d'appareil sur les douze derniers mois. Vous obtenez votre propre proportion, qui vaut infiniment mieux qu'une moyenne nationale. Si vous n'avez pas d'outil de mesure, écoutez vos clients : ceux qui vous disent « j'ai regardé votre site dans la voiture » vous donnent la réponse sans le savoir.
Le test de cinq minutes : sept vérifications sur votre propre téléphone
Ce test ne demande aucun outil et aucune compétence. Prenez votre téléphone, coupez le wifi pour être dans les conditions d'un visiteur en déplacement, et faites les sept vérifications dans l'ordre. Notez ce qui échoue : cette liste est exactement ce que vous transmettrez à un prestataire, et elle vaut mieux qu'un audit payant.
- Le premier écran. Ouvrez la page d'accueil. Sans faire défiler et sans zoomer : comprend-on ce que vous faites et pour qui ? Voit-on un moyen de vous joindre ?
- La lecture sans zoom. Lisez un paragraphe entier de votre page de présentation, à bout de bras. Si vous devez écarter deux doigts pour agrandir, le texte est trop petit.
- Le débordement latéral. Posez le doigt au milieu de l'écran et poussez la page vers la gauche. Elle ne doit pas bouger. Si une bande vide apparaît sur la droite, un élément de la page est plus large que l'écran.
- Le menu au pouce. Tenez le téléphone d'une seule main, ouvrez le menu, puis atteignez la dernière entrée de la liste. Si vous devez changer de main ou viser soigneusement, le menu a été dessiné pour une souris.
- Le numéro et l'adresse. Appuyez sur votre numéro de téléphone : l'appareil doit proposer d'appeler. Appuyez sur votre adresse postale : elle devrait ouvrir un plan. Sinon, ce sont des images ou du texte inerte.
- Le formulaire, en entier. Remplissez votre propre formulaire de contact et envoyez-le pour de bon. Vous vérifiez deux choses d'un coup : qu'il est utilisable au doigt, et que le message arrive dans une boîte que quelqu'un relève.
- La rotation. Tournez le téléphone en mode paysage, puis revenez au portrait. La page doit se réorganiser sans laisser de blocs superposés ni de texte coupé en deux.
Sept vérifications, cinq minutes, aucune compétence particulière. Un site qui les passe toutes est responsive au seul sens qui compte : celui de la personne qui le tient dans la main. Un site qui en rate trois n'a pas besoin d'un diagnostic à quatre chiffres pour qu'on sache par où commencer.
Les huit défauts qui reviennent toujours
Sur un site ancien ou monté à la hâte, ce ne sont jamais huit défauts différents d'un site à l'autre : ce sont toujours les mêmes huit. Les voici, avec ce qui les provoque et ce qu'ils coûtent concrètement au visiteur.
| Ce qu'on voit | Ce qui le cause | Ce que ça coûte au visiteur |
|---|---|---|
| Texte trop petit | Une taille de police fixée en pixels pour un écran d'ordinateur, jamais réajustée | Il zoome, perd le fil de la ligne, et abandonne au deuxième paragraphe |
| Boutons trop rapprochés | Des liens empilés sans marge, dessinés pour la précision d'un curseur de souris | Il touche le mauvais lien, revient en arrière, recommence, puis renonce |
| Tableau qui déborde | Un tableau à largeur fixe, le plus souvent collé depuis un tableur | Il voit deux colonnes sur cinq, et ne sait même pas qu'il en manque trois |
| Image non redimensionnée | Une photo de plusieurs milliers de pixels de large servie telle quelle | La page pousse vers la droite et se charge lentement en données mobiles |
| Menu injouable | Un menu déroulant qui s'ouvre au survol de la souris, geste qui n'existe pas au doigt | Il ne trouve aucune page en dehors de l'accueil et repart |
| Formulaire qui sort de l'écran | Des champs à largeur fixe, plus larges que l'écran d'un téléphone | Il ne voit pas ce qu'il tape, se trompe, et n'envoie rien |
| Fenêtre surgissante impossible à fermer | Une croix de fermeture placée hors de l'écran ou trop petite pour un doigt | Il ferme l'onglet : c'est le défaut qui fait perdre le plus de monde d'un coup |
| Numéro non cliquable | Un numéro écrit en texte simple, ou incrusté dans une image d'en-tête | Il doit le mémoriser, changer d'application, le retaper. Souvent, il ne le fait pas |
Un point mérite d'être souligné, parce qu'il change tout pour le budget : ces huit défauts sont indépendants les uns des autres. On peut en corriger trois cette semaine et laisser les cinq autres pour plus tard. La question « faut-il refaire le site ? » se pose donc beaucoup plus tard qu'on ne le croit, et souvent pour de tout autres raisons.
Le débordement horizontal : le défaut le plus courant, le plus vite corrigé
C'est celui qu'on rencontre le plus, et celui que presque personne ne sait nommer. Le symptôme est facile à reconnaître : la page glisse latéralement, une bande vide apparaît sur le côté, et l'ensemble du texte semble décalé. L'image mentale est celle d'une nappe trop grande pour la table. Elle pend d'un côté, et tout ce qui est posé dessus paraît de travers.
La cause est toujours un élément unique plus large que l'écran, jamais la page entière. Les coupables habituels sont peu nombreux, et il suffit d'en trouver un pour que tout se remette droit.
- Une image insérée avec une largeur fixe en pixels, héritée d'une époque où tous les écrans faisaient à peu près la même taille.
- Un tableau de tarifs à cinq colonnes, copié depuis un tableur, qui refuse de se replier faute d'y avoir été préparé.
- Une adresse internet ou un mot très long écrit sans espace, qui pousse le bloc qui le contient au-delà du bord.
- Un élément décoratif — une bande de couleur, une ombre, un cadre — qui dépasse volontairement de quelques dizaines de pixels sur grand écran, et garde ce dépassement sur téléphone.
- Une largeur de conteneur écrite en pixels plutôt qu'en pourcentage, dans une page ajoutée après coup par quelqu'un de pressé.
La correction est presque toujours rapide, parce qu'elle consiste à trouver l'élément fautif plus qu'à repenser la mise en page. C'est typiquement l'intervention qui se fait en une demi-journée et qui améliore d'un coup la lecture de toutes les pages, puisque le coupable se cache souvent dans un élément partagé : l'en-tête, le pied de page, ou un bloc réutilisé partout.
Ce que vous pouvez vérifier vous-même. Faites glisser la page vers la gauche à trois hauteurs différentes : en haut, au milieu, en bas. L'endroit où la bande vide apparaît indique approximativement où se trouve l'élément trop large. Notez la page et la hauteur : c'est une information précieuse pour celui qui corrigera, et elle réduit directement le temps qu'il facturera.
Les formulaires sur téléphone : le clavier, les champs, la longueur
Le formulaire de contact est la seule page dont l'échec se mesure directement : personne n'écrit. Trois choses le font échouer sur un téléphone, et aucune des trois ne se voit depuis un ordinateur.
Le clavier
Chaque champ peut annoncer au téléphone quel type d'information on attend de lui. Un champ déclaré comme une adresse électronique fait apparaître un clavier avec l'arobase ; un champ déclaré comme un numéro fait apparaître un pavé numérique. Quand cette déclaration manque, le visiteur cherche l'arobase dans un clavier alphabétique et bascule trois fois de disposition pour taper dix chiffres. Ce n'est pas un détail cosmétique : c'est la différence entre huit secondes et quarante.
Les champs
Une zone à toucher doit être assez grande pour un pouce, et assez éloignée de la suivante pour qu'on ne se trompe pas de cible. Les étiquettes placées à l'intérieur du champ disparaissent dès qu'on commence à écrire, et le visiteur ne sait plus à quelle question il répond. Les menus déroulants de trente entrées sont une épreuve au doigt : quand la liste est courte, quelques boutons font mieux le travail.
La longueur
Chaque champ ajouté est une occasion supplémentaire d'abandonner. Un formulaire de contact d'entreprise a besoin de trois choses : de quoi vous rappeler, de quoi identifier la personne, et de quoi comprendre la demande. Le reste — la civilité, la raison sociale, le budget envisagé, la façon dont on vous a connu — se demande dans la réponse, pas dans le formulaire. Ce que doit contenir chaque page d'un site vitrine, celle-ci comprise, est détaillé dans les pages d'un site vitrine et quoi écrire dedans.
Ce que vous pouvez vérifier vous-même. Remplissez votre propre formulaire depuis un téléphone, debout, sans vous appliquer, comme le ferait quelqu'un dans une salle d'attente. Puis vérifiez que le message est bien arrivé. Un formulaire qui affiche « merci » sans rien envoyer est un défaut plus fréquent qu'on ne l'imagine, et il ne se signale jamais tout seul.
Rustine, thème ou refonte : l'arbitrage honnête
Trois réponses existent à « mon site n'est pas responsive », et elles n'ont ni le même prix ni la même durée de vie. La bonne n'est pas toujours la plus ambitieuse.
- La rustine. On corrige les défauts un par un sur le site existant : le débordement, les tailles de texte, les zones à toucher, le formulaire. C'est rapide et peu coûteux. La contrepartie est qu'on empile des correctifs sur une base qui n'a pas été pensée pour cela ; passé un certain nombre, l'entretien revient plus cher que le remplacement.
- Le changement de thème. On garde le contenu et on remplace l'habillage par un modèle récent, responsive par construction. C'est l'option la plus rentable quand les textes tiennent encore la route et que seule la présentation a vieilli. La contrepartie est un temps de remontage des pages, et parfois quelques concessions sur la mise en forme d'origine.
- La refonte. On reprend l'arborescence, les textes, la présentation et la technique. C'est la seule option honnête quand le contenu ne décrit plus ce que fait l'entreprise, ou quand l'outil sur lequel tourne le site n'est plus maintenu. La contrepartie est le délai, et le risque de perdre des positions acquises si les anciennes adresses ne sont pas redirigées.
La règle de décision tient en trois questions. Le site rend-il encore service sur ordinateur ? Les textes sont-ils encore justes ? L'outil sur lequel il repose reçoit-il encore des mises à jour ? Trois oui, et vous êtes sur une rustine ou un changement de thème. Un non sur la deuxième ou la troisième, et vous êtes sur une refonte — dont les étapes prises dans l'ordre évitent la moitié des mauvaises surprises.
Ce que ça coûte, en ordres de grandeur indicatifs
Les repères qui suivent valent pour un site vitrine d'entreprise. Ils servent à savoir si un devis reçu est dans les clous, pas à négocier ligne à ligne. Un site sur mesure, un site multilingue ou un site à catalogue changent d'échelle et ne se comparent pas à ce tableau.
| Intervention | Ce qu'elle règle | Ordre de grandeur |
|---|---|---|
| Correction des défauts isolés | Débordement latéral, tailles de texte, zones à toucher trop serrées | Une demi-journée à une journée de travail |
| Reprise du menu et des formulaires | Menu utilisable au pouce, champs déclarés, formulaire raccourci | Une à deux journées |
| Reprise des images | Redimensionnement et compression de l'ensemble des visuels du site | Une demi-journée, davantage si le site compte beaucoup de photos |
| Changement de thème | Habillage récent, responsive par construction, contenu conservé | Quelques journées, selon le nombre de pages à remonter |
| Refonte complète | Arborescence, textes, présentation et technique repris ensemble | Un projet, pas une intervention |
Deux remarques sur ces montants. La première : une bonne moitié du temps d'une intervention passe à trouver la cause, pas à écrire la correction. Un prestataire à qui vous arrivez avec la liste des sept vérifications déjà faite travaille plus vite, et facture moins. La seconde : le coût d'une refonte ne se calcule pas ainsi, mais poste par poste, ce qui est le sujet de ce que coûte réellement une refonte.
Ne plus se poser la question : les thèmes responsives par construction
Il existe une manière de faire disparaître le problème plutôt que de le corriger indéfiniment : partir d'un socle où le responsive n'est pas une option ajoutée mais la façon dont le site est bâti. Tous les thèmes récents, sur toutes les plateformes sérieuses, le sont. Ce n'est plus un argument de vente, c'est un prérequis.
Ce qui casse ensuite, presque toujours, ce n'est pas le thème : c'est ce qu'on ajoute par-dessus. Une image collée en dur avec une largeur fixe. Un tableau importé depuis un tableur. Un bloc de code fourni par un prestataire extérieur pour afficher un module. Un bandeau promotionnel monté à la hâte pour une semaine et jamais retiré. Le responsive n'est pas un état acquis une fois pour toutes, c'est une discipline d'entretien, au même titre que le reste de la maintenance d'un site.
Deux réflexes suffisent à la tenir. Le premier : après chaque ajout de page ou de bloc, refaire le test des sept points sur la page modifiée, ce qui prend une minute. Le second : ne jamais coller de largeur en pixels dans un contenu. Si un élément doit respecter une taille précise, c'est au thème de le dire, pas au texte que vous tapez.
Sur les plateformes qui proposent une bibliothèque de modèles, comme les thèmes du Store, le comportement sur petit écran est vérifié en amont pour l'ensemble du catalogue : vous n'héritez pas d'un thème dont personne n'a testé le menu au pouce. Le détail de ce que la plateforme prend en charge et de ce qui reste à votre main se lit sur la page des fonctionnalités.
Un site responsive chez Webcosa
Webcosa est un CMS en abonnement destiné aux sites vitrines. Les thèmes du Store sont responsives par construction : les pages, les articles et les formulaires se réorganisent seuls selon la largeur de l'écran, sans réglage de votre côté et sans version mobile séparée à entretenir. Il n'y a qu'un site, qu'une adresse et qu'un contenu à tenir à jour.
L'abonnement comprend l'hébergement en Europe, le certificat de sécurité, les sauvegardes, les mises à jour de la plateforme, les thèmes du Store, et les demandes reçues par vos formulaires sans limite de nombre. Il n'y a ni frais d'installation ni commission. La formule Solo est à 29 € par mois, ou 290 € à l'année, soit dix mois payés pour douze : elle autorise 30 pages, un blog et un nom de domaine. La formule Pro est à 59 € par mois, ou 590 € à l'année, lève la limite de pages, comprend le nom de domaine et l'adresse professionnelle, et ajoute les redirections d'anciennes adresses. Le comparatif ligne à ligne est sur la page des tarifs.
L'essai dure sept jours et ne demande pas de carte bancaire. Un code d'accès permet de cacher le site le temps de le monter, ce qui est commode quand on remonte les pages d'un ancien site avant de basculer le nom de domaine.
Ce qu'il faut retenir
Responsive ne veut pas dire « joli sur téléphone ». Cela veut dire qu'un seul site, un seul contenu et une seule adresse s'adaptent à toutes les largeurs d'écran. C'est aussi la version que Google utilise pour indexer votre site, quelle que soit la machine sur laquelle votre visiteur consultera ensuite les résultats.
Vous n'avez besoin de personne pour poser le diagnostic. Sept vérifications sur votre téléphone, cinq minutes, et vous savez ce qui va et ce qui ne va pas. Cette liste vaut mieux qu'un audit, parce qu'elle est écrite du point de vue de celui qui vous cherche.
Les huit défauts habituels se corrigent séparément et rarement cher. La refonte ne se justifie que si le contenu lui-même ne dit plus ce que fait l'entreprise. Et une fois le site lisible sur téléphone, la question suivante est celle du temps de chargement : c'est le sujet de ce qui ralentit vraiment un site, avant celle de ce qui le fait remonter, traitée dans référencer un site vitrine.
Questions fréquentes sur les sites responsives
Le test le plus simple ne demande aucun outil : ouvrez le site sur un ordinateur et réduisez lentement la largeur de la fenêtre en tirant sur son bord. Une mise en page qui se réorganise sans à-coups, sans barre de défilement horizontale et sans texte coupé indique un site responsive. Vérifiez ensuite sur un vrai téléphone, wifi coupé : lecture sans zoom, absence de glissement latéral, menu atteignable au pouce, numéro cliquable et formulaire réellement envoyable. Sept points, cinq minutes, et vous avez votre réponse.
Un site responsive est un site unique dont la disposition s'adapte à la largeur de l'écran : une adresse, un contenu, une seule chose à mettre à jour. Un site mobile, au sens ancien du terme, est une seconde version servie sur une autre adresse, généralement préfixée par m. Cette approche a été abandonnée parce qu'elle double le travail d'entretien et disperse le référencement entre deux jeux d'adresses. Si votre site bascule d'adresse sur téléphone, vous êtes dans ce cas de figure, et c'est un bon candidat au remplacement.
Cela dépend entièrement de ce qui casse. Corriger un débordement latéral, des tailles de texte et quelques boutons trop rapprochés représente couramment une demi-journée à une journée de travail. Reprendre le menu, les images et les formulaires en demande une à deux de plus. Remplacer l'habillage par un thème récent se compte en journées selon le nombre de pages. Le marché français facture une journée de développement entre 300 et 700 € HT environ, ordres de grandeur indicatifs. Faites votre liste de défauts avant de demander un devis : elle réduit le temps facturé.
Rarement. Les défauts d'affichage sur téléphone sont indépendants les uns des autres et se corrigent séparément : on peut en traiter trois et laisser les autres. La refonte ne devient l'option honnête que dans deux cas. Le premier, quand les textes ne décrivent plus ce que fait l'entreprise, auquel cas le problème n'est pas d'affichage. Le second, quand la technologie du site ne reçoit plus de mises à jour et qu'aucun correctif ne tient dans la durée. Hors de ces deux cas, la rustine ou le changement de thème suffisent.
Le mot pénalité est trompeur : il n'y a pas de sanction au sens d'une punition. Ce qui se passe est plus mécanique. Google explore et indexe les pages à partir de leur version mobile ; si cette version est illisible, tronquée ou amputée d'une partie du contenu, c'est cette version diminuée qui sert de base au classement, y compris pour les résultats affichés sur un ordinateur. L'effet est donc bien réel, mais il vient de ce que le moteur voit, pas d'une décision prise contre vous.
Parce qu'un élément de la page est plus large que l'écran, et un seul suffit à décaler l'ensemble. Les coupables habituels sont une image insérée avec une largeur fixe en pixels, un tableau copié depuis un tableur, une adresse internet écrite sans espace, ou un bloc décoratif qui dépasse volontairement sur grand écran. Repérez à quelle hauteur de page la bande vide apparaît : cela indique où chercher, et la correction se fait généralement en une demi-journée.
Non, pour trois raisons. Votre téléphone a déjà votre site en mémoire, donc il s'affiche plus vite chez vous que chez un inconnu. Vos réglages personnels de taille de police peuvent masquer un texte objectivement trop petit. Et votre modèle n'est probablement pas le plus ancien du parc de vos clients. Refaites les vérifications sur un appareil emprunté, si possible plus ancien, wifi coupé. Les écarts constatés entre les deux essais forment souvent la vraie liste de travaux.
Pour des correctifs ciblés, comptez quelques jours entre la demande et la mise en ligne, dont l'essentiel est du temps d'attente et non du travail effectif. Pour un changement de thème avec remontage des pages, une à trois semaines selon le nombre de pages et la disponibilité des contenus. Pour une refonte, le calendrier n'a plus rien à voir : c'est un projet, avec une phase de rédaction qui pèse presque toujours plus lourd que la partie technique.
Non, et la confusion est fréquente. Le responsive décide de la disposition ; la vitesse dépend du poids de ce qu'on envoie au visiteur. Un site parfaitement adapté à l'écran peut rester lent parce qu'il charge des photos de plusieurs mégaoctets, une vidéo de fond d'écran ou une douzaine de scripts extérieurs. Les deux sujets se traitent séparément, dans cet ordre : d'abord la lisibilité, ensuite le poids, parce qu'un site illisible mais rapide ne sert à rien.