SKILL.md
$28
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
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:600px;height:250px;background:linear-gradient(135deg,#2d3436,#636e72);display:flex;align-items:center;padding:40px;font-family:system-ui;color:white\"><div><p style=\"font-size:14px;text-transform:uppercase;letter-spacing:2px;opacity:0.7;margin:0\">Welcome to</p><h1 style=\"font-size:42px;margin:8px 0 0;font-weight:800\">DataFlow</h1><p style=\"font-size:18px;opacity:0.8;margin-top:4px\">Your data, automated</p></div></div>"
}'
# Sale / promotional header
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:600px;height:300px;background:linear-gradient(135deg,#e74c3c,#c0392b);display:flex;align-items:center;justify-content:center;font-family:system-ui;color:white;text-align:center\"><div><p style=\"font-size:20px;opacity:0.9;margin:0\">This Weekend Only</p><h1 style=\"font-size:72px;margin:8px 0;font-weight:900\">30% OFF</h1><p style=\"font-size:18px;opacity:0.8\">All annual plans. Ends Sunday.</p></div></div>"
}'
# Feature announcement header with AI visual
belt 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):
<!-- Bulletproof button (works everywhere including Outlook) -->
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" bgcolor="#22c55e" style="border-radius:6px;">
<a href="https://yoursite.com/action" target="_blank"
style="font-size:16px;font-family:sans-serif;color:#ffffff;
text-decoration:none;padding:12px 24px;display:inline-block;
font-weight:bold;">
Start Free Trial
</a>
</td>
</tr>
</table>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-engineeringBrowse all apps: belt app store