Developing Email Newsletter Design
Email design is a separate discipline with strict limitations: Outlook 2016–2021 renders tables via Word engine, Gmail crops emails heavier than 102 KB, Apple Mail supports prefers-color-scheme for dark mode while others don't.
Email Structure
Standard marketing email structure:
-
Preheader — hidden text (1–2 lines), displayed in preview next to subject in email client. Set via
<span style="display:none">. - Header — logo, navigation bar (no more than 3–4 links).
- Hero block — main visual with CTA. Single button, one call to action.
- Content blocks — 1–3 topical sections. Maximum container width: 600px.
- Footer — legal address, unsubscribe link (mandatory by GDPR and CAN-SPAM), social media links.
Markup Limitations
CSS is partially supported. Safe properties: font-family, font-size, color, background-color, padding, margin, border, width. Don't work in most clients: flexbox, grid, position: absolute, transform, CSS variables.
Fonts: system stacks only or Google Fonts with fallback. Arial, Helvetica, Georgia, Times New Roman render reliably everywhere.
Dark Theme
Apple Mail and some Outlook versions support prefers-color-scheme. To control dark theme:
@media (prefers-color-scheme: dark) {
.email-bg { background-color: #1a1a2e !important; }
.email-text { color: #e0e0e0 !important; }
}
Without these rules, the client may auto-invert colors, breaking the design.
Image Formats
PNG for logos and illustrations with transparency. JPEG for photos (optimize via imageoptim or squoosh). Maximum email weight before image decoding — 100 KB. Always serve images via CDN, no base64 inline.
Timeline
Email template design in Figma (1 email type, desktop + mobile preview): 1–2 business days.