Why Your Marketing Email Looks Different in Gmail, Outlook and Apple Mail (and How to Design for It)
You approve a campaign in your email platform’s preview. The hero looks sharp, the button is a rounded pill, the headline is in your brand font. Then a colleague opens the test on a work laptop: the hero is a flat block of color, the button is square, and the headline is in Times New Roman.
Nothing in the file changed. The email landed in an app that reads HTML differently. No two inboxes match exactly, but you can design so the offer lands in all of them.
Why the same email renders differently
Web pages run in a few modern browsers that mostly agree. Email runs in whatever app the subscriber uses, and each app decides which HTML and CSS it honors. Five differences cause most problems:
- The rendering engine. Microsoft’s developer documentation for Outlook 2007 states that it uses Microsoft Word’s HTML parsing and rendering engine to display message bodies. Caniemail.com’s tests of desktop Outlook on Windows, versions 2007 through 2019, show no support for CSS background images, rounded corners or media queries.
- CSS support. Gmail’s developer documentation says it supports style blocks, class and ID selectors and media queries, and may ignore properties it doesn’t support. Caniemail.com lists custom web fonts (@font-face) as unsupported in Gmail on every platform it tested; Apple Mail supports them.
- Image blocking. Microsoft says classic Outlook blocks automatic picture downloads by default. Gmail shows images by default, though users can choose to be asked first, and messages it flags as suspicious don’t load them automatically.
- Dark mode. Apple Mail supports the dark mode media query (prefers-color-scheme), so you can design a dark version. Caniemail.com shows Gmail and desktop Outlook on Windows without it, leaving your colors to each app’s own dark mode.
- Screen width. The same campaign is read on a desktop monitor and a phone.
The breaks that show up most
| Design choice | What can go wrong |
|---|---|
| Offer text on a CSS background image | Desktop Outlook on Windows drops the image, and white text can land on white. |
| Brand font loaded as a web font | Gmail shows the fallback. In Outlook 2007 to 2016 on Windows, caniemail.com notes text can skip your font list and fall back to Times New Roman. |
| Button made as an image | With images blocked, there is nothing to click. |
| Rounded, padded button styled on the link | Corners square off in desktop Outlook on Windows, where caniemail.com shows padding working only on table cells, so the button shrinks to its text. |
| Dark logo on a transparent background | It disappears in dark mode. |
| Three-column product grid | On a phone, unstacked columns squeeze names and prices into slivers. |
Design habits that hold up everywhere
- Keep the offer in live text. The headline, discount, deadline and terms belong in HTML text, not the hero image. If every image fails, subscribers should still know what is on sale and until when.
- Use bulletproof buttons. Build each button as a table cell with a background color and padding, holding a plain text link. It survives images off. For rounded corners in older Outlook, a developer can add the Outlook-only VML code that caniemail.com points to.
- Write a font list you’re happy to see. Brand font first, then a web-safe fallback of similar width, such as Arial, Helvetica or Georgia. Review the fallback on purpose: Gmail readers see it.
- Treat background images as decoration. Put a solid color behind them and pick text colors that read on it alone.
- Write alt text that sells. “Winter boots sale, ends Sunday” works with images blocked. “hero-final-v3” does not.
- Stack to one column on mobile. Single-column product grids, body text readable without zooming, and buttons sized for a thumb.
- Prepare a dark-safe logo. Use a transparent PNG with a thin light outline, or set the logo on a solid shape. Where the dark mode media query works, swap in a light version.
A testing routine before every send
- Know your inbox mix. If your platform reports opens by email app, test the apps that lead your list.
- Send real tests. A preview shows the design, not what each inbox does with it. Send to Gmail (web and phone app), Apple Mail on an iPhone, and Outlook on Windows.
- Images off. Read the Outlook test before downloading pictures. Is the offer clear, and can you find a button?
- Dark mode on. Check the logo, text on colored blocks, and product photos shot on white.
- Phone width. Read without zooming and tap every button with your thumb.
- Log what broke. Fix it in the template once instead of patching it before every send.
Design for the inbox you can’t see
You can’t control which app a customer opens your email in. You can control whether the offer survives it: live text, real buttons, honest fallbacks and the same tests every time.
If you’d rather not code around Outlook every week, Nexmail is one option. It creates production-ready email designs for e-commerce brands, exporting HTML for Klaviyo, Mailchimp, Omnisend and Constant Contact that renders in Gmail, Outlook, Apple Mail and on mobile. Test its output the same way.
