Ergonomie mobile

TL;DR — Ergonomie mobile is si votre page is facile to utiliser on a phone: text vous pouvez lire sans pinching to zoom, buttons big suffisant to tap sans hitting the incorrect un, content que fits the screen with aucun sideways scrolling, and aucun full-screen popups blocking le contenu. Google utilisé to have a report que flagged ces problems pour vous — it retired it in December 2023 — but the choses it vérifié encore matter.

Ce que ergonomie mobile is

Ergonomie mobile is exactly ce que it sounds comme: how usable votre page is quand someone opens it on a phone. Pas how fast it loads, pas si Google indexes it — simplement si a réel person on a petit touchscreen peut lire it, tap it, and obtenir où they’re going sans fighting the layout.

Là are four choses que faire or break it:

1. Readable text. Si someone has to zoom in to lire votre paragraphs, the text is aussi petit.
2. Tappable buttons and liens. Fingers aren’t as precise as a mouse. Targets que are tiny or crammed ensemble obtenir mis-tapped.
3. Content que fits the screen. Aucun horizontal scrolling — lune page devrait fit the width of the phone.
4. Aucun pop-ups blocking le contenu. A full-screen ad or newsletter overlay que covers lune page the moment vous arrive is a usability problem (and peut hurt vous in search).

Pourquoi c’est important

La plupart personnes search on leur phones, so une page that’s frustrating on mobile is frustrating pour la plupart of votre visitors. And Google now reads the mobile version of votre page to decide how vous rank (that’s a separate idea appelé mobile-first indexation — plus on the difference in a second). So mobile experience isn’t a side concern anymore; it’s the principal un.

”Wait, where did the Mobile Usability report go?”

Si vous utilisé to vérifier mobile problems dans la recherche Google Console, you’re pas imagining choses — que report is gone. Google retired the Search Console Mobile Usability report and its standalone Mobile-Friendly Tester outil on December 1, 2023. Que doesn’t mean ergonomie mobile stopped mattering; Google said the opposite. It simplement signifie the dedicated report went away parce que meilleur outils (comme Lighthouse, construit into Chrome) do the job now. So si a tutorial indique vous to “ouvrir the Ergonomie mobile report,” it’s out of date.

Comment vérifier it now

The easiest option: ouvrir votre page in Chrome, right-click → Inspect, and run Lighthouse (or utiliser PageSpeed Insights at pagespeed.web.dev). Les deux flag petit fonts, cramped tap targets, and viewport problems. Vous pouvez aussi simplement resize votre navigateur or utiliser Chrome’s phone-preview mode and regarder at lune page on a petit screen — a lot of usability problems are obvious the moment vous do.

Don’t confuse it with two similaire choses

• Indexation mobile-first — that’s à propos de qui version of votre page Google reads (the mobile un). Différent topic.
• Core Web Vitals — ceux mesurer speed and stability. Connexe, but a separate définir of numbers.

Vouloir the exact thresholds (how big is “big enough” pour a tap target?), the complet retirement story, and every façon to tester ergonomie mobile today? Switch to the Avancé tab.

TL;DR — Ergonomie mobile = ease of utiliser on a touch device, driven by four signals: legible text (Lighthouse passes at 12px on ≥60% of text; 16px is the practical body-copy baseline), tap targets (Lighthouse fails ci-dessous 48×48 CSS px or quand ≥25% of the target dans 48px of center overlaps a neighbor; ~8px spacing is a starting point — WCAG 2,2’s separate 24×24 CSS px minimum is an accessibility floor, pas a Google ranking rule), content sized to the viewport (nécessite a proper viewport meta tag, but the tag alone doesn’t guarantee responsive layout; aucun horizontal scroll), and aucun intrusive interstitials. Google retired the Search Console Ergonomie mobile report, the Mobile-Friendly Tester outil, and the API on December 1, 2023 (confirmed Dec 4) — pas parce que the signals stopped mattering, but parce que Lighthouse matured and mobile-first indexation was effectively complet. Vérifier it now with Lighthouse, PageSpeed Insights, DevTools device emulation, Bing’s still-live tester, and robots d’exploration. Distinct from indexation mobile-first (qui version is indexé) and Core Web Vitals (chargement/interactivity/stability). It’s un page-experience signal, pas a standalone heavily-weighted ranking factor.

The definition, precisely

Ergonomie mobile is si une page is facile to utiliser on a mobile/touch device. It’s a user-experience concept que lives à l’intérieur Google’s broader page experience model, and it comes bas to four concrete signals. The rest of ce section is chaque un with its réel threshold and citation — parce que the spécifique numbers are exactly ce que la plupart competing articles skip.

Signal 1: legible text

Si personnes have to pinch-zoom to lire votre corps copy, the font is aussi petit. Là are two numbers worth keeping straight, and conflating les is a courant mistake:

• The audit-pass bar is 12px. Lighthouse’s Document uses legible font sizes audit dit: “Aim to have a font size of au moins 12 px on au moins 60% of the text on votre page.” That’s the threshold to technically réussir the automated vérifier.
• The practical baseline is ~16px. 12px passing an audit doesn’t mean 12px is comfortable to lire on a phone. 16px is the généralement recommended floor pour mobile corps text, with headings plus grand. Don’t design to the 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 are blunt instruments. Lighthouse’s Tap targets ne sont pas sized appropriately audit fails a target on two conditions: quand “the target is plus petit que 48 px by 48 px,” and when “au moins 25% the target area dans 48 px of the center of the target overlaps with un autre target.” A few practical notes from the même doc:

• Targets sized 48×48 CSS px consistently réussir.
• The tappable area is ce que counts, pas the visual size — vous pouvez garder a petit icon and expand its hit area with padding to reach 48px. (Ce kills the myth que every button doit regarder 48px.)
• ~8px entre targets is a reasonable starting point but “n’est pas toujours suffisant spacing to réussir the audit surtout pour very petit targets.”

Older Google guidance framed ce as roughly 7mm targets with ~5mm spacing; at typical mobile densities that’s broadly consistent with the 48px figure. Cite the 48px/8px numbers as current; the mm ones are historical color.

There’s a second, separate number worth knowing so vous don’t conflate standards: WCAG 2,2’s Success Criterion 2.5.8 (Target Size Minimum, Level AA) sets a 24×24 CSS px minimum (with spacing/inline/essential exceptions) — an accessibility-conformance rule from the W3C, pas a Recherche Google ranking threshold. It’s plus petit que Lighthouse’s 48px audit bar parce que the two come from différent bodies measuring différent choses: meeting Lighthouse’s 48px figure clears WCAG’s 24px floor aussi, but don’t cite soit number as a fixed, timeless “Google requires N px” rule — Lighthouse’s is a Chrome tooling audit threshold, WCAG’s is an accessibility conformance criterion.

Signal 3: content sized to the viewport

Content devrait fit the width of the phone — aucun horizontal scrolling, aucun page rendered at desktop width and shrunk to unreadable. The mechanism is the viewport meta tag. Sans it (or misconfigured), mobile navigateurs assume a desktop-width canvas and scale everything bas. The fix is un line in the <head>:

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

Google’s guidance: “assurez-vous votre page content fits the width of the viewport, keeping in mind que pas tout mobile devices are the même width.” So don’t hard-code fixed pixel widths que seulement fit un phone.

The tag is necessary but pas sufficient. It aligns the layout viewport with the device width — it doesn’t, by itself, faire fixed-width content responsive. Une page peut ship a correct viewport meta tag and encore échouer ergonomie mobile si individual elements (a wide table, an unbreakable long string, a fixed-pixel container) are hard-coded wider que the viewport. The tag sets the canvas; votre CSS encore has to en réalité fit it.

Signal 4: aucun intrusive interstitials

A full-screen popup que blocks votre content the moment a visitor arrives from search is les deux a usability problem and a search problem. Google: “intrusive interstitials and dialogs are page elements que obstruct utilisateurs’ view of the content, usually pour promotional purposes,” and it warns that they “faire it hard pour Google and autre moteur de recherches to comprendre votre content, qui may lead to poor search performances.” The guidance is blunt — “don’t obscure the entier page with interstitials” — and it points to petit banners taking seulement a fraction of the screen as the acceptable alternative. (The complet treatment of what’s penalized vs. exempt lives in the intrusive interstitials deep dive.)

Ce que happened to the Ergonomie mobile report?

Ce is où la plupart guides — notamment some publié in the dernier année — are flatly incorrect, so it’s worth getting the timeline exactly correct.

• April 2023 — announced. In The role of page experience in creating utile content, Google said: “Aussi starting December 1, 2023, we’ll be retiring Search Console’s ‘Ergonomie mobile’ report, the Mobile-Friendly Tester outil and Mobile-Friendly Tester API. Ce doesn’t mean que ergonomie mobile isn’t important pour success with Recherche Google.” Its reasoning: “in the nearly ten années since we initially launched ce report, nombreux autre robust resources pour evaluating ergonomie mobile have emerged, notamment Lighthouse from Chrome.”
• December 1, 2023 — retired. The report, the Mobile-Friendly Tester outil, and the API tout went away. Google supprimé the corresponding mentions from its search aider docs the même day. The old Mobile-Friendly Tester URL (search.google.com/test/mobile-friendly) now redirections to Lighthouse documentation, and trying to ouvrir the Ergonomie mobile report in Search Console redirections to the GSC overview page.
• December 4, 2023 — confirmed. Google’s Search Console account confirmed the sunset publicly, thanking site owners “for working with us on this journey.”

Pourquoi now? Two forces. Premier, indexation mobile-first was effectively complet — Google announced “the trek to Mobile First Indexing is now complete” on October 31, 2023 — so a dedicated GSC report split out by device made moins sense. Second, Lighthouse had matured into a meilleur, plus actionable checker que the old standalone outil. The signals didn’t arrêter mattering; the dedicated report did.

The practical correction: arrêter telling personnes to “vérifier the Ergonomie mobile report” or “run the Mobile-Friendly Tester.” Les deux are gone. (I’ll be candid — my propre Ahrefs guide, Indexation mobile-first Goes Mobile-Only, dernier mis à jour June 2024, encore points readers to ceux two now-defunct destinations in un spot; that’s exactly the kind of stale advice ce article exists to fix, and it’s on my liste to 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) — the direct replacement. Runs the legible-font, tap-target, and viewport audits and donne vous the spécifique failing elements.
• PageSpeed Insights (pagespeed.web.dev) — runs Lighthouse in the cloud on the mobile profile; bon pour a rapide shareable URL-level vérifier.
• Chrome DevTools device toolbar — emulate a phone, eyeball horizontal scroll, tiny text, and cramped contrôle at réel dimensions.
• Bing’s Mobile Friendliness Tester Outil — a genuine differentiator: Bing encore runs a live mobile-friendliness tester in Bing Webmaster Outils, même though Google’s is gone. Bing’s propre pitch: “making pages mobile-friendly increases utilisateur engagement on mobile devices. It peut aussi aider vous rank meilleur in Bing search results on mobile devices.” Handy pour a second opinion on rendering.
• Third-party robots d’exploration — Ahrefs Site Audit and similaire peut explorer with a mobile user-agent and surface mobile-specific problèmes at scale (connecter lune pageSpeed Insights API pour the mobile checks).
• A réel device. Nothing 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 be entièrement on indexation mobile-first and encore have terrible mobile usability (tiny text, cramped buttons), and vice versa. The indexation mobile-first deep dive and the Core Web Vitals material cover ceux two in complet — ce article is strictly the usability couche.

Fait ergonomie mobile affecter rankings?

Yes, but garder it in proportion. Ergonomie mobile contributes to page experience, qui Google treats as a définir of signals dans broader ranking systems — pas a unique heavily-weighted factor with a fixed score. Google’s propre caution: site owners “should not focus on only one or two aspects of page experience,” and “Google Search toujours seeks to montrer the la plupart relevant content, même si lune page experience is sub-par.” So fix usability parce que it helps réel utilisateurs (and it’s the correct chose to do) — pas parce que vous expect a magic ranking bump. It’s a contributor, pas a kingmaker.

Où ce sits in the mobile-seo cluster

Ce is un piece of the wider mobile SEO picture. Indexation mobile-first covers qui version Google reads and le contenu-parity rule; the mobile SEO checklist is the run-it-down audit; the interstitials, AMP, and responsive-vs- dynamic-serving topics chaque obtenir leur propre treatment. Ce article deliberately stays in its lane — the usability signals — so it complements ceux plutôt que repeating les.

AI summary

A condensed prendre on the Avancé version:

• Ergonomie mobile = ease of utiliser on a touch device. Four signals: legible text, tap targets, content sized to the viewport, aucun intrusive interstitials.
• Legible text: Lighthouse passes at 12px on ≥60% of text, but 16px is the practical body-copy baseline. Don’t design to the audit minimum.
• Tap targets: Lighthouse fails ci-dessous 48×48 CSS px or quand ≥25% of the area dans 48px of center overlaps a neighbor. The tappable area (via padding) is ce que counts, pas the visual size. ~8px spacing is a starting point. WCAG 2,2’s Target Size Minimum (SC 2.5.8, Level AA) sets a separate 24×24 CSS px accessibility floor — a W3C conformance rule, pas a Google ranking threshold.
• Viewport: <meta name="viewport" content="width=device-width, initial-scale=1">; content doit fit the phone width with aucun horizontal scroll. The tag aligns the layout viewport with the device width but doesn’t by itself faire fixed-width content responsive — individual elements peut encore overflow.
• Intrusive interstitials: full-page overlays on entry obstruct content and hurt search performances; petit banners are the acceptable alternative.
• The report is gone. Google retired the Search Console Ergonomie mobile report, Mobile-Friendly Tester outil, and API on Dec 1, 2023 (confirmed Dec 4) — parce que Lighthouse matured and indexation mobile-first was effectively complet (Oct 31, 2023), pas parce que the signals stopped mattering.
• Vérifier it now with Lighthouse, PageSpeed Insights, DevTools device emulation, Bing’s still-live Mobile Friendliness Tester, and third-party robots d’exploration.
• Distinct from indexation mobile-first (qui version is indexé) and Core Web Vitals (chargement/interactivity/stability).
• Ranking: un page-experience signal dans broader systems, pas a standalone heavily-weighted factor. Google va encore surface the la plupart relevant content même with a sub-par experience.

Documentation officielle

Primary-source documentation from the moteur de recherches.

Google

• The role of page experience in creating utile content (Apr 2023) — the announcement que retired the Ergonomie mobile report, Mobile-Friendly Tester outil, and API as of Dec 1, 2023, and pointed to Lighthouse.
• Understanding Google page experience — où ergonomie mobile sits as a signal, the self-assessment questions, and the “don’t over-index on one signal” caution.
• Éviter intrusive interstitials and dialogs — the interstitials definition and the small-banner alternative.
• Indexation mobile-first has landed (Oct 2023) — the “trek is now complete” milestone que made a dedicated device-split report unnecessary.

Chrome / Lighthouse

• Document doesn’t utiliser legible font sizes — the 12px/60%-of-text audit threshold.
• Tap targets ne sont pas sized appropriately — the 48×48 CSS px audit and the overlap/spacing rules.

Bing / Microsoft

• Bing Mobile Friendliness Tester Outil — encore live, unlike Google’s; tester quelconque URL pour mobile-friendliness in Bing Webmaster Outils.

W3C

• 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.

Quotes from the source

On-the-record statements from Google, Chrome/Lighthouse, and Bing. Chaque lien is a deep lien que jumps to the quoted passage où the source page supports it.

Google — retiring the report and outils (Apr 2023 announcement)

• “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.” — Recherche Google Central Blog. Lire the post
• “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.” Lire the post

Google — page experience framing

• “Google Search always seeks to show the most relevant content, even if the page experience is sub-par.” — Recherche Google Central docs. Jump to quote

Google — intrusive interstitials

• “Intrusive interstitials and dialogs are page elements that obstruct users’ view of the content, usually for promotional purposes.” — Recherche Google Central docs. Jump to quote

Google — indexation mobile-first complet (context)

• “We’re delighted to announce that the trek to Mobile First Indexing is now complete.” — Recherche Google Central Blog, Oct 31, 2023. Jump to quote

Chrome / Lighthouse — the thresholds

• “Aim to have a font size of at least 12 px on at least 60% of the text on your page.” — Chrome pour Developers / Lighthouse docs. Jump to quote
• Tap targets échouer quand “48 px by 48 px” isn’t met, and quand target areas overlap dans 48px of center. Jump to quote

Bing — the still-live outil

• “Making pages mobile-friendly increases user engagement on mobile devices. It can also help you rank better in Bing search results on mobile devices.” — Bing Webmaster Outils, Mobile Friendliness Tester. Ouvrir the outil

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

The old “just open the Mobile Usability report” réponse ne … plus fonctionne. Qui current outil vous reach pour dépend on ce que you’re trying to do. Click via it.

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 text is legible sans zooming — ~16px baseline; at minimum passes Lighthouse’s 12px-on-≥60%-of-text audit.
• Tap targets are 48×48 CSS px (or a plus petit icon with padding expanding the tappable area to 48px).
• Tap targets aren’t crowded — adjacent targets don’t overlap dans 48px of center; ~8px+ spacing, plus pour very petit ones.
• Viewport meta tag présent — <meta name="viewport" content="width=device-width, initial-scale=1">.
• Aucun horizontal scrolling — content fits the viewport width; aucun fixed-pixel elements wider que the screen.
• Aucun intrusive interstitial on entry from search — full-page overlays are out; petit banners and legally requis gates are fine.
• CSS/JS pas blocked in robots.txt — Googlebot nécessite les to render the mobile page and judge usability.
• Audited with Lighthouse / PageSpeed Insights — pas the retired Mobile-Friendly Tester or GSC Ergonomie mobile report.
• 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. The audit bar n’est pas the goal. Lighthouse passes text at 12px and tap targets at exactly 48px. Ceux are floors, pas targets. Aim pour 16px corps copy and comfortably-spaced contrôle — passing the audit and being pleasant to utiliser aren’t the même chose.

3. Tappable area, pas visual size. A petit icon peut réussir the tap-target audit si padding expands its hit area to 48px. Design the hit area, pas simplement the pixels vous pouvez voir.

4. The three “not the same as.”

• Ergonomie mobile ≠ indexation mobile-first (that’s qui version is indexé).
• Ergonomie mobile ≠ Core Web Vitals (that’s chargement/interactivity/stability).
• Ergonomie mobile ≠ a unique heavy ranking factor (it’s un page-experience signal among several).

5. The tooling déplacé — mettre à jour votre muscle memory. The dedicated GSC report and Mobile-Friendly Tester are gone (Dec 2023). Reach pour Lighthouse / PageSpeed Insights / DevTools / Bing’s tester / a robot d’exploration à la place. Si a traiter doc encore dit “check the Mobile Usability report,” the traiter doc is the bug.

Ergonomie mobile — cheat sheet

The four signals + thresholds

The viewport one-liner

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

Dates to know

• Apr 2023 — Google announces the retirement.
• Oct 31, 2023 — indexation mobile-first declared complet.
• Dec 1, 2023 — Ergonomie mobile report + 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 in Chrome and run Lighthouse. DevTools (⌘⌥I / Ctrl+Shift+I) → Lighthouse tab → vérifier SEO and Performances → Analyze page charger (choisir the Mobile device). Remarque quelconque legible font sizes or tap targets échecs — Lighthouse listes the spécifique elements.
2. Confirmer the viewport tag. In DevTools Elements, search the <head> pour name="viewport". It devrait lire width=device-width, initial-scale=1. Aucun tag, or a fixed width=980-style valeur, is the fix.
3. Emulate a phone and regarder. Toggle the device toolbar (⌘⇧M / Ctrl+Shift+M), pick a petit device (e.g. iPhone SE width). Scroll the complet page: quelconque horizontal scrollbar or element bleeding off the correct edge is a viewport-fit échec.
4. Tester tap targets by hand. In device mode, essayer tapping adjacent liens/buttons. Si you’d realistically mis-tap, they’re aussi petit or aussi fermer — target 48px hit areas with ~8px+ spacing.
5. Vérifier pour entry interstitials. Charger l’URL fresh (incognito) as si arriving from search. A full-page overlay avant vous pouvez lire le contenu is a problem; petit banners and legal/consent gates are fine.
6. Cross-check with Bing’s live tester (optional second opinion) at bing.com/webmaster/outils/mobile-friendliness, and/or PageSpeed Insights pour a shareable record.
7. Vérifier on a réel device si lune page matters. Emulation is fermer, pas perfect.
8. Fichier fixes by signal — font size, tap sizing/spacing, viewport, interstitial — so devs obtenir an actionable liste, pas “make it mobile-friendly.”

Ergonomie mobile anti-patterns

The recurring mistakes — several of les baked into stale advice that’s encore circulating.

• “Check the GSC Mobile Usability report.” It was retired December 1, 2023 and l’URL now redirections to the overview page. Si a doc or tutorial dit ce, it’s out of date — notamment, jusqu’à it’s corrected, a passage in my propre Ahrefs guide.
• “Run Google’s Mobile-Friendly Test.” Aussi retired Dec 1, 2023; the old URL redirections to Lighthouse docs. Multiple currently-live articles encore décrire ce outil as working — it isn’t.
• Designing to the 12px audit floor. Passing Lighthouse’s font-size audit at 12px doesn’t faire text comfortable to lire on a phone. Utiliser ~16px pour corps copy.
• Measuring the visible icon, pas the tappable area. A 24px icon peut encore réussir the tap-target audit si padding expands its hit area to 48px. Shrinking the hit area to match the graphic is the mistake.
• Omitting or misconfiguring the viewport meta tag. Aucun tag (or a fixed-width un) rend mobile navigateurs render at desktop width and shrink everything. It’s a one-line fix that’s facile to forget.
• Full-screen interstitials on entry from search. Newsletter/app-install/ad overlays que block content the moment a visitor arrives obstruct le contenu and peut hurt search performances. Utiliser a petit banner à la place.
• Blocking CSS/JS in robots.txt. Si Googlebot can’t récupérer the assets, it can’t render the mobile page correctement or judge its usability.
• Treating ergonomie mobile as a big standalone ranking lever. It’s un page-experience signal, and Google va encore surface the la plupart relevant content même with a sub-par experience. Fix it pour utilisateurs, pas pour an imagined ranking jump.
• Conflating it with indexation mobile-first or Core Web Vitals. Différent problems, différent fixes, différent outils. Garder les separate.

Rapide checks vous pouvez run yourself

Vous don’t besoin the retired outils to spot the courant échecs. A few practical snippets.

Vérifier the viewport meta tag from the 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 into the Chrome DevTools console pendant que emulating a phone — it listes quelconque element wider que the viewport, the usual causer of 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 the caveat: the tappable area (padding inclus) is ce que the audit measures — an element flagged ici peut encore be fine si padding expands its hit area to 48px.

Outils pour checking ergonomie mobile

• Chrome Lighthouse (DevTools → Lighthouse) — the direct replacement pour the retired Mobile-Friendly Tester. Runs the legible-font, tap-target, and viewport audits and noms the failing elements.
• PageSpeed Insights (pagespeed.web.dev) — Lighthouse in the cloud on the mobile profile; shareable URL-level results.
• Chrome DevTools device toolbar — phone emulation pour eyeballing horizontal scroll, tiny text, and cramped contrôle at réel dimensions.
• Bing Mobile Friendliness Tester Outil — encore live in Bing Webmaster Outils; a réel second opinion now que Google’s dedicated outil is gone.
• Search Console Inspection d’URL — voir the rendered mobile HTML and screenshot Googlebot smartphone saw (doesn’t grade usability, but confirms ce que renders).
• Ahrefs Site Audit — explorer with a mobile user-agent and surface mobile-specific problèmes à travers every page (connecter lune pageSpeed Insights API pour the mobile checks).
• A réel phone — the ground truth emulation approximates.

Mobile page semble fine in emulation but fails on a phone

Symptom: Chrome’s device toolbar semble clean, but utilisateurs report clipped content, overlapping contrôle, or unusable dialogs. Probable causer: emulation did pas reproduce the phone’s navigateur chrome, safe-area insets, text scaling, or operating-system keyboard. Fix: reproduce the task on au moins un physical iOS device and un physical Android device. Tester orientation changements, increased text size, and the on-screen keyboard, pas simplement the landing state.

Lune page scrolls sideways

Symptom: a narrow strip of content extends past the correct edge. Probable causer: a fixed-width element, unbroken string, table, image, or 100vw container is wider que the layout viewport. Fix: utiliser DevTools to inspect the widest element, faire media responsive, autoriser long text to wrap, and préférer width: 100% à l’intérieur padded containers. Ne faites pas hide the evidence with overflow-x: hidden jusqu’à vous have fixed the source.

Tap targets encore échouer après increasing the icon

Symptom: Lighthouse encore flags a contrôler après its visible icon got plus grand. Probable causer: the interactive box remains petit or neighboring liens overlap its usable space. Fix: ajouter padding to the clickable element itself, space adjacent targets, and vérifier the rendered hit box in DevTools. Enlarging seulement an SVG à l’intérieur a tiny anchor ne fait pas enlarge the anchor.

Text becomes unreadable après charger

Symptom: the initial HTML semble usable, alors client-side code replaces it with tiny text or a desktop layout. Probable causer: responsive styles or components charger late, échouer at a breakpoint, or differ entre server and client rendering. Fix: tester the rendered state with JavaScript enabled, inspect the failing breakpoint, and garder the mobile layout in the initial critical CSS où practical.

Prove a mobile-usability fix worked

Testez vos connaissances: Ergonomie mobile

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

Ressources utiles

My writing

• Indexation mobile-first Goes Mobile-Only (Ahrefs) — my deep dive on indexation mobile-first and mobile design meilleur practices. Fair warning: as of its June 2024 mettre à jour it encore points readers to the retired GSC Ergonomie mobile report and Mobile-Friendly Tester — the stale advice ce article corrects, and something I plan to fix là.
• The Beginner’s Guide to SEO technique (Ahrefs) — où ergonomie mobile fits à l’intérieur the broader technical-SEO picture.
• Core Web Vitals: Ce que Ils Are & How to Améliorer Yours (Ahrefs) — the performances side of mobile experience, qui personnes routinely conflate with usability.

My speaking

• How Search Fonctionne (SlideShare) — my walkthrough of exploration, rendering, indexation, and ranking, notamment how Googlebot crawls as a smartphone. (Standing disclaimer: “This is my understanding of systems… not going to be 100% complete or accurate.”)

From autour the industry

• The role of page experience in creating utile content (Google) — the April 2023 post que announced the report/outil retirement and pointed to Lighthouse.
• Google Officially Drops Ergonomie mobile Report, Mobile-Friendly Tester Outil and API (Moteur de recherche Land, Barry Schwartz) — the retirement, in plain language.
• Recherche Google Console’s Ergonomie mobile Report & Mobile-Friendly Tests Are Gone (Moteur de recherche Roundtable, Barry Schwartz) — the Dec 4, 2023 sunset confirmation and où the old URLs now redirection.
• Document doesn’t utiliser legible font sizes (Chrome / Lighthouse) — the 12px/60%-of-text audit threshold.
• Tap targets ne sont pas sized appropriately (Chrome / Lighthouse) — the 48×48 CSS px audit and spacing rules.
• Éviter intrusive interstitials and dialogs (Google) — the interstitials definition and the acceptable-banner alternative.
• Bing Mobile Friendliness Tester Outil (Bing Webmaster Outils) — encore live; tester quelconque URL pour mobile-friendliness.

Stats worth citing

• Legible-font audit réussir bar: 12px on ≥60% of text — Lighthouse’s documented threshold. Remarque it’s a réussir floor, pas the recommended ~16px body-copy baseline. Source
• Tap-target audit fails ci-dessous 48×48 CSS px (and on ≥25% overlap dans 48px of center) — Lighthouse. The tappable area, pas the visual size, is what’s mesuré. Source
• WCAG 2,2 Target Size Minimum (SC 2.5.8, Level AA): 24×24 CSS px — a separate accessibility-conformance rule from the W3C, pas a Recherche Google ranking threshold; plus petit que Lighthouse’s 48px audit bar parce que it measures a différent chose. Source
• Retirement date: December 1, 2023 — Google retired the Search Console Mobile Usability report, the Mobile-Friendly Tester outil, and the API on ce date (confirmed publicly Dec 4, 2023). Source
• Indexation mobile-first declared complet October 31, 2023 — the milestone que made a dedicated device-split usability report unnecessary. Source

Journal des modifications