Why Email HTML Is Different
| Web browser | Email client |
|---|---|
| External CSS files work | External CSS stripped — use inline CSS only |
| Flexbox and Grid work | Flexbox and Grid poorly supported — use tables |
| Background images work everywhere | Outlook ignores CSS background-image |
| Web fonts work | Limited support — always include system font fallbacks |
| JavaScript works | JavaScript completely blocked in all email clients |
| Responsive CSS works | Media queries work in some clients but not Outlook |
The email client compatibility challenge
Outlook (used by millions of corporate users) renders HTML using Microsoft Word's rendering engine — not a web engine. This means many modern CSS properties simply don't work. Gmail strips <style> tags in some contexts. Testing in Litmus or Email on Acid is standard industry practice for professional email development.
Email Template Structure
We build a "Welcome to ylearner" onboarding email with these sections:
- Outer wrapper (background colour, centres everything)
- Container table (max-width 600px)
- Header row — brand colour background, logo/name
- Body row — personalised greeting, what to do next, feature highlights
- CTA button row — primary action
- Footer row — unsubscribe link, company address
Ad – 336×280
Complete Email Template
HTML – Full email template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Welcome to ylearner!</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
</head>
<body style="margin:0; padding:0; background-color:#f4f4f4; font-family:Arial, Helvetica, sans-serif;">
<!-- Outer wrapper table — fills email client window -->
<table width="100%" cellpadding="0" cellspacing="0" border="0"
style="background-color:#f4f4f4; padding:20px 0;">
<tr>
<td align="center">
<!-- Container table — max 600px, the email body -->
<table width="600" cellpadding="0" cellspacing="0" border="0"
style="max-width:600px; width:100%; background-color:#ffffff;
border-radius:8px; overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.08);">
<!-- ======= HEADER ======= -->
<tr>
<td align="center"
style="background-color:#E44D26; padding:30px 40px;">
<h1 style="margin:0; color:#ffffff; font-size:28px;
font-weight:700; letter-spacing:-0.5px;">
ylearner
</h1>
<p style="margin:6px 0 0; color:rgba(255,255,255,0.85);
font-size:14px;">
Learn to code for free
</p>
</td>
</tr>
<!-- ======= GREETING ======= -->
<tr>
<td style="padding:40px 40px 20px;">
<h2 style="margin:0 0 12px; color:#1e293b; font-size:22px;">
Welcome, Jane! 🎉
</h2>
<p style="margin:0; color:#475569; font-size:16px;
line-height:1.6;">
Your ylearner account is ready. You now have free access to
<strong>180+ lessons</strong> across Python, JavaScript, HTML,
and OWL JS — with more added every week.
</p>
</td>
</tr>
<!-- ======= FEATURE LIST ======= -->
<tr>
<td style="padding:0 40px 30px;">
<p style="margin:0 0 16px; color:#1e293b; font-size:16px;
font-weight:600;">
Here's what to do next:
</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding:8px 0; color:#475569; font-size:15px;">
✓ Pick your first course below
</td>
</tr>
<tr>
<td style="padding:8px 0; color:#475569; font-size:15px;">
✓ Read the first lesson — takes under 10 minutes
</td>
</tr>
<tr>
<td style="padding:8px 0; color:#475569; font-size:15px;">
✓ Code along with every example
</td>
</tr>
<tr>
<td style="padding:8px 0; color:#475569; font-size:15px;">
✓ Build real projects to grow your portfolio
</td>
</tr>
</table>
</td>
</tr>
<!-- ======= CTA BUTTON ======= -->
<tr>
<td align="center" style="padding:0 40px 40px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
href="https://ylearner.org"
style="height:50px; width:220px; v-text-anchor:middle;"
arcsize="10%" fillcolor="#E44D26" strokecolor="#E44D26">
<w:anchorlock/>
<center style="color:#ffffff; font-family:Arial; font-size:16px;
font-weight:700;">
Start Learning Now →
</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://ylearner.org"
style="display:inline-block; background-color:#E44D26;
color:#ffffff; font-size:16px; font-weight:700;
text-decoration:none; padding:14px 36px;
border-radius:6px; font-family:Arial, sans-serif;">
Start Learning Now →
</a>
<!--<![endif]-->
</td>
</tr>
<!-- ======= DIVIDER ======= -->
<tr>
<td style="padding:0 40px;">
<hr style="border:none; border-top:1px solid #e2e8f0; margin:0;">
</td>
</tr>
<!-- ======= COURSES ROW ======= -->
<tr>
<td style="padding:30px 40px;">
<p style="margin:0 0 16px; color:#1e293b; font-size:15px;
font-weight:600;">Available courses:</p>
<table width="100%" cellpadding="0" cellspacing="8" border="0">
<tr>
<td width="50%" style="background:#fff7ed; border-radius:6px;
padding:14px; text-align:center;">
<span style="font-size:24px;">🌐</span><br>
<strong style="color:#E44D26;">HTML</strong><br>
<span style="font-size:12px; color:#64748b;">Foundation of web</span>
</td>
<td width="50%" style="background:#fefce8; border-radius:6px;
padding:14px; text-align:center;">
<span style="font-size:24px;">⚡</span><br>
<strong style="color:#ca8a04;">JavaScript</strong><br>
<span style="font-size:12px; color:#64748b;">Language of the web</span>
</td>
</tr>
<tr>
<td width="50%" style="background:#f0fdf4; border-radius:6px;
padding:14px; text-align:center;">
<span style="font-size:24px;">🐍</span><br>
<strong style="color:#16a34a;">Python</strong><br>
<span style="font-size:12px; color:#64748b;">AI, data, automation</span>
</td>
<td width="50%" style="background:#faf5ff; border-radius:6px;
padding:14px; text-align:center;">
<span style="font-size:24px;">🦉</span><br>
<strong style="color:#714B67;">OWL JS</strong><br>
<span style="font-size:12px; color:#64748b;">Odoo development</span>
</td>
</tr>
</table>
</td>
</tr>
<!-- ======= FOOTER ======= -->
<tr>
<td align="center"
style="background-color:#f8fafc; padding:24px 40px;
border-top:1px solid #e2e8f0;">
<p style="margin:0 0 8px; color:#94a3b8; font-size:12px;">
© 2026 ylearner — Algorid Limited
</p>
<p style="margin:0; color:#94a3b8; font-size:12px;">
You received this because you created an account at ylearner.org.<br>
<a href="https://ylearner.org/unsubscribe?email=jane@example.com"
style="color:#E44D26; text-decoration:underline;">
Unsubscribe
</a>
·
<a href="https://ylearner.org/privacy-policy.html"
style="color:#E44D26; text-decoration:underline;">
Privacy Policy
</a>
</p>
</td>
</tr>
</table>
<!-- End container table -->
</td>
</tr>
</table>
<!-- End outer wrapper -->
</body>
</html>Key Techniques Explained
| Technique | Why needed |
|---|---|
| Outer wrapper table at 100% width | Fills the email client window and centres the 600px container |
| Inner container at max 600px | Standard email width — renders well on desktop and mobile |
| All CSS inline on each element | Gmail and some clients strip <style> blocks |
| VML button for Outlook | Outlook ignores CSS on <a> — VML vector shapes render correctly |
Conditional comments <!--[if mso]--> | Targets Outlook specifically for VML fallbacks |
| Arial/Helvetica font stack | System fonts guaranteed to work in every email client |
| cellpadding="0" cellspacing="0" | Removes default table spacing that breaks pixel-perfect layouts |
HTML entities (©, —) | Special characters rendered consistently across clients |
Test your emails before sending
Litmus (litmus.com) and Email on Acid let you preview your email template across 100+ email clients and devices before sending. Many professional email tools (Mailchimp, Klaviyo, Campaign Monitor) also have built-in preview tools. Never send an email campaign without testing in at least Gmail, Apple Mail, and Outlook.
📋 Summary
- HTML emails require table-based layout — Flexbox/Grid are not reliable in email clients.
- All CSS must be inline — external stylesheets and
<style>blocks are stripped by some clients. - Use a 600px maximum width container — the standard safe width for email.
- Outlook requires VML for styled buttons — use conditional comments to target it.
- Always include system font fallbacks (Arial, Helvetica) — web fonts don't load reliably in email.
- Add
<!DOCTYPE html>,charset, and theX-UA-Compatiblemeta for Outlook. - Test in real email clients before sending — use Litmus or Email on Acid.
FAQ
Can I use CSS Grid or Flexbox in emails? +
No — not reliably. Outlook (which uses the Word rendering engine) does not support Flexbox or Grid. For cross-client compatibility you must use HTML tables for layout. Some modern email clients (Apple Mail, Gmail in browser) do support Flexbox and Grid, but since Outlook is used by a large portion of business users, tables remain the safe choice.
What width should email templates be? +
600px is the industry standard. It fits comfortably on desktop email clients without horizontal scrolling, and scales down on mobile. Some modern templates use 680px. Never go above 700px — wide templates look broken on many desktop clients.
Why use VML for Outlook buttons? +
Outlook ignores background-color, padding, and border-radius on <a> tags — making CSS-styled buttons display as plain text links. VML (Vector Markup Language) is a Microsoft format supported by the Word rendering engine in Outlook. By wrapping a VML shape in Outlook conditional comments, you get a proper styled button in Outlook while other clients see the normal CSS button.