Key takeaways
- Many B2B emails are designed on large monitors and never tested on a phone, which leads to tiny text, oversized images, buttons too small to tap and multi-column layouts that collapse badly.
- Your audience reads on a few dominant clients. Litmus’s July 2026 data from more than a billion tracked opens shows Apple Mail and Gmail together account for close to 90% of opens, and both are heavily used on phones.
- Exact mobile shares are hard to measure because Apple Mail Privacy Protection hides device details, so design mobile-first by default.
- Use a single-column layout, 16-pixel or larger body text, tap targets of at least 44 by 44 points and images that scale to the screen.
- Test in Apple Mail, Gmail and classic Outlook for Windows before every send, and check dark mode.
Most people check email on a phone at some point in the day, including the decision-makers B2B companies want to reach. Yet many B2B emails still look broken on mobile. This Emulent guide covers the design principles that make emails work on phones, how to apply them to your business and how to test and measure them.
What principles make emails work on mobile?
Design for a narrow screen and a thumb first, then make sure desktop still looks good.
| Principle | What it means in practice |
|---|---|
| Single column | stack content vertically. Side-by-side columns either shrink to unreadable sizes or stack in the wrong order. |
| Readable text | body copy at 16 pixels or larger, headlines around 22 to 28 pixels and line spacing of about 1.4 to 1.5. |
| Tap-friendly buttons | make primary buttons full width or close to it, at least 44 by 44 points, with space around links so readers do not tap the wrong one. |
| Scalable images | set images to a maximum width of 100%, compress them and always include alt text, since some clients block images by default. |
| Short content | lead with the main point and one call to action, and keep the email short enough to read without long scrolling. |
| Live text, not image text | put headlines and offers in HTML text so they render when images are off and work with screen readers. |
| Dark mode | use transparent PNG logos with light outlines, avoid pure black on pure white and test how colors invert. |
Litmus’s email client market share report notes that Apple and Gmail opens dominate, and that Mail Privacy Protection hides device details for many Apple opens, so you cannot rely on open data to tell you how many readers are on phones. Assume a large share are.
Emulent applies one test to every email: would a busy reader on a phone understand the point and know what to tap within a few seconds?
How do you apply mobile email design to your business?
The principles are universal; the details depend on your audience and email types.
- B2B companies: many readers use Outlook at work and Apple Mail or Gmail on their phones. Classic Outlook for Windows renders HTML with Word, so use table-based layouts, bulletproof buttons and fallbacks that hold up there and on mobile.
- Franchise brands: build mobile-first templates centrally, with locked layouts and editable text blocks, so local edits cannot break the design.
- Small businesses: a simple single-column template with a tap-to-call button and a map link often works best.
- Healthcare email: large text and clear buttons for scheduling and reminders, with accessible color contrast for older patients.
- Ecommerce: product grids should stack into one or two columns on phones. For ecommerce, Emulent recommends Shopify, whose email templates are responsive by default.
Landing pages should match.
How do you measure and improve mobile email performance?
Test before sending, then compare engagement by device where your tools allow.
- Preview testing: use Litmus, Email on Acid or your platform’s previews to check Apple Mail on iPhone, Gmail on Android and iOS, classic and new Outlook, and dark mode.
- Send real tests to a few phones on your team, and tap every link and button.
- Click rate and click map: see which links people tap and whether buttons outperform text links. Use clicks rather than opens, which Apple Mail Privacy Protection inflates.
- GA4 by device: tag email links with UTM parameters and compare engagement and key events for mobile and desktop sessions from email.
- Accessibility checks: color contrast, alt text, logical reading order and a plain-text version.
- A/B tests: compare button sizes, email length and image-heavy versus text-led designs.
Mobile-friendly email works best inside a wider content strategy that keeps messages short and links to useful pages.
How can the Emulent team help?
Emulent designs and codes mobile-first email templates, tests them across major clients and dark mode, and connects email clicks to landing pages and analytics. A caveat: email clients change their rendering rules often, especially Outlook, so retest templates every few months and after platform updates. Contact the Emulent team to fix emails that break on phones.