Email Best Practices

Use table-based layouts

Tables are the most reliable layout method across all email clients. Outlook Classic renders with Microsoft Word and ignores flexbox and grid, so a layout built on them stacks there.

<table role="presentation" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td style="padding: 20px;">
      Left column
    </td>
    <td style="padding: 20px;">
      Right column
    </td>
  </tr>
</table>

Add role="presentation" so screen readers don't announce the table structure.

Inline your styles

A <style> block does not reach every reader: Gmail's apps drop it for non-Google accounts, and Gmail drops one over 16KB. Always inline critical CSS:

<!-- Unreliable in Gmail -->
<style>.heading { color: red; }</style>
<h1 class="heading">Hello</h1>

<!-- Reliable everywhere -->
<h1 style="color: red;">Hello</h1>

You can keep a <style> block for clients that support it (Yahoo, Apple Mail, Thunderbird) as progressive enhancement.

Set explicit widths

Use pixel widths instead of percentages for consistent sizing across clients:

<table width="600" style="max-width: 600px; width: 100%;">

Use web-safe fonts

Not all email clients support custom fonts. Always include fallbacks:

font-family: Arial, Helvetica, sans-serif;

Avoid these properties

These CSS properties have poor cross-client support:

Set background colors on <td>, not <div>

For maximum compatibility, apply background colors to table cells:

<td style="background-color: #f0f0f0; padding: 20px;">
  Content
</td>

Test with Emailens

Run your email through Emailens to catch issues before sending:

curl -X POST https://app.emailens.dev/api/preview \
  -H "Content-Type: application/json" \
  -d '{"html": "..."}'

Check the overallScore: it is the worst client's score, so anything under 100 names the client to fix first.