Mobile-First Email Design For Charities: The Working Standard

More than three quarters of supporter emails from UK charities are opened on a phone first. The supporter sees the subject line on a lock screen, taps it open on a train or in a quiet evening moment, and decides in five seconds whether to read further, donate, or close. Most charity email templates are still designed desktop-first, with a layout that becomes a pinch-and-zoom obstacle course on a 6-inch screen. The fix is not a redesign every campaign; it is a single mobile-first master template the team uses every time.

The single-column rule and why it matters

A single-column layout is the only layout that renders predictably across every modern email client at every screen size. Two-column layouts (text and image side by side, sidebar with secondary content) break in characteristic ways on phones: text becomes unreadably narrow, images shrink to thumbnails, the eye does not know where to go next.

Move to single-column even when the email is read on desktop. The supporter eye still tracks top to bottom, the message stays clear, and the template behaves the same on every device. The minor loss in desktop visual density is more than recovered in mobile conversion.

Type and tap targets: the non-negotiables

1. Body text at least 16 pixels (Apple Mail and most Gmail clients render smaller text uncomfortably on mobile).
2. Headlines 22 to 28 pixels for primary, 18 to 20 pixels for secondary.
3. Line height around 1.4 to 1.6 for body copy.
4. Tap targets (buttons and link blocks) at least 44 by 44 pixels per WCAG 2.2 and Apple HIG.
5. Adequate spacing between tappable elements: at least 8 pixels of clear space.

These five rules together prevent the most common mobile rendering failures: tiny body copy, missed taps on adjacent links, and unreadable headlines.

The above-the-fold rule

On a typical phone, the first 480 to 600 pixels of vertical space is what the supporter sees before scrolling. That space must contain: a recognisable sender, a clear subject relevance signal, the primary message, and the primary action. Everything else can sit below.

Common above-the-fold mistakes:

• A 400-pixel hero image that pushes the message off-screen.
• A long preheader that repeats the subject.
• A logo and navigation strip taking 150 pixels before the message starts.
• A salutation and paragraph of context before the actual ask.

On a successful mobile email, the supporter sees who it is from, what it is about, why it matters now, and what to do next, all without scrolling.

The donation block: the single highest-impact element

For appeal emails, the donation block is the working unit. A good mobile donation block contains:

1. A short, specific call to action ("Give 25 pounds today" rather than "Donate").
2. Three suggested amounts as large tap targets, with the recommended amount visually emphasised.
3. A short impact statement tied to each amount ("25 pounds funds a week of meals for one family").
4. A "different amount" option that takes one tap to expose.
5. A clear button to confirm and go to the donation page.

Stack the elements vertically. Resist the temptation to lay out three amounts horizontally; on phones below 400 pixels wide, horizontal layouts crowd the tap targets and the click-through rate falls.

Dark mode without a separate template

Apple Mail, Outlook and Gmail all support automatic dark-mode inversion of light templates, with varying levels of intelligence. You do not need a separate template; you need a few defensive design choices.

• Logos as transparent PNGs with a soft outline that works on light or dark backgrounds.
• Explicit text colour declarations (avoid relying on default browser colours).
• Avoid placing dark text inside containers that the client may auto-invert to dark.
• Test sends to a real iPhone (light and dark) and a real Android (Gmail app) before every campaign.

Most dark-mode rendering complaints come from logos and brand strips that disappear or invert ugly. Fix the logo once and most other concerns resolve.

Images: the trade-offs honestly

Hero images sell brand and emotion; they also slow load, cost engagement when the client blocks images by default, and consume above-the-fold space. The working rule: use one image deliberately, not three by habit.

• Always provide alt text that describes the image and conveys the message even when blocked.
• Compress JPEGs and PNGs aggressively; aim for under 100 kilobytes per image.
• Avoid embedding critical message text inside images; render text as live HTML so screen readers and dark-mode inversion work.
• Test how the email looks with images turned off; the message should still land.

Accessibility: not optional

Email accessibility is part of the charity duty to its supporters, including those using screen readers, those on low-vision devices, and those navigating with keyboard or switch input. The same mobile-first standard generally produces more accessible emails as a side effect, but a few specifics matter:

1. Semantic HTML: use h1, h2 and p tags rather than styled divs.
2. Meaningful alt text on every image (decorative images get empty alt="").
3. Adequate colour contrast (4.5:1 for body text, 3:1 for large headlines per WCAG AA).
4. Avoid sole reliance on colour to convey meaning.
5. Logical reading order in the source, not just visually.

The pre-send QA checklist

A working pre-send checklist takes about 10 minutes per email and prevents the most common embarrassments. Run it for every campaign:

• Sender name and reply-to address correct and recognisable.
• Subject line under 50 characters where possible.
• Preheader complements the subject, does not duplicate it.
• Test send to iPhone (light and dark), Android Gmail, and desktop Outlook web.
• Tap targets at least 44 by 44 pixels on every link and button.
• All images have alt text.
• All links tested (donation link, unsubscribe, social).
• Plain text fallback present and readable.
• Unsubscribe link visible and functional.

The charities whose email programmes outperform peer benchmarks are not the ones with the most creative templates. They are the ones with a tight mobile-first standard the team uses every single time.

A short adoption plan

1. Pick one master template. Build it mobile-first. Test it on at least three devices.
2. Migrate the next three campaigns to the template. Compare performance against the previous quarter.
3. Once the lift is confirmed, deprecate the old templates entirely.
4. Add the QA checklist to the production workflow as a mandatory step.

Mobile-first email design is not a fashion choice; it is matching the design to where the supporter actually opens the message. The charities that make the switch see the entire email programme become more reliable, more accessible and more profitable, often without changing a single subject line or piece of copy.

Related reading: Charity Newsletter Redesign Checklist, BIMI For Charities: When The Blue Tick Actually Matters and Email Subject Lines That Earn the Open.