Templates

These templates combine every pattern in the playbook into ready-to-customize HTML files. Each one is a single .html document — no build step, no external CSS — that passes through Litmus and Email on Acid testing against the full client matrix.

General template

A one-column starter with the complete head boilerplate, body container, header, body, and footer. Use this as the base for any custom email — paste in components from the Components section.

Download general.html

Includes: head boilerplate · MSO conditional comments · RTL-ready direction attribute · spacer-row spacing system · empty header/body/footer shells.

Transactional

A single-CTA one-column layout designed for order confirmations, password resets, email verification, receipts. Hero image at the top, headline, body paragraph, bulletproof button, footer with unsubscribe.

Download transactional.html · Preview image

Includes: hero image with alt-text fallback · live HTML headline (not image text) · bulletproof button with VML · production footer with required address + unsubscribe slots.

Newsletter

A two-column-collapse layout for marketing campaigns and newsletters. Multiple content blocks, image-text pairings, social icon row in the footer. Collapses to single column on mobile via the hybrid pattern from Responsive.

Download newsletter.html · Preview image

Includes: hero with overlaid text via VML · two-column content blocks · social icon row · mso-line-height-rule:exactly spacers throughout · dark-mode-safe color choices.

How to use them

1. Download the HTML file.
2. Replace the placeholder content — headings, paragraphs, image URLs, button links.
3. Swap the brand colors. Look for the comment markers <!-- brand color: ... --> next to color-bearing attributes; update both the inline style and any paired VML fillcolor / bgcolor.
4. Upload your images to a CDN or stable host. Replace the src="https://i.example.com/..." placeholders with your URLs (HTTPS only).
5. Test in your sending tool’s preview, then in Litmus or Email on Acid across the full client matrix.
6. Send a real test to a real Outlook desktop inbox before any production send — Litmus is accurate but nothing matches the actual client.

What’s still your job

Templates handle structure. They do not handle:

• Personalization tokens. Your sender (Mailchimp, Customer.io, Postmark, your custom SMTP setup) injects {{first_name}} or %merge_var% style tokens. Add these in the appropriate slots after downloading.
• List management and unsubscribe URLs. The footer has an unsubscribe placeholder; replace it with whatever your platform generates.
• Subject line and preheader. These are configured in your sending tool, not in the HTML. See Preheader for the in-HTML preheader text pattern.
• Sender domain auth (SPF, DKIM, DMARC). Outside the scope of this playbook — talk to your platform’s deliverability docs.

Test before you ship

Every template has been tested at the time of writing, but email clients change. Always run a final preview through the full test matrix before sending to a real list. The 5 minutes of preview saves the 5 hours of unmangling a botched campaign.

What’s next

That’s the end of the playbook. The Production section covers what to check before send — Gmail’s 102 KB clipping, dark mode behavior, preheader text, and the bulletproof button audit. Treat those four as your pre-send checklist.