Make Every Email Look Great on Every Screen.

Typically 55–70% of emails are opened on mobile devices, depending on your audience and industry. B2C audiences tend to be 60–70% mobile, B2B audiences 40–55%. This means mobile is the primary reading experience for most subscribers, and emails that aren't optimised for mobile will underperform with the majority of your audience. The guide includes device breakdown benchmarks by industry and how to measure your own device distribution.

One column, one CTA, thumb-friendly targets. Use a single-column layout that stacks content vertically. Place your primary CTA where it's easily reachable with one hand — the middle third of the screen, not the bottom. Buttons should be at least 44×44 pixels (ideally 48×48+) with plenty of padding. Text should be at least 14px for body copy and 22px for headlines. The guide includes mobile-first email templates and a mobile QA checklist.

Test on real devices, not just simulators. At minimum test on iPhone (iOS Mail and Gmail app), Android (Gmail app), and an iPad or similar tablet. Check rendering in both portrait and landscape. Send test emails to yourself and open on multiple devices. Use Litmus or Email on Acid for comprehensive mobile rendering previews across 100+ client/device combinations. The guide includes a mobile testing protocol with specific checks for each client.

Dark mode inverts or adjusts colours on most email clients. Emails designed only for light mode can become unreadable in dark mode — white backgrounds become black, light text on white backgrounds disappears, and transparent PNGs with dark elements become invisible. Use meta colour-scheme tags, add dark mode CSS media queries, use PNGs with transparent backgrounds carefully, and avoid hardcoding white backgrounds on text elements. The guide includes dark mode code patterns and a pre-send dark mode checklist.

Fluid/hybrid design (using percentage-based widths that scale naturally) is generally preferred over responsive design (using media queries to rearrange content at breakpoints) because it works more consistently across all email clients, especially Outlook on Windows which has limited media query support. Many modern templates combine both approaches. The guide includes fluid, responsive, and hybrid template comparisons with code examples for each approach.

Mobile load times directly impact engagement — every second of delay reduces conversions by approximately 7%. Optimise images (compress to under 200KB, use appropriate dimensions, lazy-load below-the-fold images), minimise the number of external assets, and keep total email size under 100KB where possible. Large emails with multiple high-res images are often clipped by Gmail and load slowly on mobile connections. The guide includes image optimisation workflows and size budget guidelines.