One design. Every screen size.
A live page, a Lindi prototype or a Figma file, checked at up to 6 widths from 320 to 1920. Measured checks that name their rule, a matrix of where it holds and where it breaks — and no score.
- A live site, Lindi or Figma
- Up to 3 pages of a live website, 6 Lindi screens or 8 Figma frames in one audit.
- 10 widths, 320 to 1920
- Phones, tablets and desktops. Pick up to 6, each rendered for real at that width.
- Every check names its rule
- 17 measured checks — WCAG reflow and tap targets, iOS form zoom, legible type — each stated as fact.
- No score, on purpose
- A score would average away the one size that breaks. You get where it holds and where it doesn’t.
What an audit gives back
Pick one to see it drawn from a sample audit.
10 preset widths, from the narrowest phone still sold to a wide monitor. A phone width gets an iPhone’s user agent, touch and mobile mode; a tablet width gets an iPad’s.
Where a layout gives way
Usually at the narrow end, and usually because of one element.
Find the missing phone frame before a developer guesses it
Point it at the Figma file or the Lindi prototype. Figma frames are read from their layers at the size they were drawn, and a file with no frame under 768px is told so — as is a frame laid out by hand, with no auto layout.
The new checkout holds at 1440 and breaks at 390
Run the live page at two phones, a tablet each way up and a desktop. The headline comes from measured findings alone, and the ruler shows where the trouble starts.
Trace sideways scroll to the element causing it
“Page scrolls sideways by 22px” names .promo-banner, boxes it on the 390 render, and gives the usual fix: max-width: 100%, and flex children allowed to shrink.
Built to be fixed, not watched
- 320 → 192010 preset widths, up to 6 an audit
Every size that matters
From WCAG’s 320px reflow width to a wide monitor where unbounded lines stretch past reading.
- Tap targetsMajor–
A pass only where a check ran
A tick means it ran and found nothing; a dash means it doesn’t apply at that size. Tap targets on a desktop are a dash, never a tick.
- /100Breaks at 390px and below.
No score, deliberately
“Breaks at 390” is a thing to fix. A number out of 100 averages it away — and moves when someone fixes a caption.
What it reads, and how
A straight answer about what each source can tell you.
A live website
Up to 3 pages, each rendered for real at every width you pick. A live page runs 15 of the 17 checks.
A Lindi prototype
Up to 6 screens. Each is real HTML, so it renders like a live page; phone widths come first, because Lindi designs on a 375px canvas. 14 checks apply.
A Figma file
Up to 8 frames, read from their layers at the size each was drawn — a frame can’t reflow. 12 checks apply, 2 of them Figma’s own.
Phone and tablet browsers
Under 768px a render gets an iPhone’s user agent, touch and mobile mode; tablet widths get an iPad’s. Without mobile mode, a page with no viewport tag would pass.
The other Design audits
- UX AuditOne screen, one goal — ranked findings and a blueprint.Every finding a prediction
- FidelityWhat shipped against what was designed, value by value.Figma or image · screenshot or URL
- Content AuditThe words read against their job, with rewrites ready to paste.Six registers · reading level measured
What a front-end developer asks first
Are these real devices?
No. Each width is rendered for real in a real browser. Phone widths get an iPhone’s user agent, touch and mobile mode, and tablet widths an iPad’s, so the page serves the layout it would serve a phone. It catches what breaks a layout; it is not a device lab.
Why is there no score?
Because a score averages. A page that is perfect at four sizes and unusable at 320 still scores well, and “breaks at 320” is what you need to read. You get where it holds, where it breaks, and the findings behind each.
What about Figma frames, which can’t reflow?
Each frame is read from its layers at the size it was drawn, and frames drawn for different sizes are compared. Nothing is measured at a width nobody drew. Figma adds checks of its own: “No phone design” and “Layers placed by hand”.
How many sizes and pages?
Up to 6 of the 10 preset widths, and up to 3 pages of a live site, 6 Lindi screens or 8 Figma frames — at most 18 renders an audit. A Figma frame brings its own size.
Test from your pocket
The uTestMe tester app runs a study on a phone. Taps and screens recorded, consent first, results in the same view.
- Tap tracking
- Screen recording
- Consent first