Responsive design — quelle part du trafic vient vraiment des téléphones, et ce qui en découle pour la mise en page

La consigne « concevez d’abord pour le téléphone » revient dans chaque proposition et repose sur un chiffre que presque personne ne vérifie. La version précédente de ce texte — publiée sur un site destiné au marché suisse — affirmait à ses lecteurs que « plus de 60 % du trafic des boutiques en ligne polonaises provient d’appareils mobiles » et que « ce taux atteint 70 % dans le monde ».

Nous avons vérifié les deux à la source. Ni l’un ni l’autre n’est exact, et aucun des deux ne concernait le marché auquel ce site s’adresse. Pour la Suisse, la mesure va franchement dans l’autre sens.

Quelle est la part réelle du trafic mobile

La mesure StatCounter pour août 2026 donne ceci :

En Suisse : ordinateurs 55,30 %, téléphones 42,88 %, tablettes 1,82 %. Pas « plus de 60 % de mobile » — l’inverse : c’est l’ordinateur qui dépasse la moitié, avec douze points et demi d’avance.

Dans le monde : téléphones 49,36 %, ordinateurs 49,11 %, tablettes 1,54 %. À peu près moitié-moitié, et non soixante-dix pour cent.

Et le plus intéressant n’apparaît qu’une fois plusieurs marchés mis côte à côte :

L’Allemagne est le seul marché de ce tableau où les téléphones passent devant, et encore, de trois points et demi. Dans quatre lignes sur six, l’ordinateur domine, la Suisse comprise, et l’agrégat européen aussi. La Suisse se situe au milieu de ce groupe : plus « ordinateur » que la France ou l’Europe dans son ensemble, moins que la Pologne.

La conséquence pratique est qu’une recommandation recopiée d’un article étranger peut tout simplement tomber à côté. Un texte écrit pour le marché allemand, où les téléphones sont légèrement devant, conseillera autre chose que les données du pays où vous vendez. C’est exactement ainsi que « 60 % du trafic est mobile » s’est retrouvé dans notre propre article : quelqu’un a un jour recopié un chiffre sans vérifier de quel pays il venait — et il n’était même pas juste pour ce pays-là.

D’où viennent ces chiffres et ce qu’ils ne couvrent pas. StatCounter mesure les pages vues sur un réseau de plus d’un million de sites, plus de trois milliards de vues par mois. Trois réserves doivent voyager avec le résultat, sans quoi le chiffre paraît plus ferme qu’il ne l’est : aucune pondération statistique n’est appliquée, l’échantillon reflète donc un réseau partenaire et non une population ; le filtrage des robots est imparfait et l’éditeur le dit lui-même ; et les données font l’objet de corrections pendant 45 jours après publication. C’est l’échantillon d’un grand réseau, pas un recensement.

Pourquoi l’ordinateur tient bon en Suisse. StatCounter ne l’explique pas et nous ne ferons pas semblant du contraire. Notre lecture de travail, fondée sur ce que nous observons chez nos clients : dans les services aux entreprises, le trafic de décision et d’achat a lieu pendant les heures de bureau, devant un écran fixe. Si vous vendez à des entreprises, concevoir un site pour le seul téléphone revient à abandonner la majorité du marché qui décide.

Ce n’est pas un argument contre la prise en charge des téléphones. C’est un argument contre le fait de les traiter comme le seul cas.

Ce que « mobile first » veut vraiment dire

L’expression a fait carrière et a changé de sens en chemin. Il vaut la peine de la récupérer, car dans sa forme d’origine elle est utile, et dans sa forme courante elle mène à l’erreur décrite plus haut.

À l’origine, le « mobile first » était une méthode de conception par la contrainte : commencez par l’écran le plus étroit, puisque c’est là qu’il tient le moins de choses, et vous serez donc obligé de trancher ce qui compte le plus. Ensuite, en remontant, vous ajoutez ce pour quoi il y a de la place. La valeur de la méthode tient à la hiérarchie qu’elle impose, pas à une préférence pour les téléphones.

Dans l’usage courant, c’est devenu un raccourci pour « on conçoit pour le téléphone, l’ordinateur se débrouillera ». Et c’est cette version qui, sur les chiffres suisses, revient à concevoir pour quarante-trois pour cent du trafic.

La différence est pratique. La première méthode donne un site qui paraît réfléchi sur un grand écran, parce que la hiérarchie a été fixée là où c’était le plus serré. Le second raccourci donne un site qui ressemble à un téléphone étiré : une colonne au milieu, des espacements énormes et les deux tiers de l’écran vides.

Si vous vendez à des entreprises, posez une seule question au prestataire et écoutez laquelle des deux versions il décrit : « comment ce site va-t-il exploiter un écran large ? » Une réponse du type « il sera centré » signifie que vous achetez le raccourci.

Pourquoi « trois points de rupture couvrent 95 % des appareils » est faux

La deuxième affirmation de la version précédente était que trois points de rupture — 768, 1024 et 1200 pixels — couvrent 95 % des appareils. Ce chiffre aussi se vérifie.

Résolutions d’écrans mobiles en Suisse, août 2026 : 414×896 fait 24,88 %, puis 390×844 avec 10,99 %, 360×780 avec 5,41 %, 384×832 avec 5,14 % et 375×812 avec 5,02 %.

Les trois premières totalisent 41,28 %. Les cinq premières — 51,44 %. Pour atteindre quatre-vingt-quinze pour cent, il faut descendre loin dans la traîne.

La Suisse mérite ici une réserve, car c’est le plus concentré des marchés que nous avons mesurés : une seule résolution en détient un quart, soit davantage que les deux premières polonaises réunies. Malgré cela, la moitié du marché se trouve hors des cinq tailles les plus fréquentes — et la moitié, ce n’est pas cinq pour cent.

La répartition est à longue traîne et la conclusion qu’on en tire est exactement l’inverse de l’affirmation d’origine : il n’existe pas trois catégories d’appareils pour lesquelles concevoir. Il existe un spectre continu de largeurs, dans lequel chaque valeur répandue pèse quelques pour cent.

Concevoir par points de rupture signifie donc une mise en page correcte à quelques endroits de l’axe et accidentelle entre eux. Et « entre eux », c’est la majorité de vos visiteurs.

Il faut ajouter que la liste des résolutions vieillit plus vite que le site. Les valeurs de tête changent à chaque génération de téléphones, si bien qu’une mise en page attachée à des nombres précis demande une revue tous les douze à dix-huit mois — et en général personne ne la fait, parce que rien n’a l’air cassé. Une mise en page définie par une fonction continue n’a pas besoin de cette revue, puisqu’elle ne connaît aucune résolution particulière.

Ce qui en découle : en continu, plutôt que par appareil

La conclusion technique est unique et porte un nom : le dimensionnement continu. Au lieu de définir quelques seuils où la mise en page saute, on définit une fonction qui fait varier les tailles de façon continue avec la largeur de la fenêtre.

Ce site fonctionne exactement ainsi, et c’est notre propre exemple, pas de la théorie. Sa typographie est décrite par vingt-neuf déclarations `clamp()`, qui font varier les tailles de 360 à 2560 pixels de largeur — du téléphone le plus étroit à un écran 4K. Les valeurs pixel fixes sont explicitement interdites par nos directives de conception, et pas seulement déconseillées.

Trois choses que cela apporte, et qu’il vaut la peine de connaître parce qu’elles se traduisent dans la discussion avec un prestataire :

La mise en page est correcte sur tout l’axe, pas en trois points. Un téléphone de 390 pixels de large et un téléphone de 414 ne reçoivent pas deux versions différentes de la même page, mais la même, ajustée proportionnellement. Sur les chiffres suisses, ces deux largeurs sont d’ailleurs les deux plus répandues du pays — plus d’un tiers à elles deux — et, dans une logique de points de rupture, elles tomberaient dans le même compartiment et seraient traitées comme identiques.

Il n’y a pas de surcoût de performance. Le dimensionnement continu est assuré nativement par le navigateur, au moment où il calcule les styles. Ce n’est pas un script qui doit se charger et s’exécuter.

Aucun travail supplémentaire n’arrive avec chaque nouvel appareil. Les points de rupture doivent être ajoutés dès qu’apparaît une largeur répandue que personne n’avait prévue. Une fonction continue n’a rien à ajouter.

Les points de rupture gardent leur utilité — mais pour les changements de mise en page, pas de taille : quand trois colonnes doivent devenir une, et un menu horizontal un tiroir. Ce sont des décisions qualitatives et il y en a une poignée. La taille du texte, les espacements et les proportions des images varient en continu.

Trois tests à faire sur votre propre téléphone en un quart d’heure

Sans outil, sans connaissance technique et sans rien demander au prestataire. Nous passons les trois chez nous, et c’est pour cela que nous pouvons les recommander.

Le test de la zone du pouce. Prenez le téléphone d’une main, comme dans le tram. Le bouton le plus important — appeler, envoyer une demande, commander — se presse-t-il avec le pouce sans changer de prise ? Les éléments placés dans les coins supérieurs sont hors de portée naturelle en usage à une main, et c’est précisément là que les prestataires mettent le plus souvent le numéro de téléphone et le menu.

Le test des tableaux et des contenus larges. Trouvez sur le site un tableau, une grille tarifaire ou un graphique. Faites glisser le doigt sur le côté. Correctement, c’est le tableau qui défile et la page reste en place. Incorrectement, toute la page se déplace, une barre horizontale apparaît en bas et le texte sort de l’écran. Chez nous, les contenus larges ont leur propre défilement, et c’est une règle inscrite dans nos directives, pas un hasard.

Le test du blocage du zoom. Essayez d’agrandir la page à deux doigts. Si vous ne pouvez pas, quelqu’un a bloqué l’agrandissement — le plus souvent par un seul paramètre dans le code, ajouté « pour que la mise en page ne se casse pas ». Pour une personne qui voit mal, c’est une barrière, pas un désagrément. Notre propre balise viewport fixe la largeur à celle de l’appareil et l’échelle initiale à un, sans blocage du zoom — vérifiez-le chez nous d’un même geste.

Si l’un des tests se passe mal, vous avez un point concret à soulever avec le prestataire au lieu de l’impression que « quelque chose ne va pas sur le téléphone ».

Les images — le plus gros poste de la facture mobile

Si un site est lent sur un téléphone, dans la très grande majorité des cas la cause n’est ni la mise en page ni le code, mais les photos. Le mécanisme est simple et vaut la peine d’être connu, car il permet de poser la bonne question.

Le même fichier pour tous les écrans. Une photo préparée pour un écran de 2560 pixels et envoyée telle quelle à un téléphone de 414 pixels, c’est plusieurs fois plus de données qu’on ne peut afficher. Le navigateur télécharge le tout, puis réduit à la volée — vous payez donc, en transfert, des pixels que personne ne verra.

La solution est mécanique, pas éditoriale. Le serveur prépare plusieurs tailles de chaque image et le navigateur choisit lui-même la bonne, connaissant la largeur de l’écran et la densité de pixels. Cela ne demande aucune décision éditoriale ni une autre mise en page : c’est une configuration que quelqu’un a faite, ou n’a pas faite.

Le format compte aussi. Les formats de compression récents produisent, à qualité égale, des fichiers nettement plus légers que le JPEG classique, et les navigateurs qui ne les gèrent pas reçoivent une version de secours. Là encore, c’est un réglage, pas une décision artistique.

Ce qu’on ne voit pas et qui coûte le plus : l’image d’en-tête, qui se charge en premier et qui est en général la plus lourde de la page. C’est elle qui décide du délai au bout duquel le visiteur voit quelque chose — et c’est elle qu’il faut mesurer en premier.

La question à poser au prestataire n’est donc pas « le site est-il responsive » mais « les images sont-elles servies à une taille adaptée à l’écran ». Ce sont deux choses différentes, et la première est souvent satisfaite sans la seconde.

Quand le responsive ne suffit pas

Il existe des situations où ajuster la largeur ne suffit pas et où il faut une décision de conception à part, plutôt qu’un point de rupture de plus.

Tableaux comparatifs et grilles tarifaires. Sur un téléphone, dix colonnes ne tiendront dans aucune mise en page. Il faut une autre forme de la même information — des cartes au lieu de lignes, le choix de deux éléments à comparer, des sections dépliables. C’est une refonte du contenu, pas des styles.

Formulaires en plusieurs étapes. Un formulaire qui tient sur un écran d’ordinateur devient, sur un téléphone, un long défilement avec le clavier qui masque la moitié de la vue. Le découpage en étapes est parfois la seule réponse, et il se planifie au lieu de se forcer par les styles.

Listes longues et recherche. Sur un écran large, un filtre peut se placer à côté des résultats. Sur un écran étroit, il doit se cacher quelque part, et cela change le parcours — c’est une décision sur ce qui compte le plus, pas sur le nombre de pixels d’une colonne.

Dénominateur commun : ce sont des décisions de l’étape du croquis, pas de l’étape du code. Ce que le wireframe tranche, et ce qu’on ne peut plus défaire à bas prix ensuite, nous le décrivons séparément.

Comment lire une proposition où figure le mot « responsive »

Presque toutes en contiennent une, et il ne veut presque jamais dire la même chose. Quatre questions tranchent ce que vous achetez réellement.

« Responsive » veut-il dire ajustement de la largeur ou refonte de la mise en page ? C’est la différence entre un changement de styles et une autre version de la page. Un tableau qui devient des cartes sur un téléphone est une refonte et devrait figurer comme un poste distinct dans le devis.

Les écrans larges sont-ils compris dans le prix, ou seulement les étroits ? Une proposition qui décrit « la version mobile » reste souvent muette sur ce qui se passe au-delà de mille pixels — soit, rappelons-le, 55 % du trafic suisse.

Combien de points de rupture, et pour quoi faire ? Une bonne réponse nomme les moments où la mise en page doit changer qualitativement : quand trois colonnes deviennent une, quand le menu se replie. Une mauvaise réponse récite une liste de résolutions d’appareils.

Qui vérifie le résultat, et sur quoi ? « Testé sur appareils » sans préciser lesquels signifie en général : dans une fenêtre de navigateur rétrécie à la souris. Ce n’est pas la même chose qu’un téléphone en main, car un émulateur n’a ni pouce, ni clavier masquant la moitié de l’écran, ni connexion lente.

Et une chose à demander à la réception : que le prestataire parcoure devant vous, sur son propre téléphone, le chemin qui mène à vous contacter. Pas sur un ordinateur, pas dans un émulateur. Trois minutes, et il en sort plus que de toute la documentation.

Et si chez vous le trafic est réellement mobile

Les chiffres du début de ce texte sont une moyenne nationale. Votre site n’est pas une moyenne, et il existe des secteurs où la proportion est tout autre — services de proximité, restauration, commerce de détail, tout ce que l’on cherche en chemin.

Le seul pas suivant qui ait du sens est donc de vérifier vos propres données plutôt que d’adopter le chiffre d’un autre. Cela prend quelques minutes dans n’importe quel outil d’analyse : répartition du trafic par catégorie d’appareil, fenêtre d’au moins trois mois, votre propre trafic exclu. Une fenêtre plus courte montre une saison ou une campagne, pas une structure.

Trois choses qu’il vaut la peine de regarder au passage, parce qu’elles changent les conclusions :

La répartition sur la journée. Si les téléphones dominent le soir et les ordinateurs pendant les heures de bureau, vous avez probablement deux publics différents occupés à deux tâches différentes — et ce ne sont pas les mêmes choses qui doivent être les plus faciles pour chacun.

L’écart entre trafic et conversion. Il arrive que les téléphones apportent la majorité des visites et une minorité des demandes. Cela ne veut pas toujours dire que le site est cassé sur mobile ; plus souvent, que la décision se prend ailleurs. Comment lire un tel écart sans en tirer une conclusion fausse, nous le décrivons dans le texte sur le taux de conversion.

D’où ils viennent. Le trafic issu de la recherche, des campagnes et des réseaux sociaux n’a pas le même mélange d’appareils. Si vous préparez une campagne, son canal déplacera cette proportion, quoi que montre la statistique d’aujourd’hui.

La conclusion est la même dans tous les cas : traitez correctement les deux extrémités de l’axe. Le débat « mobile ou ordinateur » n’a de sens que si le budget ne suffit que pour l’un des deux — et la vraie question est alors de savoir où se prend la décision, pas où il y a le plus de visites.

Ce que ce texte ne tranche pas

Comment mesurer la vitesse de votre site. Responsive et performance sont deux choses différentes, souvent confondues. Nous décrivons la mesure dans le texte sur les tests.

L’accessibilité. Le blocage du zoom en est une barrière parmi d’autres, mais le domaine a ses propres exigences et son propre texte.

Comment juger une maquette graphique. Les heuristiques, la norme et les questions à poser au prestataire sont dans le texte sur l’UX et l’UI.

Ce que coûte une refonte. La facture dépend de ce qui change, la mise en page ou seulement les styles — et cela se décide plus tôt. Le détail complet se trouve dans la rubrique consacrée aux coûts.

D’où viennent ces chiffres

• Part des appareils, août 2026 — StatCounter Global Stats. Suisse : ordinateurs 55,30 %, téléphones 42,88 %, tablettes 1,82 %. Europe : 50,67 % / 47,12 % / 2,21 %. Monde : 49,11 % / 49,36 % / 1,54 %. Pologne : 61,33 % / 37,91 % / 0,76 %. Allemagne : 47,38 % / 50,89 % / 1,74 %. France : 52,98 % / 44,59 % / 2,43 %.
• Méthodologie de StatCounter — pages vues sur un réseau de plus d’un million de sites, plus de 3 milliards de vues par mois, sans pondération statistique, avec un filtrage des robots que l’éditeur lui-même qualifie d’imparfait, et une fenêtre de correction de 45 jours. Échantillon d’un réseau partenaire, pas un recensement, et c’est ainsi que nous le présentons ici.
• Résolutions d’écrans mobiles en Suisse, août 2026 — StatCounter : 414×896 — 24,88 %, 390×844 — 10,99 %, 360×780 — 5,41 %, 384×832 — 5,14 %, 375×812 — 5,02 %. Trois premières 41,28 %, cinq premières 51,44 %. À titre de comparaison, les trois premières allemandes font 30,81 % et les polonaises 30,78 % — la Suisse est le plus concentré des trois, et même ici la moitié du marché se trouve hors des cinq tailles les plus fréquentes.
• Nos 29 déclarations `clamp()` et la plage 360–2560 pixels — vérifiées dans le code de ce service le 16 septembre 2026, et non déclarées. Il en va de même du défilement propre aux contenus larges et de la balise viewport sans blocage du zoom.
• L’explication de la résistance de l’ordinateur est la nôtre, pas celle de la source. StatCounter donne des parts, pas des causes.
• Ce qui n’est pas ici : la version précédente de ce texte affirmait que plus de 60 % du trafic des boutiques en ligne polonaises vient des téléphones et que ce taux atteint 70 % dans le monde, que les sites adaptés au mobile obtiennent 67 % de conversion en plus, que trois points de rupture couvrent 95 % des appareils, qu’Amazon perd 1,6 milliard de dollars par an pour chaque seconde de latence, et que « le CSS responsive, c’est 70 % de conduite du changement et 30 % de technologie ». Les deux premières contredisent la mesure ; les autres n’avaient aucune source. Toutes supprimées.