From html-email-designer
Framework-agnostic reference for HTML email client quirks — Outlook rendering, dark mode, Gmail clipping, image blocking, preheader text, width constraints, font fallbacks. Use whenever authoring, debugging, or reviewing any HTML email regardless of framework.
npx claudepluginhub danielrosehill/claude-code-plugins --plugin html-email-designerThis skill uses the workspace's default tool permissions.
HTML email is ~2005-era HTML. Unlike the web, there is no consistent rendering target. These quirks apply regardless of whether you use Foundation, Maizzle, MJML, or raw tables.
Prevents silent decimal mismatch bugs in EVM ERC-20 tokens via runtime decimals lookup, chain-aware caching, bridged-token handling, and normalization. For DeFi bots, dashboards using Python/Web3, TypeScript/ethers, Solidity.
Share bugs, ideas, or general feedback.
HTML email is ~2005-era HTML. Unlike the web, there is no consistent rendering target. These quirks apply regardless of whether you use Foundation, Maizzle, MJML, or raw tables.
<table> — not divs, not flex, not grid. Frameworks hide this but the output is always tables.The most fragile target. Uses Word's rendering engine (not a browser).
<p> or <div> — use table cell padding or spacer rows instead.<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:300px;">
<v:fill type="tile" src="https://.../bg.jpg" color="#000000" />
<v:textbox inset="0,0,0,0"><div>
<![endif]-->
<!-- content -->
<!--[if mso]></div></v:textbox></v:rect><![endif]-->
mso-line-height-rule: exactly to avoid extra spacing.<style> from the <head> on some clients (mobile) — always inline critical CSS.class attributes in some paths — rely on inlined styles, not classes.<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
@media (prefers-color-scheme: dark) blocks.<meta name="format-detection" content="telephone=no">.Three approaches, pick one:
@media (prefers-color-scheme: dark) with dark-specific styles. Works in Apple Mail, Outlook.com, some others; ignored elsewhere (which falls back to #1).Arial, Helvetica, sans-serif / Georgia, 'Times New Roman', serif.<link> in <head> and @import — works in Apple Mail, iOS, some Android. Outlook ignores, falls back. Always specify a fallback.alt — 40%+ of users have images blocked by default.width and height as HTML attributes (not just CSS).src — relative paths won't work once sent.The snippet of text shown next to the subject line in the inbox. Set it explicitly:
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;">
Your preheader text here — keep under 90 chars
</div>
Without this, clients grab the first visible text, which is usually "View this email in your browser" — wasted real estate.
href="https://..." (not href="/page").text-decoration: none, so design for underlined links.target="_blank" guaranteed — clients ignore it.<form>, no <input>, no <button> submit behavior — stripped or inert.lang="en" on <html>.role="presentation" on layout tables: <table role="presentation" ...>.<h1> → <h2> etc.).alt + explicit width/height