Email Best Practices

Use table-based layouts

Tables are the most reliable layout method across all email clients. Gmail, Outlook Classic, and Samsung Mail don't support flexbox or grid.

<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

Gmail strips <style> blocks. 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://emailens.dev/api/preview \
  -H "Content-Type: application/json" \
  -d '{"html": "..."}'

Check the overallScore — aim for 80+ for good cross-client compatibility.