The disconnect between design environment and opening environment kills more campaigns than spam filters. Your CRM dashboard shows the desktop render; your recipient is in line at a coffee shop on an iPhone. Render both, review both.
- Desktop viewport (1440px-ish).
- Mobile viewport (iPhone-class).
- Both in light and dark mode where applicable.
- Both for webmail and native mobile client where the provider's mobile app is materially different (Gmail iOS/Android).
Mobile-specific breakage
- Text too small to tap — CTAs under 44pt touch target.
- Multi-column layouts that don't collapse to single-column (iOS 10+ is more lenient; Android Gmail 2019+ respects media queries; older clients don't).
- Horizontal scrolling appearing because an image is fixed at a non-fluid width.
- Pre-header text cut off at the inbox list before the user even opens.
- Pre-header text revealing content intended to be invisible (classic).
Desktop-specific breakage
- Wide bands of whitespace from a mobile-first template not filling the viewport.
- Outlook desktop downscaling high-resolution images incorrectly.
- Reading-pane width truncation on clients that clip at 720px.
| Symptom | Mobile | Desktop |
|---|---|---|
| Tap targets too small (<44pt) | Common | — |
| Multi-column layouts not collapsing | Common on older clients | — |
| Horizontal scroll from fixed-width image | Common | — |
| Pre-header truncated or leaking body text | Common | Less visible |
| Wide whitespace bands | — | Common (mobile-first template) |
| Image downscaling artefacts | — | Outlook desktop |
| Reading-pane truncation at 720px | — | Common |
Best practice informed by screenshots
- Fluid width (max-width 600px; 100% inside).
- Single-column content blocks with optional nested columns for desktop.
- CTA with padding + font-size that hits the 44pt guidance.
- Pre-header explicitly set (so it doesn't leak body).
- Test with our screenshots before every campaign refresh.
Run a test. Desktop + mobile screenshots included free.