Using the Health Bar in Postcards
The Health Bar is the diagnostics panel for your email. As you build, it checks your project for rendering problems, deliverability risks, accessibility trouble and plain mistakes: a button Outlook will draw without its background, an image with no alt text, text too pale to read against its background, links you never meant to leave in.
Each kind of problem gets its own card. Open one and you get a plain explanation of why it matters, the specific findings for your project, and a Highlight button that jumps straight to the element on the canvas. Nothing is changed for you. The Health Bar points, you decide what to fix.

The panel opens with two things that are not checks at all:
- Test Deliverability, which sends your email through a real spam and inbox-placement test.
- Email Size, your current weight against Gmail's clipping limit.
The Health Bar and its automatic checks are available on all plans. The three AI reviews inside it run on AI credits, so they need a paid plan.
Opening the Health Bar
In the editor's top bar, click the slim vertical gauge at the far right, past Export. The panel opens over the right side of the editor. On a wide window the gauge sits beside your email size; on a narrower one the figure is hidden and only the gauge is left.

A short tip sits at the top of the panel explaining what it's for. Tick Don't show again to hide it for good.
Note: The panel keeps analyzing while you work. You can edit the email, click into the canvas, open the right settings panel, and the list keeps recalculating behind you.
What's in the panel
Reading top to bottom, the panel has four parts. Click any one to jump straight to it:
- Test Deliverability — sends your email through a real spam and inbox-placement test. It needs your workspace's own SMTP server connected.
- Email Size — your current weight against Gmail's clipping limit, with a link to tips for trimming it.
- The three AI reviews — Review Writing with AI, Visual Insights with AI, and Accessibility Insights with AI. Nothing runs until you ask for it, and each one costs credits.
- The check cards — the automatic checks. Free, instant, and always running in the background.
Tip: The screenshot above is clickable too. Click any of the four parts to jump to its section.
Test Deliverability
Test Deliverability sends your email through an external testing service and reports what really happened to it.
You get two results. Spam Score is a score out of 100 with a breakdown of the checks behind it, and Inbox shows where the email actually landed at a range of providers.
Important: A real test requires your workspace's own SMTP server to be connected. Without one, Postcards shows a clearly marked demo result instead, and no email is sent. See Connecting your SMTP server at the end of this article.
Running the test
Click Test Deliverability at the top of the panel. The subtitle under the button tells you what will happen when you click.
| Subtitle | What it means |
|---|---|
| This may take up to 1 minute. | Your SMTP server is connected, so clicking runs a real test |
| Preview only. No email is sent. | No SMTP server connected, so clicking opens the demo |
| Email was updated since last test. | You have a result, but the email changed. The button now reads Re-test Deliverability |
| Couldn't run the test. Click to retry. | The last attempt failed |
The button is replaced by the two result blocks, and the numbers fill in gradually as providers reply. The spam score arrives first; inbox placement takes longer.
The demo result
With no SMTP server connected, clicking Test Deliverability opens a dialog headed Preview, not a real test: Testing your own domain needs your SMTP. Without it we can only show sample numbers. You can Connect your SMTP or click Preview.

Preview fills the two blocks with sample figures so you can see how the result reads, under a standing banner: This is a preview with sample data. Connect your SMTP to test your own domain. No email is sent, and the numbers have nothing to do with your email or your domain.
Note: To run a real test on your own domain, your workspace needs its own SMTP server connected. Connecting your SMTP server at the end of this article walks through it.
Spam Score
The score reads out of 100. Open the dropdown for the checks behind it, each marked Passed, Needs attention, or Failed, with our recommendation of what to do about it:
- SPF, DKIM, DMARC, the three DNS records that prove you are allowed to send from your domain
- Blacklists, whether your sending IP or domain is listed
- Reverse DNS, whether your sending IP resolves back to your domain
- Image to text ratio and Image-heavy email, how much of the message is readable without images
- Salesy wording in the subject line and first paragraph
- Unsubscribe link

Note: The checks and their wording come from the testing service, so the exact list can differ between runs and accounts. An unfamiliar entry is not a bug. We show what came back rather than hiding it.
Inbox placement
Inbox reads as a count, such as 5 out of 8, meaning how many of the tested mailboxes put your email in the main inbox. Open the dropdown for the provider-by-provider breakdown: Gmail, Outlook, Google Workspace (Business), Outlook (Business), Zoho, ProtonMail, Yahoo, AOL and others, each marked Inbox, Promotions, or Spam.
Two statuses are ours rather than the service's. Pending… in italics means we are still waiting on that provider, and No data means the reply never arrived.

Saved results
A finished result is stored with the email. Close the panel, reload the page, or come back tomorrow and it is still there, with no second round of test emails.
Any real change to the email content marks the result stale. The button comes back as Re-test Deliverability with Email was updated since last test. Renaming the project or a routine autosave does not count; editing the content does.
Email Size
Under the tip at the top of the panel, Email Size shows your current weight against 102 KB, the point where Gmail clips a message and hides the rest behind a "View entire message" link. The bar fills as the email grows.

Tips to reduce email size links to Best Practices: Tips to Reduce Email Template Size.
Note: This is the size of the HTML itself, not your images. Images are hosted and loaded separately, so for those watch the Large Images card.
The three AI reviews
Three cards at the top of the panel hand the email to AI instead of a rule. All three are opt-in: nothing runs until you press the button, and none of them change your email on their own. Open a card and the estimated cost in credits appears next to its button.
Review Writing with AI
Reviews the copy in your project for tone, clarity, structure, and calls to action. Click Run AI review and the review opens in the AI chat: grammar slips, weak or duplicated button copy, a stray character, an empty preheader. Each point comes with the rewrite it suggests.

Accessibility Insights with AI
The deeper accessibility pass, covering colour contrast, font sizes, link visibility, and tap-target sizes, including text that sits on a background image, which the free Accessibility Issues check cannot measure. It reports exact colour values and what to change them to.

Visual Insights with AI
The original design review, and the one that works differently from the other two. Open the card and click Analyze design, the findings appear inside the Health Bar itself rather than in the chat. It looks at your email the way a reader sees it: spacing, contrast, structural balance, typographic hierarchy.
Full details in Visual Insights with AI.
Applying what they suggest
Review Writing and Accessibility Insights both end their answer in the chat with Apply suggestions. Until you press it, your email is untouched. Press it and the AI editor makes the changes, which you can still undo like any other edit.

Note: These reviews run on AI credits from your workspace's shared balance. The figure on the button is an estimate for that project, so longer and more complex emails cost more. See Understanding AI Credits.
How a check card works
Every automatic check follows the same shape.
- The card title: Names the problem area Missing Alt Texts, Invalid Links, Accessibility Issues.
- The description: Explains why it matters, in one or two sentences.
- The findings: Are the specific results for your project, with counts: "6 images without alt text", "3 icons without alt text".
- Highlight: Selects the affected elements on the canvas one at a time. The button counts as you go — Highlight — 1 of 9, then 2 of 9, and so on. Click through the whole set, fix as you go, and watch the findings drop off the list.
- Learn more appears on the cards where an outside reference helps, and opens documentation for the email client concerned.

Note: Not every card has a Highlight button. Deliverability Issues measures the whole email at once, so there is no single element to jump to.
A card only appears when your project triggers it. An email with no countdown timer never shows Countdown Issues. This is why two projects rarely show the same list.
What Highlight does for you
Highlight isn't just a scroll. It selects the element, brings it into view in the centre of the editor, and reveals it in the Layout panel on the left so you can see where it sits in the structure.
It also switches preview mode when it has to. If a finding only exists in the mobile version — an element hidden on desktop, say — clicking Highlight flips the editor to mobile first, then selects the element.
Tip: The panel is fully keyboard-operable. Tab through the cards and press Enter or Space to open and close them.
When the list changes
- It recalculates as you edit, a moment after you stop typing or dragging. Make several changes quickly and the list settles once, rather than flickering through every intermediate state.
- Both preview modes are checked at once. The panel measures the desktop and the mobile version together, whichever one you happen to be previewing, so switching modes does not change the list. Where it matters, a finding says which version it was seen on: Seen on the desktop version, Seen on the mobile version.
- Hidden modules drop out. Hide a module in the Layout panel and its findings leave the list with it.
- Export as Image silences a module's contents. Turn the option on and the findings inside that module disappear, because the whole thing ships as one picture. Two checks keep running: the alt text for the exported image itself, and the email's total image weight. See How to Export a Module as an Image.
The automatic checks
These run in your browser, cost nothing, and update as you edit. The AI reviews are covered separately above.
Buttons Over Backgrounds
A button sitting on a section or grid that has a background image. Outlook supports only one VML block, so it draws the button and ignores the background behind it.

Too Wide
Anything overflowing the width it has to work with:
| What it checks | What triggers it |
|---|---|
| The template's overall width | Wider than the standard 600 px |
| An image against the container holding it | The image is wider, beyond a 10% tolerance |
| An element against its module | The element needs more width than the module has, and stretches the layout |

Deliverability Issues
The balance of text to images, measured in the editor. Emails that are mostly picture look like advertising to spam filters.
| What it checks | What triggers it |
|---|---|
| Readable text in the whole email | Under 200 characters, an image-only email |
| Text as a share of the email | Below 40% |
| Text as a share of the email | Below the safer 60% mark |
Note: This is a local estimate from your project's content. It is not the same thing as Test Deliverability, further up, which sends the email to a real testing service.
Missing Alt Texts
Alt text is read aloud by screen readers and shown in place of an image that hasn't loaded — including in Outlook, which blocks external images until the reader allows them. Each kind of element is counted separately: images, icons, video preview frames (the alt lives on the preview frame), and modules set to Export as Image.
For what to write in the field, see Adding and Optimizing Alt Text in Your Emails.

Overly Complex Layout
Deeply nested structures break in Outlook on Windows and push the email past Gmail's clipping limit.
| What it checks | What triggers it |
|---|---|
| How many modules the email has | More than 15 |
| How many containers the email has | More than 20 in total, and more than 6 per module |
| How deeply containers are nested | 3 levels or deeper |
A container isn't something you add. Here it is the word for the elements that hold other elements: grids, tables, groups, lists, and cards. Each one becomes a nested table when the email is exported, which is why stacking them gets expensive. The right settings panel uses the same word, so selecting a grid gives you settings headed CONTAINER.

Outlook-Specific Issues
An image, icon, countdown timer, or video preview stacked over a background image. Outlook on Windows has limited support for that stack and may render it incorrectly. The fix is to merge the layers into a single image, or mark the module as Export as Image.

More on this client in Common Issues with Outlook Email Templates.
Invalid Links
| What it checks | What triggers it |
|---|---|
| Buttons | The button has no address — the reader clicks and goes nowhere |
| The address on any link | It's empty or malformed |
| Where links point | Still at postcards.email or designmodo.com/postcards |
Tip: The third one catches placeholder links left behind from a template. Worth clearing before every send.

Invalid Custom Code
Custom code that won't survive export. It covers individual Custom HTML modules (invalid markup, or an empty module) and the code you've added in the project's own <head> and <body> blocks.
See Adding and Managing Custom Code.
Countdown Issues
The only card tied to a single element type, and the most detailed one:
| What it checks | What triggers it |
|---|---|
| The end date | Not set. The email ships the expired state instead of a ticking timer, and with no deadline to describe, the alt text falls back to the expired message |
| The end date | Already past. Recipients see the expired state the moment the email lands |
| The end date | Close enough that it expires shortly after the send. The card names the window in hours |
| The timer file's weight | Heavy enough to matter. The card notes that comfortable for email is under 1 MB, and suggests lowering the Scale, dropping the FPS, or switching APNG back to GIF |
| The file format | APNG. Gmail and Outlook show only the first frame, so the timer looks frozen there; GIF animates everywhere |
| What happens after the deadline | The timer disappears and leaves a gap in the layout. Show Message keeps the block intact |
| The rendered size | Wider than its column. The image is capped to the column anyway, so the extra width only adds file weight |

Countdown elements now also have their own ALT TEXT field in the right panel. See How Countdown Timer Works in Postcards.
Accessibility Issues
A free, automatic accessibility pass — no AI, no credits, instant.
| What it checks | What triggers it |
|---|---|
| Text against its background | Contrast of 1.5:1 or lower, so the text is practically the colour of its background. Usually the text colour was left transparent |
| Text against its background | Below the WCAG AA standard: 4.5:1 for body text, 3:1 for large text |
| A button's label against its fill | The label is hard to read |
| Font size, desktop version | Under 14 px |
| Font size, mobile version | Under 12 px |
| How a link is styled | It looks the same as the text around it |
| The size of a clickable area | Under 44 px on a phone |
| What the alt text says | It is just a file name, such as image, DSC 0001 or untitled |
| Line spacing | Under 1.2, checked on text up to 24 px |
| Runs of capitals | 40 characters or more set entirely in capitals |
| Text alignment | Justified to both margins |
| Emoji | Four or more in one place |

AMP Issues
This card appears once your project contains an AMP Carousel or AMP Accordion. As the card puts it, your project exports a second, interactive AMP version alongside the HTML email, and the card lists what that version drops or breaks. Its first line is always there as a standing reminder: AMP renders only in Gmail and Yahoo Mail, it needs a sender registered with them and an ESP that adds the AMP part, and Postcards integrations, test emails, and the Deliverability Test all send HTML only. Everyone else sees the fallback — slides stacked, sections expanded.
The rest of the card flags what would break or disappear in the AMP version. The two code findings are about your project's own <head> and <body> blocks, under Add Custom Code in the project settings, not code attached to the AMP element:
- Body custom code is dropped from the AMP version — tracking pixels and merge tags placed there only reach recipients who get the HTML version.
- Head custom code is trimmed in the AMP version —
<script>,<style>,<link>,<meta http-equiv>, and<meta name="viewport">are removed, because amp4email doesn't allow them. The HTML version keeps your code as written. - Web fonts do not load in the AMP version — they're replaced with your project's Fallback Font. This one fires on almost every AMP project by design, since the default project font is a web font.
- AMP version is too large for Gmail — the rendered AMP document is over 200 KB, so Gmail rejects it and shows the HTML fallback. The AMP for Email limit is exactly 200,000 bytes, and the card counts kilobytes decimally to match. Unlike every other check here, this one is measured on our servers rather than in your browser, so it stays quiet until that measurement comes back, and the weight it reports is the minified size.
- Content only in the AMP version — a block set to AMP only with no HTML-only counterpart in the same module. Recipients outside Gmail and Yahoo Mail never see it.
- Empty carousel / Carousel with a single slide — nothing to export, or nothing to swipe.
- Empty accordion / Section without content / Section without a title.
- Image over plain http — amp4email requires https for images, and one
http://URL invalidates the whole AMP version.

See How the AMP Carousel Works in Postcards and How the AMP Accordion Works in Postcards.
Large Images
This one is not a defect. It is a hint that the email could be lighter, which is why it sits at the bottom of the automatic checks rather than the top.
| What it checks | What triggers it |
|---|---|
| A single image | Over 1 MB, as a nudge to resize it |
| A single image | Over 3 MB, flagged harder because it can push the email past Gmail's clipping limit |
| A GIF used as a video preview | Over 5 MB. Postcards merges it with a play icon on export, so the file that ships is larger still |
| Every image together | Over 10 MB, the total each recipient downloads when the email opens |

For ways to bring the weight down, see Best Practices: Tips to Reduce Email Template Size.
Connecting your SMTP server
The deliverability test has to send your email from somewhere. Connecting your own outgoing mail server means the test measures your real sending reputation: your domain, your IP, your authentication records. That is the only way inbox placement means anything.
Important: These credentials are used by the deliverability test and nothing else in Postcards. Postcards does not send your campaigns.
Who can set it up
The workspace Owner and Editors. Viewers have no access to the tab. Settings are per workspace, so each workspace connects its own server. See Creating and Managing Workspaces in Postcards.
Filling in the form
- From the projects dashboard, open Workspace Settings in the left sidebar.
- Go to the SMTP tab.

- Fill in the fields below and click Save changes.
| Field | What to enter |
|---|---|
| SMTP Host | Your provider's outgoing server address, for example smtp.yourdomain.com |
| Port | 587, 465, 25, or 2525 |
| Encryption | TLS (STARTTLS), SSL, or None. Port 465 uses SSL; 587 usually uses TLS |
| Username | Usually the full mailbox address. Leave empty if your relay accepts unauthenticated mail |
| Password | Most providers require an app password, not your account password |
| From Email | Must be an address your SMTP account is allowed to send from |
| From Name | Optional. Leave empty to use the part of the From Email before the @ |
Once saved, you can send yourself a test message to confirm the connection works, reveal the stored password, or delete the settings entirely. Deleting them puts Test Deliverability back to demo results only.
Tip: If a test message fails, the error tells you what the server objected to: the wrong port for the encryption you picked, an account password where an app password was needed, or a From Email your account is not allowed to send from.
Good to know
- Work through the list, do not fear it. A long list on a busy template is normal. The cards are ordered roughly by how much they will cost you in a real inbox, with Large Images last because it is an optimisation, not a fault.
- You do not have to switch preview modes to find everything. The panel checks both, and a finding that applies to only one says so.
- The Health Bar checks structure, not taste. It will not tell you the offer is unclear. That is what Review Writing with AI is for.
- A clean panel is not a guarantee. It catches the problems we know how to detect, so always preview the real thing. See How to Preview Your Template Across Email Clients in Postcards.
