Klaviyo production
Why Klaviyo emails break in Outlook and Gmail — and how to avoid it
A template that looks perfect in a browser preview can arrive broken in an inbox. Email clients don't render HTML the way browsers do — the two worst offenders are Outlook on Windows (it uses Word's rendering engine, not a browser engine) and Gmail (which strips a chunk of CSS it doesn't trust). A template built the way both of those clients expect avoids most of the surprises.
Tables, not flexbox or grid
Outlook's Word engine has no meaningful support for modern CSS layout. A table-based layout has been the reliable baseline for email for two decades because Word renders `<table>` predictably. Every template we generate is table-based for exactly this reason — not because it's old-fashioned, but because it's what actually survives.
A fixed-width MSO wrapper
Outlook ignores a fluid, percentage-based width and will happily render your email far too wide or too narrow. The fix is a conditional MSO comment wrapping the content in a fixed-width table that only Outlook sees — every other client ignores it and uses the regular, responsive markup underneath.
Block-level images, not CSS backgrounds
Background images are unreliable across clients — several versions of Outlook don't render them at all. A plain, block-level `<img>` inside a table cell is the dependable option, which is why every slice exports as an actual image element rather than a CSS background.
One mobile media query, kept simple
Most email clients support a basic `@media` query even where they support little else, which is enough to stack columns and let a fixed-width shell go fluid under a set breakpoint. It doesn't need to be more elaborate than that — the failure mode we've actually seen isn't a missing feature, it's an outer table shell that never got a rule making it fluid at all, cropping the design on a phone regardless of what the inner columns do.
No web fonts, no JavaScript
Custom web fonts fail silently in a large share of email clients, and JavaScript is stripped everywhere for security. A safe system-font stack and zero script tags mean there's nothing that can quietly not load.
This is what "Klaviyo template" means when Email Slicer creates one: a plain table layout with these exact patterns, not a stripped-down convenience version.