"
}'
```
## Email Width & Layout
Constraint
Value
Why
**Max width**
600px
Gmail, Outlook rendering standard
**Mobile width**
320-414px
Responsive fallback
**Single column**
Preferred
Better mobile rendering
**Two column**
Use sparingly
Breaks on many clients
**Image width**
600px max, 300px for 2-col
Retina: provide 2x (1200px)
**Font size (body)**
14-16px
Below 14px is hard to read on mobile
**Font size (heading)**
22-28px
Must be scannable
**Line height**
1.5
Readability on all devices
### The Inverted Pyramid Layout
The most effective email layout funnels attention to a single CTA:
```
┌──────────────────────────────────┐
│ HEADER IMAGE │ ← Brand/visual hook
│ (600 x 200-300) │
├──────────────────────────────────┤
│ │
│ Headline (one line) │ ← What's this about
│ │
│ 2-3 sentences of body copy │ ← Why should I care
│ explaining the value. │
│ │
│ ┌──────────────┐ │
│ │ CTA BUTTON │ │ ← One clear action
│ └──────────────┘ │
│ │
├──────────────────────────────────┤
│ Footer: Unsubscribe link │
└──────────────────────────────────┘
```
## Subject Lines
### Formulas That Work
Formula
Example
Open Rate Impact
Number + benefit
"5 ways to cut your build time in half"
High
Question
"Are you still deploying on Fridays?"
High
How-to
"How to automate your reports in 3 steps"
Medium-High
Urgency (genuine)
"Last day: 30% off annual plans"
High (if real)
Personalized
"[Name], your weekly report is ready"
Very High
Curiosity gap
"The one feature our users can't stop talking about"
Medium-High
### Rules
Rule
Value
**Length**
30-50 characters (mobile truncates at ~35)
**Preview text**
First 40-100 chars after subject — design this intentionally
**Emoji**
Max 1, at start or end, test with your audience
**ALL CAPS**
Never — triggers spam filters
**Spam trigger words**
Avoid: "free", "act now", "limited time", "click here" in subject
**Personalization**
[First name] in subject lifts open rates 20%+
### Preview Text
The preview text appears after the subject line in the inbox. Don't waste it.
```
❌ "View this email in your browser" (default, wasted space)
❌ "Having trouble viewing this?" (no one cares)
✅ Subject: "5 ways to cut build time"
Preview: "Number 3 saved us 6 hours per week"
✅ Subject: "Your monthly report is ready"
Preview: "Revenue up 23% — here's what drove it"
```
## Email Types
### Welcome Email (Automated, Day 0)
Element
Content
Subject
"Welcome to [Product] — here's what's next"
Header
Brand image or product screenshot
Body
3-4 sentences: what they signed up for, what to expect, one quick win
CTA
"Complete your setup" or "Try your first [action]"
Timing
Immediately after signup
### Promotional / Campaign
Element
Content
Subject
Benefit-focused, urgency if real
Header
Hero image showing the offer/outcome
Body
Problem → solution → offer → deadline
CTA
"Get 30% Off" or "Start Free Trial"
Urgency
Real deadline, not fake scarcity
### Product Update / Changelog
Element
Content
Subject
"New: [Feature name] is here"
Header
Screenshot or visual of the feature
Body
What's new, why it matters, how to use it
CTA
"Try [feature]"
### Transactional (Receipts, Confirmations)
Rule
Why
Clear purpose in subject
"Your order #1234 is confirmed"
Minimal design
Don't confuse with marketing
Key info above the fold
Order number, amount, date
No promotional content (mostly)
CAN-SPAM allows some, but keep minimal
## Header Image Design
```
# Welcome email header
infsh app run infsh/html-to-image --input '{
"html": "
Welcome to
DataFlow
Your data, automated
"
}'
# Sale / promotional header
infsh app run infsh/html-to-image --input '{
"html": "
This Weekend Only
30% OFF
All annual plans. Ends Sunday.
"
}'
# Feature announcement header with AI visual
infsh app run falai/flux-dev-lora --input '{
"prompt": "clean modern email header banner, abstract flowing data visualization, dark blue gradient background, subtle glowing nodes and connections, tech aesthetic, minimal, no text, 600x250 equivalent",
"width": 1200,
"height": 500
}'
```
## CTA Buttons
Rule
Value
**Width**
200-300px, not full width
**Height**
44-50px minimum (tap target)
**Color**
High contrast with background
**Text**
Action verb + outcome: "Start Free Trial"
**Shape**
Rounded corners (4-8px border-radius)
**Placement**
Above the fold, repeated at bottom for long emails
**Quantity**
ONE primary CTA per email
### Bulletproof Buttons
HTML buttons render differently across email clients. Use the "bulletproof button" technique (VML for Outlook, HTML/CSS for everything else):
```
```
## Mobile Optimization
Rule
Why
Single column layout
Multi-column breaks on mobile
Font minimum 14px
Smaller is unreadable
CTA button minimum 44px tall
Apple/Android tap target
Images scale to 100% width
Prevent horizontal scroll
Stack elements vertically
Side-by-side breaks on narrow screens
Test on Gmail app, Apple Mail, Outlook
The big 3 email clients
**60%+ of emails are opened on mobile.** Design mobile-first.
## Deliverability Checklist
Factor
Rule
Image-to-text ratio
Max 40% images, 60% text (spam filters flag image-heavy emails)
Alt text on images
Always — images blocked by default in many clients
Unsubscribe link
Required by law (CAN-SPAM, GDPR) — make it easy to find
From name
Recognizable person or brand name
Reply-to
Real address, not no-reply@ (hurts deliverability)
List hygiene
Remove bounces, clean inactive subscribers quarterly
SPF/DKIM/DMARC
Technical authentication — set up once, critical for inbox
## Common Mistakes
Mistake
Problem
Fix
No preview text
Shows "View in browser" or random code
Set preview text intentionally
Image-only emails
Blocked images = blank email + spam risk
60%+ text, alt text on images
Multiple CTAs
Decision paralysis, lower click rate
One primary CTA per email
Tiny text
Unreadable on mobile
Minimum 14px body, 22px headings
no-reply@ sender
Hurts deliverability, feels impersonal
Use real reply address
No mobile testing
Broken layout for 60%+ of readers
Test on Gmail app + Apple Mail
Missing unsubscribe
Illegal (CAN-SPAM) + spam complaints
Clear unsubscribe link in footer
Over-designing
Email clients render CSS inconsistently
Simple layouts, inline styles
Fake urgency
Erodes trust, trains users to ignore
Only use real deadlines
## Related Skills
```
npx skills add inference-sh/skills@landing-page-design
npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@prompt-engineering
```
Browse all apps: `infsh app list`
Weekly Installs4.4KRepository[inferen-sh/skills](https://github.com/inferen-sh/skills)GitHub Stars159First Seen6 days agoSecurity Audits[Gen Agent Trust HubPass](/inferen-sh/skills/email-design/security/agent-trust-hub)[SocketPass](/inferen-sh/skills/email-design/security/socket)[SnykWarn](/inferen-sh/skills/email-design/security/snyk)Installed onclaude-code3.5Kgemini-cli3.1Kcodex3.1Kamp3.1Kkimi-cli3.1Kgithub-copilot3.1K
---
*Source: https://skills.yangsir.net/skill/sm-email-design*
*Markdown mirror: https://skills.yangsir.net/api/skill/sm-email-design/markdown*