title: Email design (transactional + marketing) applies_to: [email, transactional, marketing-email, html-email] version: 1.0.0 last_updated: 2026-05 stability: stable
Email design¶
Email is a constrained design medium. HTML email rendering is stuck in 2005 for a meaningful percentage of clients. Designs that work on web break in Outlook. This file covers what actually works.
Two archetypes¶
| Type | Use | Examples |
|---|---|---|
| Transactional | Triggered by user action | Receipt, password reset, "order shipped", "verified" |
| Marketing | Broadcast, opt-in | Newsletter, promo, product updates, re-engagement |
Different rules for each. Transactional is functional + minimal; marketing is brand-led + rich.
HTML email constraints (the painful reality)¶
Email clients render HTML wildly differently:
| Capability | Universal | Most | Some | Outlook (desktop) |
|---|---|---|---|---|
| Tables | ✓ | ✓ | ✓ | ✓ (must use for layout!) |
| Inline CSS | ✓ | ✓ | ✓ | ✓ (must inline; |