Email Design Fundamentals#
Email rendering is notoriously inconsistent across clients. Here's how to design templates that work everywhere.
Layout Rules#
Single Column#
Always use a single-column layout for the main content. Multi-column layouts break on mobile.
<!-- Good: Single column, max 600px -->
<table width="600" style="max-width: 600px; margin: 0 auto;">
<tr><td>Your content here</td></tr>
</table>
Mobile-First#
- Min tap target: 44×44 pixels for buttons and links
- Font size: Minimum 14px body, 22px headings on mobile
- Padding: At least 20px on sides for mobile
Typography#
- Use web-safe fonts: Arial, Helvetica, Georgia, Verdana
- Google Fonts work in some clients but not all — always provide fallback
- Line height: 1.5 for body text, 1.2 for headings
Images#
- Always include
alt text
- Don't use images for critical content (some clients block images by default)
- Optimize file size (under 200KB per image)
- Use
width and height attributes for proper loading
CTA Buttons#
<!-- Bulletproof button (works in Outlook) -->
<table cellpadding="0" cellspacing="0">
<tr>
<td style="background:#E8571A; border-radius:4px; padding:12px 24px;">
<a href="https://example.com" style="color:#ffffff; text-decoration:none; font-weight:bold;">
Shop Now
</a>
</td>
</tr>
</table>
Dark Mode#
Modern email clients support dark mode. Test your designs:
- Use transparent PNGs for logos (not JPGs with white backgrounds)
- Avoid pure white (#ffffff) backgrounds — use light gray (#f5f5f5)
- Set both light and dark color scheme meta tags
