Point it at your stack

· 8 min read

Previews show you the email. They never measure it.

Five people approved it. The PNG went into the thread on Wednesday, three thumbs-up, a note about the subject line, ship it. On Thursday the send goes out and the primary CTA wraps onto two lines on a 390-pixel-wide phone, which is most phones, which is most of the audience. Nobody was careless. Everybody looked at a picture of the email at a width nobody holds, and looking is not measuring.

Justin Williames

By Justin Williames

Founder, Orbit · 10+ years in lifecycle marketing

SharePostPost

Two different questions, one identical-looking artefact

There are two questions in email QA and they sound similar enough that most teams only ever answer one. The first is a design question: does this look like what we approved, in the clients our audience uses? The second is a measurement question: is any value in this render outside a limit we care about? Both produce something that looks like a screenshot, which is why the second one keeps getting skipped — the team already has pictures, so the job feels done.

It is not done. A picture of an email at 600 pixels tells you nothing about what happens at 390. A picture at 390 tells you the CTA wrapped, but only if someone notices. Noticing is a coin flip on a Wednesday afternoon in a thread with a subject-line debate running through it. Measurement does not depend on anyone noticing. That is the entire argument for it.

What only a real layout can tell you

Orbit's render gate lays the email out at 640px and 390px inside a real browser engine and measures the result. The list of what comes back is short, deliberately, because each item is a defect class that static analysis of the HTML genuinely cannot see and a human reviewer genuinely does not catch reliably.

  • A heading or paragraph whose last line holds one word.The widow. Visible in a screenshot, in the sense that photons reach your eye. Nobody flags it, because flagging typography in someone else's approved design feels like a personality trait. A finding that says "last line: 1 word" is not a personality trait.
  • A CTA row that wraps at mobile width. The one from the opening. It is only visible if you previewed at the width where it happens, and preview tools default to whatever they default to.
  • A tap target under 44×44 CSS px. This is unseeable. A 41-pixel button and a 45-pixel button look identical on screen and behave differently under a thumb. You cannot eyeball three pixels. The entire industry has spent a decade pretending otherwise.
  • Computed foreground/background contrast below WCAG AA. Computed, not declared — after inheritance, after the overlay, after the element actually painted where it painted. Nobody distinguishes 4.2:1 from 4.5:1 by looking, and the difference is the line between readable on a sunlit train and not.
  • Rendered height.Reported as a measurement, without a verdict attached, because there is no universal pixel ceiling for email and inventing one would be worse than saying nothing. It is still the number that tells you this "short" email is eleven screens long.
  • Byte size against Gmail's 102 KB limit. Fully invisible in every preview ever made, and the defect it causes is the ugliest one on the list: Gmail truncates the message and appends a "View entire message" link, which lands directly through your unsubscribe block and, depending where the cut falls, your tracking. The clipping guide has the full mechanics.

Notice what these have in common. Every one of them is a number compared to a threshold — which means every one of them survives being pasted into a thread by someone with no authority. That is the underrated political function of measurement: findings with units let the most junior person on the review block a send. Taste does not travel down a hierarchy. Ratios do.

The Email Render QA skill runs the measured layout first and the markup-level checks second — alt text, heading order, dark-mode risk — and treats them as complements rather than alternatives. They catch different things and neither is a superset of the other.

Three things a screenshot will actively mislead you about

Missing a defect is one failure. Being confidently reassured about one is worse. Previews do that in three specific places.

Dark mode. A dark preview captures what one client did to your colours. It does not tell you which colour pairs in the template are at risk when a different client inverts differently, and the major clients each implemented their own logic. A pair check enumerates the foreground/background combinations that meet on the page and shows what a full inversion does to each — including the pair that currently looks fine because both sides happen to be dark already, and will collapse to invisible when only one side flips. That mechanism is what the dark mode guideexists to explain. Nothing else generates as much "but it looked fine in the preview".

Length. Every preview renders the whole email. Gmail does not, past 102 KB. So the artefact your team reviews is systematically the version a large share of your audience will never see the bottom of. The review reaches a footer the recipient does not.

Width. A preview tool picks a viewport. Your audience picks a phone. If those two numbers differ — and they usually do, because 600 or 640 is the design width and 390 is a common device width — then the reflow behaviour between them is unreviewed. That gap is where the wrapped CTA lives, along with the two-column block that stacked in an order nobody intended.

Where the measured render is not enough

Now the honest half, because a gate oversold is a gate ignored. A browser engine is not Outlook on Windows. Outlook's desktop client renders mail through Word's layout engine. No browser reproduces its behaviour — the padding it drops, the way it treats certain background images, the widths it recomputes. If a meaningful share of your list opens in Outlook desktop, a client-matrix preview service still has a real job — the client-specific tail.

The order is what changes. Measure first: fast, deterministic, catching the defects that affect every recipient regardless of client. Preview second: it is slower and it catches the quirks that affect a subset. Most teams run only the second one, and run it by eye, which means the universal defects — the ones hitting one hundred percent of the audience — get caught by whoever happens to be paying attention, while considerable effort goes into a rendering quirk affecting eight percent.

The check to run on your last send

Take the email you shipped most recently — already sent, already approved, already forgotten. Put the HTML through a measured render at 390px and read the findings.

You are looking for two specific things: a tap target under 44×44 and a computed contrast under 4.5:1. If neither is there, your review process is genuinely working and you have earned the right to keep approving by screenshot. If both are there, they were there last month as well and the month before, because nothing in a picture-based review has ever been capable of surfacing them.

Then put the gate in front of the send rather than beside it. A check that runs when someone remembers is a check that runs on the calm sends and skips the rushed ones, which inverts the entire point.

Read next

Email dark mode: the four render modes

Frequently asked questions

We already pay for a client-preview service. Is that wasted?
No — it is the right tool for client-specific rendering, especially Outlook desktop, which a browser engine cannot stand in for. Measurement is a different job. Keep it, and stop treating a wall of thumbnails as evidence that the email is within limits.
Why 390px and 640px specifically?
640 is the standard email design width — where the layout was authored and where it should be uncontroversial. 390 is a common phone width and the point where multi-column blocks stack and button rows wrap. Two widths catch the reflow class of defect; adding more mostly adds output.
Is a 44px tap target a real rule or a nice-to-have?
It is the long-standing platform guidance for touch targets on mobile. In email it matters more than in product because there is no second attempt — a mis-tap in an inbox is a closed message, not a retry. Treat it as a hard floor for anything you expect a thumb to hit.
Can this run before the copy is final?
It should. Layout defects are structural and show up with placeholder copy. Fixing a wrapping CTA is cheap before sign-off and expensive after. Run it once on the built template, then again on the compiled email with the real copy in — final copy changes line breaks, which is the whole widow problem.

This post is backed by an Orbit skill

More in Point it at your stack

Found this useful? Share it with your team.

SharePostPost

You finished the playbook. Get the next.

New guides and product updates land in your inbox when they ship. One list, real lifecycle work, unsubscribe the second it stops being useful.

Guides and Orbit updates only. No sequences, no selling your address.

Use this in Claude

Claude can run this playbook for you.

Orbit is a free extension for Claude Desktop — no licence key, no card — that runs the lifecycle work you just read about. You've read how it works; Orbit hands Claude the same playbook as a skill it can execute: discovery, build, QA, push, on your own ESP.

Download Orbit — free