Email Template Design Best Practices

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