Mark the version
Add the template version or build number to the end of the subject so messages from an old queue aren’t mistaken for the current result.
HTML email preview
Inspect an email layer by layer
Don’t just ask whether it looks right. Check everything from the inbox list to the plain-text fallback to find issues with subjects, layouts, links, and accessibility.
Preview checklist
Each layer matches a real interface users encounter. Change one variable at a time so results remain comparable.
01 Inbox listIs the subject complete, does the sender look trustworthy, and does the preheader reveal template text?
02 Email headerCan the brand identity, hierarchy, and background colors still be recognized when images are blocked?
03 Main contentDo the heading, body, whitespace, and reading order stay clear on narrow screens?
04 Call-to-action buttonDoes the button copy explain the outcome, and are the link destination and tracking parameters correct?
05 Media and long stringsWill large images, long URLs, or order numbers break the body or be cropped incorrectly?
06 Plain-text fallbackEven without HTML, the message should contain complete facts, copyable links, and a readable order.
Prepare your sample
Make every preview reproducible
A test email should include a unique ID, a clear trigger time, and verifiable expected results. Don’t change the template, recipient address, and sending configuration at the same time.
Keep sending evidence
Record the send job ID, destination address, and trigger time so you can check the queue and bounces if delivery is delayed.
Define pass criteria
Specify the subject length, button destination, mobile wrapping, and plain-text content in advance. Don’t close the issue with “good enough.”
Passing visually doesn’t mean passing on information
Beautiful HTML can hide broken links, missing preheaders, or verification codes that can’t be copied. Check the facts first, then assess the visual hierarchy.
- The subject and body tell the same story
- The verification code expiry matches the product interface
- Unsubscribe and security information actually work
What isolated previews solve
Real emails come with their own styles. Placing the body in a restricted frame prevents site CSS from rewriting the template and stops email scripts from running directly.
- Images shrink to fit the reading area
- Long strings can wrap safely
- Plain text is used when HTML is unavailable
Record the results
Write conclusions as “symptom—evidence—fix”
“The button is broken” won’t help the next tester. Record the client width, actual link, reproduction steps, and template version.
In a 390px reading area, the primary button text wraps to two lines and compresses the spacing above and below.
Record the email subject, template version, screenshot, and button destination URL.
Shorten the call-to-action copy, increase the button’s horizontal padding, and send a new version.
Use a new address to receive a uniquely numbered sample and confirm that older emails haven’t entered the results.