This HTML email checklist covers the three clients that cause most of the trouble: Outlook, Gmail and Apple Mail. Most of the damage happens in classic Outlook on Windows, which still lays emails out using Word. Gmail clips long files. Apple Mail will show almost anything, which is exactly why a layout can get signed off there and still fall apart in classic Outlook.
Keep the column near 600px
Use one column, about 600 pixels wide, inside a table. Set the width on the table and again on the cells, because classic Outlook ignores a CSS max-width when there's no width attribute.
Flexbox and grid don't survive Word's renderer. The new Outlook for Windows behaves more like a browser, and Outlook for Mac already does. But plenty of company inboxes are still on the old app, so build for that one. Do you still need Outlook fallbacks after Outlook 2021 end of support? covers why.
A full-width band is fine as long as the words stay inside the 600px column. Two text columns are where things go wrong: they either stack badly or don't stack at all.
Assume the images are off
Classic Outlook hides images until the reader turns them on, and some company email gateways do the same. If your offer only lives in a banner, the email turns up as an empty box.
Write the offer as text. Give each image alt text that says what it's doing, such as "30% off through Sunday", rather than the filename. Host images at a public https URL, because a relative path won't resolve in an inbox.
Build the button as a table cell
A link with padding and a background colour looks fine in Apple Mail and in a browser. Classic Outlook often drops that padding, so the button shrinks to the size of the words and the background goes with it.
Put the link inside a table cell instead. Set the cell's background with a bgcolor attribute and put the padding on the cell. Keep the label short: "Shop the drop" is a button, "Click here" isn't.
MJML compiles its buttons into exactly this kind of table. If you're writing HTML by hand, copy that shape, because a padded link on its own will lose its padding in classic Outlook.
Use a font the inbox already has
Apple Mail will load a web font. Gmail and classic Outlook won't, so the fallback font is what most people actually see.
Set the font stack on the table, not just on a wrapper, because Outlook is bad at inheriting type from an outer div.
Helvetica, Arial, sans-serif is a plain sans you can live with, and Georgia, serif is the safe serif. Body copy at 16px with a line-height of around 1.5 stays readable on a phone. Below 14px the unsubscribe line gets hard to read, and that's the line people really need.
Check dark mode in an inbox
Apple Mail, Outlook on the web and the Gmail apps all rewrite colours. A black logo on a transparent PNG disappears on a dark background. A white sheet can flip to grey, and grey text flips with it.
Use a logo that works on both light and dark, or put it on a solid background. Set backgrounds with bgcolor as well as CSS. A dark-mode media query helps in Apple Mail, but Gmail ignores it.
These two tags tell a client you've thought about both colour schemes, but on their own they won't stop it recolouring the email. The Gmail apps on iPhone and Android are the exception: since September 2026, they show your light design to readers on a Google account when an email asks for light only (Email Markup Consortium). Dark mode email design explains when that's worth it. Seasonal palettes lean dark too: see Halloween email design for a one-accent approach that still looks like your brand.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Stay under Gmail's clip
Once the HTML reaches about 102KB, Gmail hides the rest of the message behind "View entire message". The cut often lands in the footer, which is where your unsubscribe link lives.
Inlining every style, leaving unused CSS in and stacking up long legal text are the usual ways to cross that line. If you're close, cut a section before you add another image. How to stop Gmail from clipping your HTML email goes through what counts and how to trim it.
Write the subject and the preview line
The preview line is the grey text after the subject. Leave it empty and the client grabs the first words it finds in the file, which is often "View in browser" or a copyright line.
Write one sentence that carries on from the subject. If you don't want it showing in the body, hide it at the top. For length and wording, see email preheader text.
<div style="display:none; max-height:0; overflow:hidden; mso-hide:all;">
Sunday is the last day. The restock is live.
</div>
Use https links. A button that goes nowhere is still a broken email, however tidy the layout looks.
Send a test before you export
Open the HTML in a browser, then send it to an inbox you control. Read it with images off, in dark mode and on a phone. If your list includes classic Outlook, open it there too.
Milo Email Studio sends that test to an address on your account, with a subject that starts with Test. When the proof looks right, export HTML or MJML and send the campaign from your usual tool. Not sure which file to take? See why MJML beats hand-written HTML email.
The list
- One column, near 600px, with widths on the table and the cells
- The offer in text, alt on every image, images on public https URLs
- Button padding and bgcolor on a table cell
- Helvetica, Arial, or Georgia, set on the table
- A logo and colours you've checked in dark mode
- HTML under about 102KB
- A preview line you wrote on purpose
- A test send with images off
Questions
What width should an HTML email be?
Keep one column near 600 pixels, and set that width on the table and the cells. Classic Outlook on Windows ignores flexbox, grid, and any CSS max-width that hasn't got a width attribute to back it up.
Why do email buttons break in Outlook?
Classic Outlook drops padding on a link. Put the link in a table cell, set the background with a bgcolor attribute, and put the padding on the cell.
Why does Gmail cut off an HTML email?
Gmail hides the rest behind "View entire message" when the HTML is about 102KB. The cut often takes the footer with it, unsubscribe link included.