What ESP-safe HTML email means

A web page renders in a browser. An email renders in dozens of clients that each parse HTML their own way, and the worst offender is still the Outlook desktop client on Windows. It uses Microsoft Word's engine to lay out email, which means float, flexbox, grid, and most positioning are ignored or break. Gmail strips out a lot of what you put in the head. Several webmail clients rewrite or drop your style block. Apple Mail is forgiving, Outlook on Windows is not, and you have to build for the strict one.

ESP-safe means the HTML survives all of this. You write to the lowest common denominator on purpose so the email looks the same whether someone opens it in Gmail on their phone, Apple Mail on a Mac, or Outlook 2016 on a work laptop. The trade is real: you give up modern CSS layout and write code that looks ten years old, because that older code is what every client agrees on.

Layout in ESP-safe email is built from nested tables, not divs. A table cell is the one container every client positions reliably, so a row of content is a table row, and a two-column section is two cells side by side. You set role="presentation" on layout tables so screen readers skip them, and you control spacing with cellpadding, cellspacing, and padding on cells rather than margins, since Outlook handles cell padding predictably and margins less so.

The outer content table is usually capped at 600 pixels wide. That number is a convention, not a law, but it is the safe one: 600px fits the Outlook reading pane without a horizontal scrollbar and scales down cleanly on a phone. Go much wider and Outlook clips it. The pattern is a full-width outer table for the background color and a centered 600px inner table for the actual content.

In ESP-safe email, the styling lives on the element. Instead of a class in a style block, you write style="font-family:Arial,sans-serif;font-size:16px;color:#222222;" directly on the cell or paragraph. The reason is blunt: Gmail and several clients strip or ignore the style block in the head, so any rule that lives only there can vanish. Inline styles ride along with the element and survive. You can still keep a style block for media queries and dark mode tweaks, but the core look has to work with that block removed.

Fonts follow the same caution. Custom web fonts fail to load in Outlook on Windows and a few other clients, so they fall back to whatever the client picks, which you do not control. ESP-safe email uses a web-safe stack with a fallback that you do control, like font-family:Arial,Helvetica,sans-serif or Georgia,'Times New Roman',serif. If you do use a brand web font, you treat it as progressive enhancement and make sure the fallback still reads on brand.

A button is the most clicked thing in the email, so it cannot depend on an image or a CSS-styled link. An image button disappears when a client blocks images, and a styled anchor loses its background in Outlook. The bulletproof pattern is a single-cell table with a background color, padding for the tap area, and a border-radius, with the link text as live text inside. The whole cell is wrapped in the link so the click target is large. For Outlook specifically, many teams add a VML fallback in a conditional comment so the rounded shape still fills, since older Outlook ignores border-radius.

Dark mode is the newer requirement. Apple Mail and some clients invert or shift your colors, which can turn a dark logo on a light background into a dark logo on a dark background that vanishes. ESP-safe email handles this by avoiding pure black and pure white, giving logos a small light background plate so they survive inversion, and testing the email in a dark inbox before it ships. Mailwright produces this kind of HTML by default: table-based, fully inline, 600px, with bulletproof buttons and dark mode handled, so the email you paste into Klaviyo or Mailchimp renders the same way you previewed it.