Building Beautiful Transactional Email Templates
Table-based layouts, template types, and testing habits that survive Gmail, Outlook, and dark mode.
Building Beautiful Transactional Email Templates
Transactional templates have one job: get a clear message through broken email clients. Fancy layouts lose to tables, inline CSS, and ruthless testing.
Constraints you cannot ignore
Most clients strip or rewrite CSS. Flexbox and grid fail often. Background images vanish. Dark mode recolors text you thought was fine.
Build like it is 2012 HTML tables, then layer progressive enhancement.
Layout pattern that survives
Use a single-column table wrapper around 600px wide. Put the logo, body copy, and CTA in stacked rows. Keep padding generous. Buttons should be large enough for thumbs.
Inline critical CSS on elements. Prefer style= attributes over remote stylesheets.
Always include a plain-text alternative for clients that ignore HTML.
Template types worth standardizing
- Welcome / verify email
- Password reset with a short-lived link
- Receipt / invoice summary
- Shipping or status update
- Security alert (new login, password changed)
Keep copy short. One primary action per email. Put the link early. Repeat it at the bottom.
Example skeleton
<!DOCTYPE html>
<html>
<body style="margin:0;padding:0;background:#f4f4f4;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding:24px;">
<table role="presentation" width="600" cellspacing="0" cellpadding="0" style="background:#ffffff;border-radius:8px;">
<tr>
<td style="padding:32px;font-family:Arial,sans-serif;font-size:16px;line-height:1.5;color:#222;">
<p style="margin:0 0 16px;">Hi {{first_name}},</p>
<p style="margin:0 0 24px;">Reset your password using the button below. The link expires in 30 minutes.</p>
<a href="{{reset_url}}" style="display:inline-block;padding:12px 20px;background:#20be72;color:#fff;text-decoration:none;border-radius:6px;">Reset password</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Testing before production
Send to Gmail, Outlook, Apple Mail, and at least one mobile client. Check dark mode. Click every link. Confirm the plain-text part is readable.
If you use OnePush templates, send a test to yourself through POST /v1/send before wiring the template into a live flow. Catch broken variables early.
Common mistakes
- Relying on web fonts that never load
- CTA buttons built only with CSS (use a linked table cell or padded anchor)
- Tiny footer links for the only password-reset URL
- Marketing-style stock imagery on auth mail