This article walks you through creating a new email design from scratch. We'll cover the design editor, common pitfalls of HTML email, and an example of a complete design.
Step-by-Step
- Navigate to Architect Panel → Email Designs and click New Design.
- Give it a name (e.g. “Transactional 2026 rebrand”) and an internal description.
- Paste your HTML into the source pane. The editor highlights syntax and warns about email-incompatible CSS (flexbox, grid, web fonts via @import).
- Use the placeholder
{{content}}to mark where the template's body will be injected. - Add merge tokens for global values like
{{site.name}},{{site.address}},{{user.firstName}},{{unsubscribeUrl}}. - Click Preview. Send yourself a test by clicking Send Test — render quirks usually show up here, not in the in-browser preview.
- Save. Templates that reference this design will pick up the new look on next send.
Email HTML Gotchas
- Use tables for layout — Outlook on Windows still uses Word's rendering engine.
- Inline CSS — Many clients strip
<style>blocks. Use the editor's “Inline styles” button to move styles intostyle=attributes. - Avoid web fonts — Most clients don't fetch them. Use system font stacks like
-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif. - Max width 600px — Anything wider gets cropped in Gmail's column view.
Example: A Minimal Transactional Design
- Header: 64px logo centered on a 1px-bottom-border line
- Content area: 32px padding, system font stack, 16px body, 1.6 line height
- CTA button: blue background, white text, 12px padding, 4px radius
- Footer: muted grey 12px text with company address and unsubscribe link
Tip: Always test new designs in Litmus or Email on Acid before going live. Outlook, dark-mode Gmail and Apple Mail can each surprise you.