Skip to main content

​
Template Best Practices

Create email templates that look great and deliver reliably.

​
Design Principles

​
Mobile-First

Over 60% of emails are opened on mobile: 
<!-- Responsive container -->
<table width="100%" style="max-width: 600px;">
  <tr>
    <td style="padding: 20px;">
      <!-- Content -->
    </td>
  </tr>
</table>

​
Single-Column Layout

Simpler layouts render better across clients: 
<!-- ✅ Good - Single column -->
<table width="100%" style="max-width: 600px;">
  <tr><td>Header</td></tr>
  <tr><td>Content</td></tr>
  <tr><td>Footer</td></tr>
</table>

<!-- ⚠️ Caution - Multi-column (may break) -->
<table>
  <tr>
    <td width="50%">Left</td>
    <td width="50%">Right</td>
  </tr>
</table>

​
Accessible Design

  • Use sufficient color contrast (4.5:1 ratio)
  • Include alt text for images
  • Use semantic HTML when possible
  • Don’t rely on color alone to convey meaning

​
Code Practices

​
Use Tables for Layout

Tables render consistently across email clients: 
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" style="padding: 20px;">
      <h1 style="margin: 0; color: #333;">Welcome!</h1>
    </td>
  </tr>
</table>

​
Inline All CSS

Email clients strip <style> tags: 
<!-- ❌ Bad -->
<style>
  .heading { color: blue; }
</style>
<h1 class="heading">Hello</h1>

<!-- ✅ Good -->
<h1 style="color: blue;">Hello</h1>

​
Use Web-Safe Fonts

Fall back to system fonts: 
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
  Your text here
</p>

​
Set Image Dimensions

Prevent layout shifts: 
<img 
  src="https://example.com/image.png" 
  alt="Description" 
  width="600" 
  height="300"
  style="max-width: 100%; height: auto;"
/>

​
Content Guidelines

​
Subject Lines

DoDon’t
Keep under 50 charactersUse ALL CAPS
Be specific and relevantUse excessive punctuation!!!
Create urgency naturallyUse spammy words (FREE, ACT NOW)
Test with A/B testingMislead recipients

​
Preheader Text

The preview text shown after the subject: 
<!-- Hidden preheader -->
<div style="display: none; max-height: 0; overflow: hidden;">
  Your preview text here (40-130 characters)
</div>

​
Call-to-Action Buttons

<table role="presentation" cellpadding="0" cellspacing="0">
  <tr>
    <td style="background: #6366F1; border-radius: 6px;">
      <a href="https://example.com" style="
        display: inline-block;
        padding: 14px 28px;
        color: #ffffff;
        text-decoration: none;
        font-weight: bold;
      ">
        Click Here
      </a>
    </td>
  </tr>
</table>

​
Required Elements

<p style="font-size: 12px; color: #666;">
  <a href="{{unsubscribe_url}}" style="color: #666;">Unsubscribe</a>
</p>

​
Physical Address

Required by CAN-SPAM: 
<p style="font-size: 12px; color: #666;">
  Company Name<br>
  123 Main Street<br>
  City, State 12345
</p>

<p style="font-size: 12px;">
  <a href="{{view_in_browser_url}}">View in browser</a>
</p>

​
Using Variables

​
Basic Variables

<p>Hello {{name}},</p>
<p>Your order #{{order_id}} is confirmed.</p>

​
Conditional Content

{{#if premium}}
  <p>Thank you for being a premium member!</p>
{{else}}
  <p>Upgrade to premium for exclusive benefits.</p>
{{/if}}

​
Default Values

<p>Hello {{name|default:"there"}},</p>

​
Testing

​
Preview Across Clients

Test in:
  • Gmail (web and mobile)
  • Outlook (desktop and web)
  • Apple Mail (macOS and iOS)
  • Yahoo Mail

​
Dark Mode

Ensure readability in dark mode: 
<!-- Use both background-color and bgcolor -->
<td bgcolor="#ffffff" style="background-color: #ffffff;">
  <!-- Content -->
</td>

​
Accessibility Testing

  • Screen reader compatibility
  • Keyboard navigation
  • Color contrast checkers

​
Template Checklist

1

Mobile Responsive

Renders well on small screens.
2

Inline CSS

All styles are inline.
3

Alt Text

All images have alt attributes.
4

Unsubscribe Link

Visible and functional.
5

Physical Address

Included in footer.
6

Tested

Previewed in major email clients.