Mobile-First Email Principles
Why Mobile-First
Over 60% of emails are opened on mobile devices. A 600px-wide desktop email that shrinks on a phone creates tiny unreadable text and impossible-to-tap links.
Width and Layout
Set your email container to a max of 600px with 100% width as the base:
<table width="100%" style="max-width:600px; margin:0 auto;">
Use single-column layouts by default. Multi-column layouts require media queries and add complexity — only use them when the content genuinely benefits.
Font Sizes
| Element | Minimum Size |
|---|---|
| Body text | 16px |
| Secondary text | 14px |
| Heading (H1) | 24px |
| Heading (H2) | 20px |
Below 14px becomes difficult to read without zooming. Use system fonts (-apple-system, Arial, sans-serif) for reliable rendering.
Tap Targets
Every link and button must be at least 44×44px — Apple's HIG minimum. A common mistake is using text links inline; they're hard to tap accurately.
Images
Always include width="100%" and max-width on images. Add descriptive alt text — many mobile users have images off by default.
<img src="banner.jpg" width="100%" style="max-width:600px; display:block;" alt="Spring sale — 30% off all products">
Spacing
Use generous padding (16–24px) on mobile. Tight spacing makes content feel cramped and increases mis-taps. Add padding with inline styles — CSS classes are unreliable in older clients.