Headers and footers are the frame of your email. They orient readers and provide essential navigation and legal information, but they can also distract from the message if overloaded. Here’s how to design headers and footers that support your goals without stealing attention from the main content.
1) Headers: keep it light
Use a compact header with your logo and, if needed, a single utility link (e.g., “View online”). Avoid full nav menus, which often underperform in email and push the content down. Keep the brand recognizable but minimal.
2) Footers: trust and compliance
Footers should include a clear unsubscribe link, a mailing address (where required), and simple, readable legal language. You can add one or two low-priority links (docs, help center), but avoid dense link farms.
3) Visual hierarchy
Use scale and spacing to ensure the body content remains the focal point. The footer should feel understated, not like a second homepage. Maintain sufficient contrast and legible text sizes throughout.
4) Accessibility and dark mode
Test header and footer readability in dark mode and with images off. Provide alt text for logos and ensure links are keyboard and screen-reader friendly in webmail clients.
Checklist
- Compact header with minimal links
- Readable footer with unsubscribe and address
- High contrast, accessible sizes
- Dark mode and images-off tested
Key takeaway
Headers and footers should support, not distract. Keep them clean, compliant, and readable so your content and CTA shine.
Legal and branding notes
Use short, plain-language legal copy and a single canonical address where required. Keep the logo legible in light and dark modes; provide alt text for brand recognition when images are off.
Examples
- Header: small logo (alt: brand), optional “View online.”
- Footer: unsubscribe, address, 1–2 utility links (Help, Docs).
- Avoid: full nav menus and dense link clusters.
QA checklist
- Readable at 320px width
- Contrast OK in dark mode
- Unsubscribe link obvious and functional
- Images-off still communicates identity and actions
Branding guidance
Use a single, consistent logo placement and size across templates so recognition becomes automatic. If you need to introduce product sub‑brands, include a small lockup or text label rather than a second logo to avoid visual noise. Keep color usage minimal in the frame so the body content remains the focal point.
Internationalization
Plan for longer localized strings, right‑to‑left languages, and regional legal copy. Keep the header and footer containers flexible and whitespace generous to accommodate variation without breaking layout.
Legal compliance checklist
- Clear and functioning unsubscribe link (no dark patterns)
- Physical mailing address where required
- Concise privacy link and contact method
- Sender identity consistent with From/reply‑to
Footer microcopy examples
Unsubscribe: “Unsubscribe or manage preferences.”
Reason: “You’re receiving this because you use {{product}} or subscribed on our site.”
Do / Don’t
- Do: keep the frame light so content leads.
- Do: ensure keyboard/screen‑reader access in webmail.
- Don’t: add full navigation or multiple logos.
- Don’t: bury unsubscribe deep in small text.
Case note
Replacing a complex header (logo plus several links) with a compact version can make the primary CTA easier to find and reduce unnecessary mobile scrolling. Measure the effect with a controlled test against your own audience.
