email-designer

Overview

Email design is web design from 1999 that somehow still runs the world: inconsistent clients, no flexbox in Outlook, images blocked by default, and dark mode inversions. Yet email drives more revenue per effort than almost any channel. This skill covers designing emails that render everywhere, get opened, and convert — from layout constraints to testing.

When to use

• Designing marketing emails, newsletters, or transactional emails

• Building email templates or design systems

• Improving open rates, click rates, or conversions

• Troubleshooting rendering issues across email clients

• Planning dark mode support for emails

Core concepts

• • • The inbox is the first design. Subject line, preheader, and sender name determine opens before the email is ever seen. Design the email backwards from the inbox: would you open this?
• • • Single column, 600px. The email standard: max-width 600px, single column, generous spacing. Multi-column layouts break on mobile (60%+ of opens) and in Outlook.
• • • Design for images-off. Many clients block images by default. The email must communicate with text alone: real HTML text (not image text), alt text on every image, background colors as fallbacks.
• • • Hierarchy for scanners. Headline, hero visual, 2-3 content blocks max, one primary CTA. Email readers scan in seconds — long newsletters need ruthless editing or clear section anchors.
• • • The CTA rules. One primary action per email, button-style (bulletproof buttons: HTML text + background color, not images), minimum 44px tall, repeated after long content. Every link should be obviously tappable.
• • • Dark mode is mandatory. Clients auto-invert or apply dark themes. Design with transparent PNGs, test both modes, use meta tags where supported — and never rely on "it'll be fine."

Practical workflow

1. 1. 1. Define the email's job. One goal per email (click, purchase, reply, read). Know the audience segment and what they already know — relevance beats design polish.
2. 2. 2. Write inbox-first. Subject line (under 50 characters, specific over clever), preheader (extends the subject, not repeats it), sender name (recognizable human or brand).
3. 3. 3. Design the layout. 600px single column: header (logo small, not dominant), headline, hero, body blocks, CTA, footer (unsubscribe prominent — hiding it creates spam complaints, which are worse). Plain-text version included.
4. 4. 4. Build bulletproof HTML. Table-based layout, inline CSS, web-safe font stacks with fallbacks, alt text everywhere, background colors behind images. Test in the big three problem clients: Outlook (Word engine), Gmail (strips <style> in some contexts), Apple Mail.
5. 5. 5. Handle dark mode. Test auto-inversions, use transparent images, consider dark-mode-specific meta styles. Check logos: a dark logo on a transparent background vanishes in dark mode — use a white stroke version or contained logo block.
6. 6. 6. Check accessibility. Semantic headings, meaningful alt text, 4.5:1 text contrast, logical reading order, no text in images for critical content, sufficient tap targets.
7. 7. 7. Test before sending. Litmus/Email on Acid or manual: top clients (Apple Mail, Gmail, Outlook), mobile + desktop, images on/off, dark/light mode. Send a live test to yourself; click every link. Check spam score basics (balanced image/text ratio, no spam trigger words in subject).

Common pitfalls

• • • Image-only emails. One big image with all the text baked in: blocked by default in many clients, unreadable, inaccessible, unclickable. Never.
• • • Tiny text. Below 14px body text on mobile is unreadable. 16px body minimum, generous line height.
• • • Hidden unsubscribe. Making it hard to leave generates spam complaints, which tank deliverability for everyone. One-click, visible unsubscribe.
• • • No plain-text version. Multipart emails need a text fallback for accessibility tools and strict clients. Auto-generated is better than none; hand-tuned is best.
• • • Broken in Outlook. Outlook's Word rendering engine ignores modern CSS. If you didn't test Outlook, you didn't test email.
• • • Subject-line clickbait. "You won't believe..." gets opens and unsubscribes. Specific, honest subjects build the long-term list health that actually drives revenue.