HTML Email Newsletter Markup
HTML email markup is table-based HTML with inline styles, compatible with email clients from Outlook 2007 to Apple Mail. It fundamentally differs from web markup: no flexbox/grid, no CSS variables, no modern CSS positioning.
Email Markup Basics
Email structure is built using tables (<table>, <tr>, <td>). Styles are inline only (style=""), external stylesheets are not supported in most clients.
Basic structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Only media queries and reset — NOT main styles */
@media (max-width: 600px) {
.container { width: 100% !important; }
}
</style>
</head>
<body style="margin:0; padding:0; background:#f4f4f4;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<table role="presentation" class="container" width="600" cellpadding="0" cellspacing="0" style="background:#ffffff;">
<!-- Content -->
</table>
</td>
</tr>
</table>
</body>
</html>
Outlook-Specific Hacks
Outlook 2007–2021 renders via Word engine — the most problematic client. Conditional comments:
<!--[if mso]>
<table role="presentation" width="600">
<tr><td>
<![endif]-->
<div style="max-width:600px"> <!-- For other clients -->
Content
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
For VML buttons (Outlook doesn't support padding on links):
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://example.com"
style="height:44px;width:200px;" arcsize="10%" fillcolor="#2563eb">
<v:textbox inset="0,0,0,0">
<center style="color:#ffffff;font-size:16px;">Go</center>
</v:textbox></v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://example.com" style="...">Go</a>
<!--<![endif]-->
MJML as a Solution
MJML is a preprocessor that automatically generates cross-client compatible HTML. Instead of raw HTML:
<mjml>
<mj-body>
<mj-section background-color="#ffffff" padding="20px">
<mj-column>
<mj-text font-size="24px" font-weight="700" color="#1a1a2e">
Email Headline
</mj-text>
<mj-button href="https://example.com" background-color="#2563eb">
Action
</mj-button>
</mj-column>
</mj-section>
</mj-body>
</mjml>
MJML compiles to fully compatible HTML via CLI (mjml input.mjml -o output.html) or npm package.
Testing
- Litmus — screenshots in all clients (paid, ~$100/month)
- Email on Acid — Litmus alternative
- Mail Tester — spam checking
- Manual testing: sending to real Gmail, Outlook, Apple Mail, Yandex, Mail.ru accounts
Timeline
Markup of one email template (design provided, desktop + mobile): 0.5–1 business day. With testing in 10+ clients via Litmus and revisions: 1–2 days.