What Breaks Where: Gmail, Outlook, iOS Mail, and the Email Client Minefield
Why Email Clients Break Things
Email is a unique beast. Every client — from Gmail to Outlook to iOS Mail — has its own rendering engine. Some use WebKit. Others rely on Word. Yes, Microsoft Word.
This means even clean, well-structured code can behave wildly differently depending on where it lands. Let’s walk through what breaks where — and what you can do about it.
📬 Gmail (Web and Mobile)
Rendering Engine: WebKit (mobile), Blink (web)
Strengths: Good CSS support, modern-ish behavior
Watch out for:
- No support for embedded
<style>
in the<head>
- Media queries only supported in Gmail app, not web version
- Strips out
<link>
tags and some classes - Doesn’t always respect
line-height
in nested tables - Font rendering can look fuzzy or inconsistent
Tips: Inline all CSS. Use !important
when needed. Avoid relying on external stylesheets.
📧 Outlook (Especially 2013–2019 Desktop)
Rendering Engine: Microsoft Word
Strengths: Absolutely none (kidding… kind of)
Watch out for:
- Broken support for floats, margins, padding
- Ignores many CSS properties
- Tables are your only real friend
- PNG transparency issues on older versions
- VML needed for background images
- Inconsistent button alignment
Tips: Use VML for background images. Keep designs grid-based. Test heavily.
📱 Apple Mail (macOS and iOS)
Rendering Engine: WebKit
Strengths: Excellent CSS support
Watch out for:
- Dark mode overrides background and text colors
- Image inversion can ruin logos
- May ignore
background-color
if not set inline
Tips: Set bgcolor
attributes. Use fallback logo variants. Avoid transparency unless you plan for it.
📨 Yahoo Mail
Rendering Engine: Yahoo’s own hybrid (quirky WebKit behavior)
Strengths: Surprisingly solid these days
Watch out for:
- May strip out unknown HTML tags
- Can flatten CSS specificity
- Quirky spacing behavior in nested tables
Tips: Test images and alignment. Avoid over-styling text. Keep font stacks clean.
📩 Samsung Mail and Android Clients
Rendering Engine: WebKit-based, but varies by OS version
Strengths: Okay mobile CSS support
Watch out for:
- CSS inconsistencies (like Gmail Web)
- Font substitutions
- Strips embedded styles on some versions
- Problems with nested elements and
margin
Tips: Stick to inline styles. Use <br>
for spacing when needed. Test on real Android devices.
What Can You Do About It?
Unfortunately, you can’t control how every client behaves — but you can plan for it.
- Use table-based layouts — with fixed widths and inline styles
- Avoid relying on margins for spacing — use padding inside table cells instead
- Set colors everywhere: inline,
bgcolor
, and in style tags - Test in Litmus, Email on Acid, AND real inboxes
- Include fallbacks for fonts, images, and background colors
- Always send a plaintext version
The Mindset Shift
The best email developers don’t just memorize which client does what — they build in layers, plan for failure, and anticipate chaos. They understand that email is a battlefield. You’re not just coding — you’re surviving.
And when marketers and designers respect the complexity of that work, the emails get cleaner. The launches go smoother. And the brand wins.
Still thinking it through? Contact me here and I’ll help you get it right.