49-html-email-template-global

Use table-based layout only, since Outlook on Windows renders through the Word engine and ignores flexbox, grid, float, and absolute positioning. Inline all CSS, use solid background colors instead of images, and accept square corners because border-radius is not drawn.

Use a 600px maximum container width that degrades to 100% on mobile, with a media query breakpoint at 480px. Body font should be 16px on desktop and at least 15px on mobile, with CTA buttons at least 44px tall for touch targets.

Gmail applies its own color inversion and ignores the prefers-color-scheme media query, so dark mode cannot be fully controlled there. Use transparent-background PNG logos that read on both grounds, avoid pure black text on transparent backgrounds, and give key blocks like the CTA a solid background color.

Klaviyo uses {{ first_name|default:"there" }} for first names and {% unsubscribe %} for opt-outs, while Mailchimp uses *|FNAME|* and *|UNSUB|*. Always confirm the exact syntax in the sending platform, since an unrendered merge tag in a live send is a visible error.

Gmail clips messages larger than roughly 102KB, hiding content behind a 'view entire message' link. Keep the final self-contained HTML file under 100KB by inlining only necessary CSS and avoiding redundant markup.

This Skill covers email code only, not sequence strategy, subject lines, or copy, which belong to email marketing planning. It is also not suited for web pages, which should use a landing page workflow instead of table-based email HTML.