Email Design That Actually Gets Clicked: A Practical Checklist (Mobile, Dark Mode, Accessibility)

"Keep it clean and responsive" is the standard email design advice — true, but not specific enough to act on. Here's the concrete version: actual layout rules, CTA button specs, a dark mode testing step most guides skip, and why accessibility directly affects your click-through rate.

Layout: single-column, mobile-first, with real dimensions

Over 60% of email opens happen on mobile, so design for the small screen first:

• Single-column layout — multi-column designs break or become unreadable on mobile; a single column reflows cleanly on every screen.
• Body width around 600px max — the long-standing safe width that renders reliably across email clients (which lag years behind modern browsers in CSS support).
• Font size 14–16px minimum for body text, larger for headings — anything smaller forces mobile users to pinch-zoom, which kills engagement.
• Generous tap spacing — interactive elements (especially the CTA) need enough padding that a thumb can't accidentally hit the wrong thing.

CTA buttons: specific, not "make it stand out"

The CTA is where the click actually happens, so treat it deliberately:

• One primary CTA — multiple competing CTAs dilute clicks; if you need a secondary action, make it visually subordinate (a text link, not a second button).
• Bulletproof buttons — build the button with HTML/CSS (a styled table cell or padded link), not as an image; image-only buttons disappear when a client blocks images by default, taking your CTA with them.
• Minimum ~44px tap height — the widely-referenced minimum touch target size, so the button is comfortably tappable on mobile.
• Action-specific label — "Get the checklist" or "Book a call" beats "Click here" or "Submit"; the label should describe what happens next.
• Above the fold where possible — the primary CTA should be visible without scrolling on a typical mobile screen, then optionally repeated at the bottom.

Dark mode: the testing step most guides skip

A large and growing share of users read email in dark mode, where email clients invert or recolor your design unpredictably — a logo on a white background can end up in an ugly white box, and dark text can become invisible on a darkened background. Practically:

• Test your email in dark mode on at least Gmail and Apple Mail before sending — don't assume it looks the same as light mode.
• Use transparent PNGs for logos so they don't sit in a jarring white box when the background inverts.
• Avoid pure black or pure white as background colors, which produce the harshest inversions.

Accessibility directly affects your click-through rate

Accessible email isn't just compliance — it's more readable for everyone, which means more clicks:

• Sufficient color contrast between text and background (WCAG's contrast guidance is the reference) — low-contrast text loses readers regardless of ability.
• ALT text on every image — since many clients block images by default, ALT text is often what the reader actually sees; a CTA image with no ALT text is a blank gap.
• Real text, not text-in-images — text baked into an image can't be resized, read by a screen reader, or recolored for dark mode, and disappears when images are blocked.

Subject line and preheader: the click starts before the open

(For the full craft here — formulas, a swipe file, and spam-word avoidance — see email subject line formulas.)

• Subject line ~40 characters to avoid truncation on mobile.
• Use the preheader deliberately — the preview text after the subject line is prime real estate; don't waste it on "View in browser" or leave it showing raw HTML.
• Test subject line variants with proper A/B testing, not by gut feel.

A pre-send checklist

Before hitting send, verify:

1. Renders correctly on mobile (single column, readable font sizes).
2. Renders correctly in dark mode (logo, contrast, backgrounds).
3. CTA is a bulletproof (non-image) button with an action-specific label.
4. Every image has ALT text.
5. Preheader text is intentional and compelling.
6. All links work and point where intended.

FAQ

Why does my email look broken in some inboxes but fine in others? Email clients support wildly different levels of CSS — Gmail, Outlook, and Apple Mail all render differently. Design conservatively (single column, table-based layout, inline styles) and test across the major clients before sending.

Do I really need to design for dark mode? Yes — a large share of users read in dark mode, and an email that looks broken there loses those clicks. It's a quick test that catches an increasingly common problem.

How many CTAs should an email have? One primary CTA, optionally repeated (same action) at the top and bottom for a longer email. Multiple different CTAs competing for attention reliably lowers click-through on the one that matters most.

Related Reading

• AI Email Marketing: Automation Sequences and Tools — the automation and deliverability side that complements good design.
• How to Write ALT Text That Actually Works for Accessibility and SEO — the ALT text discipline that applies to email images too.
• A/B Testing for Marketing Campaigns — how to test subject lines and layouts properly.

Want your email templates rebuilt for mobile, dark mode, and accessibility?

Xscade's digital marketing agency in Vizag builds email templates that render reliably across clients and test clean in dark mode. Get in touch to have yours reviewed.