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:

  1. Test Deliverability — sends your email through a real spam and inbox-placement test. It needs your workspace's own SMTP server connected.
  2. Email Size — your current weight against Gmail's clipping limit, with a link to tips for trimming it.
  3. 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.
  4. The check cards — the automatic checks. Free, instant, and always running in the background.
The Health Bar panel, with its four parts numbered: Test Deliverability, Email Size, the three AI reviews, and the check cards.

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.

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.

Next steps

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us