Email Template Design Best Practices — Using AcelleMail's Builder Right

Six rules worth keeping, six places to verify them in AcelleMail#

Email design best practices are everywhere, mostly abstract. This guide ties each rule to a specific control in AcelleMail's builder so you know where to look (and where to fix) before launching.

1. Single-column on mobile (60%+ of opens)#

In the AcelleMail email builder, drag a 1-column block as your primary content container. Multi-column blocks (2-col, 3-col) stack vertically on mobile by default, which usually works — but only if each column is at least 280px wide on desktop. Below that, text crams and CTA buttons get cut off.

Verify in Preview:

Toggle desktop ↔ mobile in the Preview header. If the mobile view shows side-by-side columns crushed into 320px, restructure to single column.

2. Preheader text — the second subject#

The preheader is the gray text shown after the subject in most inbox lists. Inboxes auto-grab the first text from the email body if you don't set one — usually "Trouble seeing this email? View in browser" — wasted real estate.

Set it explicitly: campaign builder → Campaign settings → Preheader field (also called "Pre-header" or "Subject snippet" in some installs). Keep it 40-100 characters. Treat it as a second subject line — different angle, supports the main subject.

3. Alt text on every image#

In the builder, click any image block → right panel Image properties → Alt text field. Three reasons it matters:

• Email clients with images off (corporate clients, "image off by default" filters) show alt text in place
• Screen readers announce alt text aloud
• Email reputation: image-only emails (no text alongside) trip spam filters

Standard: alt text on every image. Decorative images get alt="" explicitly (empty, not missing — screen readers skip them then).

4. Buttons: 44px tall minimum, real text#

In the AcelleMail builder, the Button block ships at the right height by default (48px). Don't shrink it below 44px on mobile — Apple's iOS Human Interface Guidelines minimum tap target.

Real text on the button — "Get my 20% discount" beats "Click here". Click-through rate measurably improves: the button text now answers the recipient's "What's in it for me?" before they tap.

5. Dark-mode safety#

In Apple Mail and Gmail on iOS/Android, dark mode inverts light backgrounds + flips text to white. Most templates survive, but logos with transparent PNG against a "light blue" background look terrible when the blue becomes navy.

Test by sending yourself a test email and viewing on an iPhone or Android with dark mode on. If anything looks broken, the fix is usually: change a transparent PNG to a solid-background PNG (white box around the logo) so it doesn't invert.

6. One primary CTA per email#

Email isn't a landing page — one offer per send. If you have a secondary action (e.g. "or read the docs"), make it a text link below the button, not a second button. Multiple buttons compete for attention and the click-through rate of both drops vs. a single button.

Use Preview + A/B to verify before sending#

Send a real preview to yourself#

Builder → Preview → Mobile/Desktop tabs:

For real-client testing, click Send test in the campaign settings — sends a real email to addresses you specify. Open on your phone, your laptop, Outlook web, Gmail web. Anything that looks broken there will look broken in your subscribers' inboxes too.

A/B test the subject + preheader#

AcelleMail's built-in A/B Test lets you split subjects (or preheaders, or content) before committing the full list:

Pick the type when you create the campaign:

Define the variants:

Pick the winner rule — usually highest open rate after 4-12 hours on a 20% sample, then send the winner to the remaining 80%:

The completed test report shows which subject/preheader won + the delta:

Common UI signals + fixes#

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-size="20px">Hello {{ subscriber.first_name }}</mj-text>
        <mj-button href="https://example.com">Get started</mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Related articles#

• Personalization beyond first name — advanced merge tags
• Understanding email client rendering differences
• Setting up UTM parameters for campaign tracking
• A/B testing email campaigns — best practices