Your app needs a welcome email. You want it to look professional, render correctly everywhere, not trigger spam filters, and have a working CTA button. You don't want to import a 200KB template from Mailchimp.
Here's a minimal, production-ready template that works across the six major email clients.
The 80/20 of Welcome Emails
A welcome email needs exactly five things:
- Subject line — "Welcome to [App]" or "Your [App] account is ready." Keep it under 50 characters.
- Preheader text — The preview text shown after the subject in inbox listings. 40-90 characters. Make it complement, not repeat, the subject.
- Single primary CTA — One button. "Go to Dashboard" or "Verify Email." Not three buttons competing for attention.
- Plain-text fallback — Some recipients and corporate filters strip HTML. Include a plain-text version with the CTA link as a raw URL.
- Dark mode support — Gmail, Apple Mail, and Outlook.com all have dark mode. Your email shouldn't become unreadable.
The Complete HTML Template
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Welcome to YourApp</title>
<style>
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
.email-bg { background-color: #1a1a1a !important; }
.email-card { background-color: #2d2d2d !important; }
.text-primary { color: #f0f0f0 !important; }
.text-secondary { color: #a0a0a0 !important; }
}
</style>
</head>
<body style="margin:0;padding:0;background:#f4f1e9;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;">
<!-- Preheader (hidden preview text) -->
<div style="display:none;max-height:0;overflow:hidden;">
Your account is ready. Start testing emails in under a minute.
‌ ‌ ‌ ‌
</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="email-bg"
style="background:#f4f1e9;">
<tr>
<td align="center" style="padding:40px 16px;">
<table role="presentation" width="560" cellpadding="0" cellspacing="0"
class="email-card" style="background:#ffffff;border-radius:8px;
border:1px solid #e8e4da;max-width:560px;width:100%;">
<!-- Logo -->
<tr>
<td style="padding:32px 40px 0;">
<img src="https://mailhog.site/logo.png" alt="YourApp"
width="120" style="display:block;" />
</td>
</tr>
<!-- Heading -->
<tr>
<td class="text-primary"
style="padding:24px 40px 8px;font-size:24px;font-weight:600;
color:#1a1a1a;line-height:1.3;">
Welcome aboard
</td>
</tr>
<!-- Body -->
<tr>
<td class="text-secondary"
style="padding:0 40px 24px;font-size:15px;color:#555;
line-height:1.65;">
Your account is ready. You can start capturing and
inspecting test emails right away.
</td>
</tr>
<!-- CTA Button (bulletproof) -->
<tr>
<td style="padding:0 40px 32px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
href="https://yourapp.com/dashboard"
style="height:44px;width:200px;v-text-anchor:middle;"
arcsize="14%" fillcolor="#a8330f" stroke="false">
<center style="color:#fff;font-size:14px;font-weight:600;">
Go to Dashboard
</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://yourapp.com/dashboard"
style="display:inline-block;background:#a8330f;color:#fff;
padding:12px 28px;border-radius:6px;font-size:14px;
font-weight:600;text-decoration:none;line-height:1;">
Go to Dashboard
</a>
<!--<![endif]-->
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:20px 40px;border-top:1px solid #e8e4da;
font-size:12px;color:#999;line-height:1.5;">
You received this because you signed up for YourApp.
<br>123 Main St, Your City, ST 12345
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>The Bulletproof Button
The CTA button uses a pattern called the "bulletproof button" — it combines VML markup for Outlook with a standard HTML anchor for everything else. The <!--[if mso]> conditional comment targets Microsoft Office-based Outlook, which ignores CSS border-radius and padding on anchors. The VML <v:roundrect> renders a styled button that Outlook actually respects.
Dark Mode Handling
Three things to know about dark mode in email:
- Apple Mail and Outlook.com respect
@media (prefers-color-scheme: dark). Use it to override background and text colors. - Gmail doesn't support
prefers-color-schemein email. Instead, it auto-inverts colors — light backgrounds become dark, dark text becomes light. The results are unpredictable. - Outlook desktop ignores dark mode entirely in email rendering.
The safest approach: test with prefers-color-scheme for clients that support it, and ensure your email is still readable when Gmail auto-inverts by avoiding pure white (#fff) backgrounds — use slightly off-white (#f4f1e9) instead.
Subject Line and Preheader Limits
| Client | Subject Visible | Preheader Visible |
|---|---|---|
| Gmail (desktop) | ~70 chars | ~90 chars |
| Gmail (mobile) | ~40 chars | ~75 chars |
| Apple Mail | ~55 chars | ~80 chars |
| Outlook | ~60 chars | ~50 chars |
| Yahoo | ~45 chars | ~100 chars |
Keep subjects under 45 characters and preheaders under 50 characters to be safe across all clients.
Verify Before Shipping
Send this template through your development SMTP config pointed at MailHog.site. Use the HTML compatibility checker to scan for client-specific issues, and review the spam score to make sure your template doesn't trigger content filters.
For a deeper walkthrough of Outlook-specific issues, see Outlook Breaks Your Emails: 7 CSS Features You Cannot Use.
FAQ
Can I use CSS-only buttons instead of the VML bulletproof pattern?
For Gmail, Apple Mail, and Yahoo — yes, a styled <a> tag works fine. But Outlook desktop strips padding and border-radius from anchors, so the button collapses to plain blue text. The VML pattern is the only way to get a styled button in Outlook desktop.
Do I need a plain-text version?
Yes. Some email clients (particularly in corporate environments) render plain-text only by default. Most email APIs let you send both HTML and plain-text in the same message. Include the core content and CTA link as a raw URL in the plain-text version.
How do I test dark mode rendering?
Send the email to your own inbox using each client in dark mode. For automated checking, use MailHog's HTML preview tool to catch the most common issues. Gmail's auto-inversion is unpredictable, so manual spot-checking is still recommended for Gmail specifically.