Checklist mode: a 12-question mobile readiness checklist
Open the page on a phone, or your browser’s phone-sized view, and answer Yes or No. Seven questions are blockers that can stop the work on a phone: readable size, no sideways scrolling, readable text, thumb-sized buttons, tables that fit, logging in and finishing the main task.
- Score = round(points from Yes answers ÷ 19 × 100). A blocker Yes earns 2 points, any other Yes 1 (7 × 2 + 5 × 1 = 19). No and unanswered earn 0.
- Readiness band, once all 12 are answered: three or more blockers No is “Not ready for phones”; one or two, “Partly usable: fix the blockers first”; none, with a score of 90 or more, “Phone-ready” (at most one other No); anything else, “Usable, with rough edges”.
- Top fixes: each No becomes a fix, blockers first, then the rest, in question order, up to five.
Example (hypothetical, not client data)
A warehouse team checks its inventory count screen. It scrolls sideways (No on question 2), the table’s last columns are cut off (No on 5) and the quantity field opens the letter keyboard (No on 9). Points: 19 − 2 − 2 − 1 = 14; 14 ÷ 19 × 100 = 73.7, so the score is 74. Two blockers are No: “Partly usable: fix the blockers first”. Fixes, in order: sideways scrolling, the wide table, form field types.
Bookmarklet mode: eight automatic checks at 390px wide
Drag “Test this page” to your bookmarks bar, open a page of your app (logged in is fine) and click it. After you confirm, it reloads the same address in a 390px-wide frame, waits for the load plus 1.5 seconds and runs eight checks. Up to five fixes follow: fails first, then warns, in table order.
Tap-target thresholds follow WCAG 2.2: Success Criterion 2.5.8 (Level AA) sets a 24 by 24 CSS pixel minimum and 2.5.5 (Level AAA) sets 44 by 44. Both exempt targets in a sentence, so links inside sentences are skipped (a heuristic); a checkbox or radio is measured by its label if that’s bigger. Visually hidden or off-screen targets, such as “skip to content” links, aren’t counted.
Paste the overlay’s report into the tool to add it to your report. The panel counts its FAIL, WARN and PASS lines but doesn’t change your checklist score.
Assumptions and limits
- The checks are heuristics at one width in a desktop browser, against the page as it first loads. Confirm on a real phone.
- Menus opened by script on mouseover aren’t detected, WCAG’s spacing exception isn’t applied, and stylesheets from other domains often can’t be read.
- The reload counts as a second visit to your app, so save half-finished work first.
- If framing is blocked, the page loads blank or redirects to another site, or it takes over 20 seconds, the bookmarklet checks the current window instead. A redirect within your app, such as to a sign-in page, gets checked, and the report shows that page’s address. For a phone-sized view, Chrome DevTools’ Device Mode toggles with Ctrl+Shift+M, or Cmd+Shift+M on a Mac (shortcut list); Google calls it a “first-order approximation” of a phone.
- A bookmarklet report shows the page’s address without the query string, and its examples can include up to 30 characters of on-screen text, never form values. Check a report before sharing it.