Mobile Email Design: Templates That Work on the Phone

Seventy percent of your list will see the email on a phone. Designing desktop-first and “checking mobile later” is how you get 18% opens and a 1.2% CTR — the pattern we keep finding in email audits.

Mobile email design is not a smaller version of your homepage. It is a thumb, a short attention span, and a Gmail preview pane that will ignore your brand if the first two lines are a legal disclaimer.

Design for the preview pane before the hero

The first “design” decision is not the banner. It is preheader + subject + from name. If those fail, the layout never gets a chance.

• From name: the brand they subscribed to, not via Klaviyo or a founder nickname nobody recognizes.
• Subject: specific. Product, benefit, or a real deadline. Not “Newsletter #247.”
• Preheader: a second sentence, not Help us get 10% off by sharing leftover from a template.

On mobile, that trio is the ad unit. Treat it like one.

Hierarchy that survives 375 pixels

A mobile email has about one idea above the fold:

1. What this is.
2. Why they should care.
3. Where to tap.

Everything else is optional. Collages of twelve products with 9px captions are desktop leftovers. They look busy on a 27-inch monitor and unreadable on a train.

Type and tap targets

Body copy at 16px. Headlines that wrap without looking like a ransom note. Buttons at least 44px tall with padding you can hit with a thumb, not a cursor.

Never put two competing CTAs side by side on mobile (“Shop men” / “Shop women” as 50/50 pills that collapse into 22px). Stack them.

Images are not copy

If the offer only exists inside a JPG, Outlook, dark mode, and image-blocking will hide your email. Put the words in HTML. Use images for product and mood. Alt text should be a sentence, not image001.jpg.

This is also why we argue about “email design” vs decoration on the email marketing page: a pretty collage that does not click is not a design system.

HTML/CSS patterns that actually ship

Keep the markup boring. Email CSS is not Tailwind on a marketing site.

<table role="presentation" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td style="padding:24px 20px;font-family:Arial,sans-serif;font-size:16px;line-height:1.5;color:#1F2937;">
      <p style="margin:0 0 16px 0;">The navy coat is back in your size.</p>
      <a href="https://example.com/p/navy-coat"
         style="display:inline-block;background:#CC9C50;color:#1A1408;text-decoration:none;padding:14px 22px;font-weight:700;border-radius:8px;">
        Shop the coat
      </a>
    </td>
  </tr>
</table>

Rules we actually enforce in QA:

• Max width ~600px for the desktop container. Fluid tables inside.
• No hover-only information. There is no hover on a phone.
• Dark mode: avoid white text on images that invert poorly. Test in iOS Mail dark, Gmail app, and Outlook.
• One live text CTA. Image-only buttons break when images are off.
• Unsubscribe that looks like the brand. Hidden 8px gray links look like spam and still have to work.

For Klaviyo, use a cloned template as a system, not 40 one-offs. Unique campaigns can still share padding, type scale, and button style. That is how you stay fast without looking like a default.

QA on a real phone, not a preview slider

Litmus and Email on Acid are useful. They are not a substitute for sending to your own iPhone and a cheap Android.

Checklist we run before a flow goes live:

1. Turn images off. Can you still tell what to do?
2. Rotate to landscape. Did a table explode?
3. Tap every link. UTM and deep links.
4. Dark mode. Is the gold still gold, or mustard on mustard?
5. Load on a slow connection. Did a 1.4MB GIF just cost you the open?

A/B testing a hero image before this checklist is how you “learn” that version B won because version A was broken on iOS 18.

Where design sits in the retention system

Mobile design does not replace segmentation or flows. It is how those systems show up in a hand. A VIP early-access email can be quiet and large type. A cart reminder can be almost nothing but the product and a button.

If your templates are still desktop posters, we will say so on the audit. If you want them rebuilt to match how people actually buy — schedule a consultation.