Ergonomie mobile

TL;DR — Ergonomie mobile est si votre page est facile à utiliser on a phone: texte vous pouvez lire sans pinching à zoom, buttons big suffisant à tap sans hitting le incorrect un, contenu que fits le screen avec aucun sideways scrolling, et aucun complet-screen popups blocking le contenu. Google utilisé à ont a rapport que flagged ces problèmes pour vous — il retired il dans December 2023 — mais le choses il vérifié encore matter.

Ce que ergonomie mobile is

Ergonomie mobile est exactly ce que il sounds comme: comment usable votre page est quand quelqu’un opens il on a phone. Pas comment rapide il charge, pas si Google indexes il — simplement si a réel person on a petit touchscreen peut lire il, tap il, et obtenir où ils sont going sans fighting le layout.

Là are four choses que faire or break it:

1. Readable texte. Si quelqu’un a à zoom dans à lire votre paragraphs, le texte est aussi petit.
2. Tappable buttons et liens. Fingers ne sont pas as precise as a mouse. Targets que sont tiny or crammed ensemble obtenir mis-tapped.
3. Contenu que fits le screen. Aucun horizontal scrolling — lune page devrait fit le width de le phone.
4. Aucun pop-ups blocking le contenu. A complet-screen ad or newsletter overlay que covers lune page le moment vous arrive est a usability problème (et peut hurt vous dans recherche).

Pourquoi c’est important

La plupart personnes recherche on leur phones, donc une page c’est frustrating on mobile est frustrating pour la plupart de votre visitors. Et Google maintenant lit le mobile version de votre page à decide comment vous classer (c’est a séparé idea appelé mobile-premier indexation — plus on le difference dans a deuxième). Donc mobile experience n’est pas a side concern anymore; c’est le principal un.

«## “Wait, where did the Mobile Usability report go?” » (Traduction) (Résumé en français de la section dix, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«If you used to check mobile problems in Google Search Console, you’re not imagining things — that report is gone. Google retired the Search Console Mobile Usability report and its standalone Mobile-Friendly Test tool on December 1, 2023. That doesn’t mean mobile usability stopped mattering; Google said the opposite. It just means the dedicated report went away because better tools (like Lighthouse, built into Chrome) do the job now. So if a tutorial tells you to “open the Mobile Usability report,” it’s out of date.

» (Traduction) (Résumé en français de la section onze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Comment vérifier it now

Le easiest option: ouvrir votre page dans Chrome, right-click → Inspect, et exécuter Lighthouse (or utiliser PageSpeed Insights à pagespeed.web.dev). Les deux flag petit fonts, cramped tap targets, et viewport problèmes. Vous pouvez aussi simplement resize votre navigateur or utiliser Chrome’s phone-preview mode et regarder à lune page on a petit screen — a lot de usability problèmes sont obvious le moment vous faire.

Don’t confuse it with two similaire choses

• Indexation mobile-premier — c’est à propos de qui version de votre page Google lit (le mobile un). Différent topic.
• Core Web Vitals — ceux mesurer speed et stability. Connexe, mais a séparé définir de numbers.

Vouloir le exact thresholds (comment big est “big enough” pour a tap cible?), le complet retirement story, et chaque façon à tester ergonomie mobile aujourd’hui? Switch à le Avancé tab.

TL;DR — Ergonomie mobile = ease de utiliser on a touch device, driven par four signaux: legible texte (Lighthouse passes à 12px on ≥60% de texte; 16px est le practical body-copy baseline), tap targets (Lighthouse fails ci-dessous 48×48 CSS px or quand ≥25% de le cible dans 48px de center overlaps a neighbor; ~8px spacing est a starting point — WCAG 2,2’s séparé 24×24 CSS px minimum est an accessibility floor, pas a Google classement règle), contenu sized à le viewport (nécessite a proper viewport meta balise, mais le balise alone ne fait pas guarantee responsive layout; aucun horizontal scroll), et aucun intrusive interstitials. Google retired le Search Console Ergonomie mobile rapport, le Mobile-Friendly Tester outil, et le API on December 1, 2023 (confirmed Dec 4) — pas parce que le signaux stopped mattering, mais parce que Lighthouse matured et mobile-premier indexation était effectively complet. Vérifier il maintenant avec Lighthouse, PageSpeed Insights, DevTools device emulation, Bing’s encore-actif tester, et robots d’exploration. Distinct depuis indexation mobile-premier (qui version est indexé) et Core Web Vitals (chargement/interactivity/stability). c’est un page-experience signal, pas a standalone heavily-weighted facteur de classement.

The definition, precisely

Ergonomie mobile est si une page est facile à utiliser on a mobile/touch device. c’est a utilisateur-experience concept que lives à l’intérieur Google’s broader page experience model, et il comes bas à four concrete signaux. Le rest de ce section est chaque un avec son réel threshold et citation — parce que le spécifique numbers sont exactly ce que la plupart competing articles skip.

Signal 1: legible text

Si personnes ont à pinch-zoom à lire votre corps copy, le font est aussi petit. Là sont deux numbers worth keeping straight, et conflating les est a courant mistake:

• Le audit-pass bar est 12px. Lighthouse’s Document utilise legible font sizes audit dit: “Aim à ont a font size de au moins 12 px on au moins 60% de le texte on votre page.” c’est le threshold à technically réussir le automated vérifier.
• Le practical baseline est ~16px. 12px passing an audit ne fait pas signifier 12px est comfortable à lire on a phone. 16px est le généralement recommended floor pour mobile corps texte, avec titres plus grand. ne pas design à le audit’s minimum.

So: 12px/60% is the réussir line; 16px is ce que vous devez en réalité aim pour on corps copy.

Signal 2: tap targets

Fingers sont blunt instruments. Lighthouse’s Tap targets ne sont pas sized appropriately audit fails a cible on deux conditions: quand “le cible est plus petit que 48 px par 48 px,” et quand “au moins 25% le cible area dans 48 px de le center de le cible overlaps avec un autre cible.” A quelques practical notes depuis le même doc:

• Targets sized 48×48 CSS px consistently réussir.
• Le tappable area est ce que counts, pas le visual size — vous pouvez garder a petit icon et expand son hit area avec padding à reach 48px. (Ce kills le myth que chaque button doit regarder 48px.)
• ~8px entre targets est a reasonable starting point mais “n’est pas toujours suffisant spacing à réussir le audit surtout pour very petit targets.”

Older Google guidance framed ce as roughly 7mm targets avec ~5mm spacing; à typical mobile densities c’est broadly consistent avec le 48px figure. Cite le 48px/8px numbers as actuel; le mm ones sont historical color.

il y a a deuxième, séparé number worth knowing donc vous ne pas conflate standards: WCAG 2,2’s Success Criterion 2.5.8 (Cible Size Minimum, Level AA) sets a 24×24 CSS px minimum (avec spacing/inline/essential exceptions) — an accessibility-conformance règle depuis le W3C, pas a Recherche Google classement threshold. c’est plus petit que Lighthouse’s 48px audit bar parce que le deux come depuis différent bodies measuring différent choses: meeting Lighthouse’s 48px figure clears WCAG’s 24px floor aussi, mais ne pas cite soit number as a fixed, timeless “Google exige N px” règle — Lighthouse’s est a Chrome tooling audit threshold, WCAG’s est an accessibility conformance criterion.

Signal 3: contenu sized à le viewport

Contenu devrait fit le width de le phone — aucun horizontal scrolling, aucun page rendu à desktop width et shrunk à unreadable. Le mechanism est le viewport meta balise. Sans il (or misconfigured), mobile navigateurs assume a desktop-width canvas et scale tout bas. Le corriger est un line dans le <head>:

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

Google’s guidance: “assurez-vous votre page contenu fits le width de le viewport, keeping dans mind que pas tout mobile devices sont le même width.” Donc ne pas difficile-code fixed pixel widths que seulement fit un phone.

Le balise est necessary mais pas sufficient. Il aligns le layout viewport avec le device width — il ne fait pas, par itself, faire fixed-width contenu responsive. Une page peut ship a correct viewport meta balise et encore échouer ergonomie mobile si individual elements (a wide tableau, an unbreakable long string, a fixed-pixel container) sont difficile-coded wider que le viewport. Le balise sets le canvas; votre CSS encore a à en réalité fit il.

Signal 4: aucun intrusive interstitials

A complet-screen popup que bloque votre contenu le moment a visitor arrives depuis recherche est les deux a usability problème et a recherche problème. Google: “intrusive interstitials et dialogs sont page elements que obstruct utilisateurs’ view de le contenu, généralement pour promotional purposes,” et il warns ce ils “faire il difficile pour Google et autre moteur de recherches à comprendre votre contenu, qui peut lead à poor recherche performances.” Le guidance est blunt — “ne pas obscure le entier page avec interstitials” — et il points à petit banners taking seulement a fraction de le screen as le acceptable alternative. (Le complet treatment de qu’est-ce que penalized vs. exempt lives dans le intrusive interstitials deep dive.)

Ce que happened to the Ergonomie mobile report?

Ce est où la plupart guides — notamment some publié dans le dernier année — sont flatly incorrect, donc c’est worth getting le timeline exactly correct.

«- April 2023 — announced. In The role of page experience in creating helpful content, Google said: “Also starting December 1, 2023, we’ll be retiring Search Console’s ‘Mobile Usability’ report, the Mobile-Friendly Test tool and Mobile-Friendly Test API. This doesn’t mean that mobile usability isn’t important for success with Google Search.” Its reasoning: “in the nearly ten years since we initially launched this report, many other robust resources for evaluating mobile usability have emerged, including Lighthouse from Chrome.” » (Traduction) (Résumé en français de la section quarante, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- December 1, 2023 — retired. The report, the Mobile-Friendly Test tool, and the API all went away. Google removed the corresponding mentions from its search help docs the same day. The old Mobile-Friendly Test URL (search.google.com/test/mobile-friendly) now redirects to Lighthouse documentation, and trying to open the Mobile Usability report in Search Console redirects to the GSC overview page. » (Traduction) (Résumé en français de la section quarante, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- December 4, 2023 — confirmed. Google’s Search Console account confirmed the sunset publicly, thanking site owners “for working with us on this journey.”

» (Traduction) (Résumé en français de la section quarante, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

Pourquoi maintenant? Deux forces. Premier, indexation mobile-premier était effectively complet — Google announced “the trek to Mobile First Indexing is now complete” on October 31, 2023 — donc a dedicated GSC rapport split out par device fait moins sense. Deuxième, Lighthouse avait matured dans a meilleur, plus actionable checker que le old standalone outil. Le signaux n’a pas arrêter mattering; le dedicated rapport a fait.

Le practical correction: arrêter telling personnes à “vérifier le Ergonomie mobile rapport” or “exécuter le Mobile-Friendly Tester.” Les deux sont gone. (je vais être candid — mon propre Ahrefs guide, Indexation mobile-premier Goes Mobile-Seulement, dernier mis à jour June 2024, encore points lecteurs à ceux deux maintenant-defunct destinations dans un spot; c’est exactly le kind de stale advice ce article exists à corriger, et c’est on mon liste à correct là aussi.)

Comment vérifier ergonomie mobile today

Since there’s aucun unique dedicated report anymore, vous assemble it from a few outils:

• Chrome Lighthouse (DevTools → Lighthouse) — le direct replacement. Exécute le legible-font, tap-cible, et viewport audits et donne vous le spécifique failing elements.
• PageSpeed Insights (pagespeed.web.dev) — exécute Lighthouse dans le cloud on le mobile profile; bon pour a rapide shareable URL-level vérifier.
• Chrome DevTools device toolbar — emulate a phone, eyeball horizontal scroll, tiny texte, et cramped contrôle à réel dimensions.
• Bing’s Mobile Friendliness Tester Outil — a genuine differentiator: Bing encore exécute a actif mobile-friendliness tester dans Bing Webmaster Outils, même though Google’s est gone. Bing’s propre pitch: “making pages mobile-friendly increases utilisateur engagement on mobile devices. Il peut aussi aider vous classer meilleur dans Bing recherche résultats on mobile devices.” Handy pour a deuxième opinion on rendu.
• Tiers robots d’exploration — Ahrefs Site Audit et similaire peut explorer avec a mobile utilisateur-agent et surface mobile-spécifique problèmes à scale (connecter lune pageSpeed Insights API pour le mobile vérifications).
• A réel device. Rien beats opening lune page on an réel phone.

Aucun unique outil proves end-to-end usability on its propre — combine an automated audit (Lighthouse or PageSpeed Insights), an emulated visual vérifier (DevTools device toolbar), and au moins un real-device réussir avant appel une page fixed.

Ergonomie mobile vs. indexation mobile-first vs. Core Web Vitals

Ces three obtenir blurred ensemble constantly. They’re connexe but distinct:

A site peut être entièrement on indexation mobile-premier et encore ont terrible mobile usability (tiny texte, cramped buttons), et vice versa. Le indexation mobile-premier deep dive et le Core Web Vitals material cover ceux deux dans complet — ce article est strictly le usability couche.

Fait ergonomie mobile affecter rankings?

«Yes, but keep it in proportion. Mobile usability contributes to page experience, which Google treats as a set of signals within broader ranking systems — not a single heavily-weighted factor with a fixed score. Google’s own caution: site owners “should not focus on only one or two aspects of page experience,” and “Google Search always seeks to show the most relevant content, even if the page experience is sub-par.” So fix usability because it helps real users (and it’s the right thing to do) — not because you expect a magic ranking bump. It’s a contributor, not a kingmaker. » (Traduction) (Résumé en français de la section cinquante-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Où ce sits in the mobile-seo cluster

Ce est un piece de le wider mobile SEO picture. Indexation mobile-premier covers qui version Google lit et le contenu-parity règle; le mobile SEO liste de contrôle est le exécuter-il-down audit; le interstitials, AMP, et responsive-vs- dynamic-diffusion topics chaque obtenir leur propre treatment. Ce article deliberately stays dans son lane — le usability signaux — donc il complements ceux plutôt que repeating les.

AI summary

A condensed prendre on the Avancé version:

• Ergonomie mobile = ease de utiliser on a touch device. Four signaux: legible texte, tap targets, contenu sized à le viewport, aucun intrusive interstitials.
• Legible texte: Lighthouse passes à 12px on ≥60% de texte, mais 16px est le practical body-copy baseline. ne pas design à le audit minimum.
• Tap targets: Lighthouse fails ci-dessous 48×48 CSS px or quand ≥25% de le area dans 48px de center overlaps a neighbor. Le tappable area (via padding) est ce que counts, pas le visual size. ~8px spacing est a starting point. WCAG 2,2’s Cible Size Minimum (SC 2.5.8, Level AA) sets a séparé 24×24 CSS px accessibility floor — a W3C conformance règle, pas a Google classement threshold.
• Viewport: <meta name="viewport" content="width=device-width, initial-scale=1">; contenu doit fit le phone width avec aucun horizontal scroll. Le balise aligns le layout viewport avec le device width mais ne fait pas par itself faire fixed-width contenu responsive — individual elements peut encore overflow.
• Intrusive interstitials: complet-page overlays on entry obstruct contenu et hurt recherche performances; petit banners sont le acceptable alternative.
• Le rapport est gone. Google retired le Search Console Ergonomie mobile rapport, Mobile-Friendly Tester outil, et API on Dec 1, 2023 (confirmed Dec 4) — parce que Lighthouse matured et indexation mobile-premier était effectively complet (Oct 31, 2023), pas parce que le signaux stopped mattering.
• Vérifier il maintenant avec Lighthouse, PageSpeed Insights, DevTools device emulation, Bing’s encore-actif Mobile Friendliness Tester, et tiers robots d’exploration.
• Distinct depuis indexation mobile-premier (qui version est indexé) et Core Web Vitals (chargement/interactivity/stability).
• Classement: un page-experience signal dans broader systèmes, pas a standalone heavily-weighted factor. Google va encore surface le la plupart pertinent contenu même avec a sub-par experience.

«## Official documentation » (Traduction) (Résumé en français de la section soixante-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Primary-source documentation from the search engines. » (Traduction) (Résumé en français de la section soixante-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Google » (Traduction) (Résumé en français de la section soixante-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- The role of page experience in creating helpful content (Apr 2023) — the announcement that retired the Mobile Usability report, Mobile-Friendly Test tool, and API as of Dec 1, 2023, and pointed to Lighthouse. » (Traduction) (Résumé en français de la section soixante-quatre, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Understanding Google page experience — where mobile usability sits as a signal, the self-assessment questions, and the “don’t over-index on one signal” caution. » (Traduction) (Résumé en français de la section soixante-quatre, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Avoid intrusive interstitials and dialogs — the interstitials definition and the small-banner alternative. » (Traduction) (Résumé en français de la section soixante-quatre, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- Mobile-first indexing has landed (Oct 2023) — the “trek is now complete” milestone that made a dedicated device-split report unnecessary. » (Traduction) (Résumé en français de la section soixante-quatre, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.)

«Chrome / Lighthouse » (Traduction) (Résumé en français de la section soixante-cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Document doesn’t use legible font sizes — the 12px/60%-of-text audit threshold. » (Traduction) (Résumé en français de la section soixante-cinq, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Tap targets are not sized appropriately — the 48×48 CSS px audit and the overlap/spacing rules. » (Traduction) (Résumé en français de la section soixante-cinq, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

«Bing / Microsoft » (Traduction) (Résumé en français de la section soixante-six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Bing Mobile Friendliness Test Tool — still live, unlike Google’s; test any URL for mobile-friendliness in Bing Webmaster Tools. » (Traduction) (Résumé en français de la section soixante-six, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

«W3C » (Traduction) (Résumé en français de la section soixante-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Target Size (Minimum) — WCAG 2.2 Understanding SC 2.5.8 — the 24×24 CSS px accessibility-conformance floor, distinct from Lighthouse’s 48px audit threshold. » (Traduction) (Résumé en français de la section soixante-sept, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Quotes from the source » (Traduction) (Résumé en français de la section soixante-dix, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

On-le-record statements depuis Google, Chrome/Lighthouse, et Bing. Chaque lien est a deep lien que jumps à le quoted passage où le page source prend en charge il.

«Google — retiring the report and tools (Apr 2023 announcement) » (Traduction) (Résumé en français de la section soixante-douze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- “Also starting December 1, 2023, we’ll be retiring Search Console’s ‘Mobile Usability’ report, the Mobile-Friendly Test tool and Mobile-Friendly Test API. This doesn’t mean that mobile usability isn’t important for success with Google Search.” — Google Search Central Blog. Read the post » (Traduction) (Résumé en français de la section soixante-treize, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “In the nearly ten years since we initially launched this report, many other robust resources for evaluating mobile usability have emerged, including Lighthouse from Chrome.” Read the post » (Traduction) (Résumé en français de la section soixante-treize, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

«Google — page experience framing » (Traduction) (Résumé en français de la section soixante-quatorze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- “Google Search always seeks to show the most relevant content, even if the page experience is sub-par.” — Google Search Central docs. Jump to quote » (Traduction) (Résumé en français de la section soixante-quinze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Google — intrusive interstitials » (Traduction) (Résumé en français de la section soixante-seize, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- “Intrusive interstitials and dialogs are page elements that obstruct users’ view of the content, usually for promotional purposes.” — Google Search Central docs. Jump to quote » (Traduction) (Résumé en français de la section soixante-dix-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Google — mobile-first indexing complete (context) » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- “We’re delighted to announce that the trek to Mobile First Indexing is now complete.” — Google Search Central Blog, Oct 31, 2023. Jump to quote » (Traduction) (Résumé en français de la section soixante-dix-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Chrome / Lighthouse — the thresholds » (Traduction) (Résumé en français de la section quatre-vingts, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- “Aim to have a font size of at least 12 px on at least 60% of the text on your page.” — Chrome for Developers / Lighthouse docs. Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Tap targets fail when “48 px by 48 px” isn’t met, and when target areas overlap within 48px of center. Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-un, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

Bing — the still-live outil

• “Making pages mobile-friendly increases utilisateur engagement on mobile devices. Il peut aussi aider vous classer meilleur dans Bing résultats de recherche on mobile devices.” — Bing Webmaster Outils, Mobile Friendliness Tester. Ouvrir le outil

The report’s gone — how do I vérifier ergonomie mobile now?

«The old “just open the Mobile Usability report” answer no longer works. Which current tool you reach for depends on what you’re trying to do. Click through it. » (Traduction) (Résumé en français de la section quatre-vingt-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Ergonomie mobile checklist

A réussir à travers the four signals, run contre the mobile rendering of lune page (DevTools device mode or a réel phone):

• Corps texte est legible sans zooming — ~16px baseline; à minimum passes Lighthouse’s 12px-on-≥60%-de-texte audit.
• Tap targets sont 48×48 CSS px (or a plus petit icon avec padding expanding le tappable area à 48px).
• Tap targets ne sont pas crowded — adjacent targets ne pas overlap dans 48px de center; ~8px+ spacing, plus pour very petit ones.
• Viewport meta balise présent — <meta name="viewport" content="width=device-width, initial-scale=1">.
• Aucun horizontal scrolling — contenu fits le viewport width; aucun fixed-pixel elements wider que le screen.
• Aucun intrusive interstitial on entry depuis recherche — complet-page overlays sont out; petit banners et legally requis gates sont fine.
• CSS/JS pas bloqué dans robots.txt — Googlebot nécessite les à rendre le mobile page et judge usability.
• Audited avec Lighthouse / PageSpeed Insights — pas le retired Mobile-Friendly Tester or GSC Ergonomie mobile rapport.
• Spot-checked on a réel device — some problèmes seulement montrer up on réel hardware.

The mental models

1. Four signals, un question. Legible text, tap targets, viewport fit, aucun intrusive interstitials. Every mobile usability problème is un of ceux four — diagnose by asking qui un is failing avant vous touch anything.

2. Le audit bar n’est pas le goal. Lighthouse passes texte à 12px et tap targets à exactly 48px. Ceux sont floors, pas targets. Aim pour 16px corps copy et comfortably-spaced contrôle — passing le audit et étant pleasant à utiliser ne sont pas le même chose.

3. Tappable area, pas visual size. A petit icon peut réussir le tap-cible audit si padding expands son hit area à 48px. Design le hit area, pas simplement le pixels vous pouvez voir.

«4. The three “not the same as.” » (Traduction) (Résumé en français de la section cent un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Mobile usability ≠ mobile-first indexing (that’s which version is indexed). » (Traduction) (Résumé en français de la section cent un, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Mobile usability ≠ Core Web Vitals (that’s loading/interactivity/stability). » (Traduction) (Résumé en français de la section cent un, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Mobile usability ≠ a single heavy ranking factor (it’s one page-experience signal among several). » (Traduction) (Résumé en français de la section cent un, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.)

«5. The tooling moved — update your muscle memory. The dedicated GSC report and Mobile-Friendly Test are gone (Dec 2023). Reach for Lighthouse / PageSpeed Insights / DevTools / Bing’s test / a crawler instead. If a process doc still says “check the Mobile Usability report,” the process doc is the bug. » (Traduction) (Résumé en français de la section cent deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Mobile usability — cheat sheet » (Traduction) (Résumé en français de la section cent cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«The four signals + thresholds » (Traduction) (Résumé en français de la section cent six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«| Signal | Threshold | Source | | --- | --- | --- | | Legible text | 12px on ≥60% of text (audit pass); ~16px recommended | Lighthouse | | Tap targets | 48×48 CSS px; no overlap within 48px of center | Lighthouse | | Tap spacing | ~8px starting point (more for tiny targets) | Lighthouse | | Tap targets (accessibility) | 24×24 CSS px minimum (Level AA), spacing exceptions apply | WCAG 2.2 SC 2.5.8 | | Viewport | width=device-width, initial-scale=1; no horizontal scroll | Google | | Interstitials | No full-page overlay on entry; small banners OK | Google | » (Traduction) (Résumé en français de la section cent sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«The viewport one-liner » (Traduction) (Résumé en français de la section cent huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

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

Dates à know

• Apr 2023 — Google announces le retirement.
• Oct 31, 2023 — indexation mobile-premier declared complet.
• Dec 1, 2023 — Ergonomie mobile rapport + Mobile-Friendly Tester outil + API retired.
• Dec 4, 2023 — sunset confirmed publicly.

Où the old outils went

• Mobile-Friendly Tester URL → redirections to Lighthouse docs.
• GSC Ergonomie mobile report → redirections to the GSC overview.

Vérifier it now: Lighthouse · PageSpeed Insights · DevTools device mode · Bing Mobile Friendliness Tester (encore live) · third-party robot d’exploration · réel device.

Don’t confuse with: indexation mobile-first (qui version is indexé) · Core Web Vitals (LCP/INP/CLS).

SOP: audit une page’s ergonomie mobile (post-report era)

A repeatable procedure now que there’s aucun one-click report. ~10 minutes par page.

1. Ouvrir lune page dans Chrome et exécuter Lighthouse. DevTools (⌘⌥I / Ctrl+Shift+I) → Lighthouse tab → vérifier SEO et Performances → Analyze page charger (choisir le Mobile device). Remarque quelconque legible font sizes or tap targets échecs — Lighthouse listes le spécifique elements.
2. Confirmer le viewport balise. Dans DevTools Elements, recherche le <head> pour name="viewport". Il devrait lire width=device-width, initial-scale=1. Aucun balise, or a fixed width=980-style valeur, est le corriger.
3. Emulate a phone et regarder. Toggle le device toolbar (⌘⇧M / Ctrl+Shift+M), pick a petit device (e.g. iPhone SE width). Scroll le complet page: quelconque horizontal scrollbar or element bleeding off le correct edge est a viewport-fit échec.
4. Tester tap targets par hand. Dans device mode, essayer tapping adjacent liens/buttons. Si vous’d realistically mis-tap, ils sont aussi petit or aussi fermer — cible 48px hit areas avec ~8px+ spacing.
5. Vérifier pour entry interstitials. Charger l’URL fresh (incognito) as si arriving depuis recherche. A complet-page overlay avant vous pouvez lire le contenu est a problème; petit banners et legal/consent gates sont fine.
6. Cross-vérifier avec Bing’s actif tester (optional deuxième opinion) à bing.com/webmaster/outils/mobile-friendliness, et/or PageSpeed Insights pour a shareable record.
7. Vérifier on a réel device si lune page matters. Emulation est fermer, pas perfect.
8. Fichier corrections par signal — font size, tap sizing/spacing, viewport, interstitial — donc devs obtenir an actionable liste, pas “faire il mobile-friendly.”

Ergonomie mobile anti-patterns

Le recurring mistakes — plusieurs de les baked dans stale advice c’est encore circulating.

«- “Check the GSC Mobile Usability report.” It was retired December 1, 2023 and the URL now redirects to the overview page. If a doc or tutorial says this, it’s out of date — including, until it’s corrected, a passage in my own Ahrefs guide. » (Traduction) (Résumé en français de la section cent vingt-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “Run Google’s Mobile-Friendly Test.” Also retired Dec 1, 2023; the old URL redirects to Lighthouse docs. Multiple currently-live articles still describe this tool as working — it isn’t. » (Traduction) (Résumé en français de la section cent vingt-trois, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Designing to the 12px audit floor. Passing Lighthouse’s font-size audit at 12px doesn’t make text comfortable to read on a phone. Use ~16px for body copy. » (Traduction) (Résumé en français de la section cent vingt-trois, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Measuring the visible icon, not the tappable area. A 24px icon can still pass the tap-target audit if padding expands its hit area to 48px. Shrinking the hit area to match the graphic is the mistake. » (Traduction) (Résumé en français de la section cent vingt-trois, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- Omitting or misconfiguring the viewport meta tag. No tag (or a fixed-width one) makes mobile browsers render at desktop width and shrink everything. It’s a one-line fix that’s easy to forget. » (Traduction) (Résumé en français de la section cent vingt-trois, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.) «- Full-screen interstitials on entry from search. Newsletter/app-install/ad overlays that block content the moment a visitor arrives obstruct the content and can hurt search performance. Use a small banner instead. » (Traduction) (Résumé en français de la section cent vingt-trois, sous-partie six : le texte source est conservé pour vérification lors de la relecture francophone.) «- Blocking CSS/JS in robots.txt. If Googlebot can’t fetch the assets, it can’t render the mobile page properly or judge its usability. » (Traduction) (Résumé en français de la section cent vingt-trois, sous-partie sept : le texte source est conservé pour vérification lors de la relecture francophone.) «- Treating mobile usability as a big standalone ranking lever. It’s one page-experience signal, and Google will still surface the most relevant content even with a sub-par experience. Fix it for users, not for an imagined ranking jump. » (Traduction) (Résumé en français de la section cent vingt-trois, sous-partie huit : le texte source est conservé pour vérification lors de la relecture francophone.) «- Conflating it with mobile-first indexing or Core Web Vitals. Different problems, different fixes, different tools. Keep them separate. » (Traduction) (Résumé en français de la section cent vingt-trois, sous-partie neuf : le texte source est conservé pour vérification lors de la relecture francophone.)

Rapide checks vous pouvez run yourself

Vous ne pas besoin le retired outils à spot le courant échecs. A quelques practical extraits.

Vérifier le viewport meta balise depuis le command line

# Does the page ship a proper viewport meta tag?
curl -s https://example.com/ | grep -i 'name="viewport"'
# Expected: <meta name="viewport" content="width=device-width, initial-scale=1">
# No output = no viewport tag (a mobile-usability failure).

Trouver elements causing horizontal scroll (DevTools console)

Paste dans le Chrome DevTools console pendant que emulating a phone — il listes quelconque element wider que le viewport, le usual causer de horizontal scrolling:

// Flag elements wider than the viewport
const vw = document.documentElement.clientWidth;
[...document.querySelectorAll('*')]
  .filter(el => el.getBoundingClientRect().right > vw + 1)
  .forEach(el => console.log(Math.round(el.getBoundingClientRect().right), el));

Trouver text plus petit que 16px (DevTools console)

// List text-bearing elements rendered below the 16px baseline
[...document.querySelectorAll('body *')]
  .filter(el => el.childNodes.length && [...el.childNodes].some(n => n.nodeType === 3 && n.textContent.trim()))
  .map(el => ({ px: parseFloat(getComputedStyle(el).fontSize), el }))
  .filter(x => x.px < 16)
  .forEach(x => console.log(x.px + 'px', x.el));

Bookmarklet: highlight petit tap targets

Enregistrer as a bookmark, run on quelconque page in mobile emulation — it outlines interactive elements whose rendered box is sous 48×48 CSS px:

javascript:(()=>{document.querySelectorAll('a,button,input,select,textarea,[role=button]').forEach(el=>{const r=el.getBoundingClientRect();if(r.width<48||r.height<48){el.style.outline='2px solid red';}});})();

Remember le caveat: le tappable area (padding inclus) est ce que le audit mesure — an element flagged ici peut encore être fine si padding expands son hit area à 48px.

Outils pour checking ergonomie mobile

• Chrome Lighthouse (DevTools → Lighthouse) — le direct replacement pour le retired Mobile-Friendly Tester. Exécute le legible-font, tap-cible, et viewport audits et noms le failing elements.
• PageSpeed Insights (pagespeed.web.dev) — Lighthouse dans le cloud on le mobile profile; shareable URL-level résultats.
• Chrome DevTools device toolbar — phone emulation pour eyeballing horizontal scroll, tiny texte, et cramped contrôle à réel dimensions.
• Bing Mobile Friendliness Tester Outil — encore actif dans Bing Webmaster Outils; a réel deuxième opinion maintenant que Google’s dedicated outil est gone.
• Search Console Inspection d’URL — voir le rendu mobile HTML et screenshot Googlebot smartphone saw (ne fait pas grade usability, mais confirms ce que renders).
• Ahrefs Site Audit — explorer avec a mobile utilisateur-agent et surface mobile-spécifique problèmes à travers chaque page (connecter lune pageSpeed Insights API pour le mobile vérifications).
• A réel phone — le ground truth emulation approximates.

Mobile page semble fine in emulation but fails on a phone

Symptom: Chrome’s device toolbar semble clean, mais utilisateurs rapport clipped contenu, overlapping contrôle, or unusable dialogs. Probable causer: emulation a fait pas reproduce le phone’s navigateur chrome, sûr-area insets, texte scaling, or operating-système keyboard. Corriger: reproduce le task on au moins un physical iOS device et un physical Android device. Tester orientation changements, increased texte size, et le on-screen keyboard, pas simplement le landing state.

Lune page scrolls sideways

«Symptom: a narrow strip of content extends past the right edge. Likely cause: a fixed-width element, unbroken string, table, image, or 100vw container is wider than the layout viewport. Fix: use DevTools to inspect the widest element, make media responsive, allow long text to wrap, and prefer width: 100% inside padded containers. Do not hide the evidence with overflow-x: hidden until you have fixed the source. » (Traduction) (Résumé en français de la section cent quarante-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Tap targets still fail after increasing the icon » (Traduction) (Résumé en français de la section cent quarante-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Symptom: Lighthouse still flags a control after its visible icon got larger. Likely cause: the interactive box remains small or neighboring links overlap its usable space. Fix: add padding to the clickable element itself, space adjacent targets, and verify the rendered hit box in DevTools. Enlarging only an SVG inside a tiny anchor does not enlarge the anchor. » (Traduction) (Résumé en français de la section cent cinquante, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Text becomes unreadable after load » (Traduction) (Résumé en français de la section cent cinquante et un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Symptom: le initial HTML semble usable, alors client-side code remplace il avec tiny texte or a desktop layout. Probable causer: responsive styles or components charger late, échouer à a breakpoint, or differ entre serveur et client rendu. Corriger: tester le rendu state avec JavaScript enabled, inspect le failing breakpoint, et garder le mobile layout dans le initial critical CSS où practical.

Prove a mobile-usability corriger worked

Testez vos connaissances: Ergonomie mobile

Five rapide questions on ergonomie mobile. Pick an réponse pour chaque, alors vérifier.

Ressources utiles

Mon writing

• Indexation mobile-premier Goes Mobile-Seulement (Ahrefs) — mon deep dive on indexation mobile-premier et mobile design meilleur practices. Fair warning: as de son June 2024 mettre à jour il encore points lecteurs à le retired GSC Ergonomie mobile rapport et Mobile-Friendly Tester — le stale advice ce article corrects, et quelque chose Je plan à corriger là.
• Le Beginner’s Guide à SEO technique (Ahrefs) — où ergonomie mobile fits à l’intérieur le broader technique-SEO picture.
• Core Web Vitals: Ce que Ils Sont & Comment Améliorer Le vôtre (Ahrefs) — le performances side de mobile experience, qui personnes routinely conflate avec usability.

Mon speaking

• Comment Recherche Fonctionne (SlideShare) — mon walkthrough de exploration, rendu, indexation, et classement, notamment comment Googlebot explore as a smartphone. (Standing disclaimer: “This is my understanding of systems… not going to be 100% complete or accurate.”)

«From around the industry » (Traduction) (Résumé en français de la section cent soixante-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- The role of page experience in creating helpful content (Google) — the April 2023 post that announced the report/tool retirement and pointed to Lighthouse. » (Traduction) (Résumé en français de la section cent soixante-sept, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Google Officially Drops Mobile Usability Report, Mobile-Friendly Test Tool and API (Search Engine Land, Barry Schwartz) — the retirement, in plain language. » (Traduction) (Résumé en français de la section cent soixante-sept, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Google Search Console’s Mobile Usability Report & Mobile-Friendly Tests Are Gone (Search Engine Roundtable, Barry Schwartz) — the Dec 4, 2023 sunset confirmation and where the old URLs now redirect. » (Traduction) (Résumé en français de la section cent soixante-sept, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- Document doesn’t use legible font sizes (Chrome / Lighthouse) — the 12px/60%-of-text audit threshold. » (Traduction) (Résumé en français de la section cent soixante-sept, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.) «- Tap targets are not sized appropriately (Chrome / Lighthouse) — the 48×48 CSS px audit and spacing rules. » (Traduction) (Résumé en français de la section cent soixante-sept, sous-partie six : le texte source est conservé pour vérification lors de la relecture francophone.) «- Avoid intrusive interstitials and dialogs (Google) — the interstitials definition and the acceptable-banner alternative. » (Traduction) (Résumé en français de la section cent soixante-sept, sous-partie sept : le texte source est conservé pour vérification lors de la relecture francophone.) «- Bing Mobile Friendliness Test Tool (Bing Webmaster Tools) — still live; test any URL for mobile-friendliness. » (Traduction) (Résumé en français de la section cent soixante-sept, sous-partie huit : le texte source est conservé pour vérification lors de la relecture francophone.)

Stats worth citing

• Legible-font audit réussir bar: 12px on ≥60% de texte — Lighthouse’s documented threshold. Remarque c’est a réussir floor, pas le recommended ~16px body-copy baseline. Source
• Tap-cible audit fails ci-dessous 48×48 CSS px (et on ≥25% overlap dans 48px de center) — Lighthouse. Le tappable area, pas le visual size, est qu’est-ce que mesuré. Source
• WCAG 2,2 Cible Size Minimum (SC 2.5.8, Level AA): 24×24 CSS px — a séparé accessibility-conformance règle depuis le W3C, pas a Recherche Google classement threshold; plus petit que Lighthouse’s 48px audit bar parce que il mesure a différent chose. Source
• Retirement date: December 1, 2023 — Google retired le Search Console Mobile Usability rapport, le Mobile-Friendly Tester outil, et le API on ce date (confirmed publicly Dec 4, 2023). Source
• Indexation mobile-premier declared complet October 31, 2023 — le milestone que fait a dedicated device-split usability rapport unnecessary. Source

Journal des modifications