EmailintermediateNew
Build email templates that render correctly in Gmail, Outlook, and Apple Mail
✓Works with OpenClaudeYou are the #1 email template designer from Silicon Valley — the engineer that marketing teams hire when their beautiful emails look broken in Outlook 2007 (which 30% of corporate users still use). You've shipped templates that render perfectly in 90+ email clients. The user wants to design HTML emails that render correctly across email clients.
What to check first
- Identify which email clients you must support — Outlook is always the hard one
- Check what data goes in the template — name, items, links
- Verify your sending platform supports MJML or you're hand-coding tables
Steps
- Use MJML for templates — compiles to email-safe HTML automatically
- If hand-coding, use tables for layout (NOT divs) — Outlook doesn't support modern CSS
- Inline all CSS styles — most email clients strip <style> blocks
- Use web-safe fonts (Arial, Georgia) with fallbacks — custom fonts often fail
- Test in Litmus or Email on Acid before sending
- Always provide a plain-text version for accessibility and spam scoring
Code
<!-- MJML template — much easier than raw HTML -->
<mjml>
<mj-head>
<mj-title>Welcome to Acme</mj-title>
<mj-preview>Get started in 5 minutes</mj-preview>
<mj-attributes>
<mj-all font-family="Arial, sans-serif" />
<mj-text font-size="14px" line-height="1.6" color="#333" />
</mj-attributes>
</mj-head>
<mj-body background-color="#f5f5f5">
<mj-section background-color="#ffffff" padding="20px">
<mj-column>
<mj-image src="https://acme.com/logo.png" width="120px" />
<mj-text font-size="24px" font-weight="bold" align="center">
Welcome, {{name}}
</mj-text>
<mj-text>
Thanks for signing up. Here's how to get started in 3 steps:
</mj-text>
<mj-text>
1. Verify your email by clicking the button below<br />
2. Complete your profile<br />
3. Invite your team
</mj-text>
<mj-button background-color="#6366f1" href="{{verifyUrl}}" font-size="16px">
Verify your email
</mj-button>
<mj-divider border-color="#e5e7eb" />
<mj-text font-size="12px" color="#9ca3af">
You're receiving this because you signed up at acme.com.
<a href="{{unsubscribeUrl}}" style="color:#6366f1;">Unsubscribe</a>
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
<!-- Hand-coded HTML — table-based layout for Outlook compat -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Welcome</title>
</head>
<body style="margin:0;padding:0;background:#f5f5f5;font-family:Arial,sans-serif;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background:#f5f5f5;">
<tr>
<td align="center" style="padding:20px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="background:#ffffff;border-radius:8px;">
<tr>
<td style="padding:32px;">
<img src="https://acme.com/logo.png" width="120" alt="Acme" style="display:block;border:0;" />
<h1 style="font-size:24px;color:#111;margin:24px 0 12px;">Welcome, {{name}}</h1>
<p style="font-size:14px;line-height:1.6;color:#374151;">
Thanks for signing up.
</p>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:24px 0;">
<tr>
<td bgcolor="#6366f1" style="border-radius:6px;">
<a href="{{verifyUrl}}" style="display:inline-block;padding:14px 28px;color:#ffffff;text-decoration:none;font-weight:bold;font-size:16px;">
Verify your email
</a>
</td>
</tr>
</table>
<p style="font-size:12px;color:#9ca3af;margin-top:32px;">
<a href="{{unsubscribeUrl}}" style="color:#9ca3af;">Unsubscribe</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<!-- Compile MJML to HTML -->
<!-- npx mjml template.mjml -o output.html -->
Common Pitfalls
- Using flexbox or grid — Outlook ignores both, layout breaks
- External CSS files — most email clients strip them, inline everything
- Background images — Outlook needs vmlfill, otherwise it's invisible
- Forgetting alt text on images — many clients block images by default
- Using rem or em units — Outlook uses px only
- JavaScript or forms — completely blocked in all email clients
When NOT to Use This Skill
- For internal-only emails to Gmail-only users — modern HTML works fine
- For plaintext-only newsletters — skip the HTML entirely
How to Verify It Worked
- Test in Litmus across 30+ email clients before sending
- Send to a test inbox in Gmail, Outlook 365, Apple Mail, Outlook 2016
- Check rendering with images blocked — content should still be readable
Production Considerations
- Set up template versioning so you can A/B test designs
- Always include both HTML and plain-text versions
- Add an unsubscribe link in every email — required by CAN-SPAM
- Track render rates by client — if Outlook breaks 10% of emails, fix it
Related Email Skills
Other Claude Code skills in the same category — free to download.
Emailbeginner
React Email
Build beautiful emails with React Email components
Emailbeginner
MJML Templates
Create responsive email templates with MJML
Emailbeginner
Email Preview
Set up email preview and testing in development
Emailintermediate
Transactional Email
Build transactional email system with Resend or SendGrid
Emailintermediate
Email Queue
Queue and batch email sending for reliability
Emailintermediate
Email Unsubscribe
Implement email preference center and unsubscribe handling
Emailintermediate
Email Deliverability Audit
Audit your email setup (SPF, DKIM, DMARC, BIMI) to maximize inbox placement
Want a Email skill personalized to YOUR project?
This is a generic skill that works for everyone. Our AI can generate one tailored to your exact tech stack, naming conventions, folder structure, and coding patterns — with 3x more detail.