Email rendering varies drastically across clients. Outlook uses Word's rendering engine, Gmail strips most CSS, and Apple Mail supports modern standards. Build with table-based layouts, inline CSS, and test across all major clients before sending. Broken rendering doesn't just look bad — it triggers spam filters that analyze HTML structure.
Email Rendering Compatibility: How to Make Emails Look Right Everywhere
The Rendering Problem
There is no web standards compliance in email. Every email client renders HTML differently, and some barely render it at all. What looks perfect in Apple Mail can break completely in Outlook.
This isn't just a design problem — it's a deliverability problem. Malformed HTML and broken rendering generate signals that spam filters pick up on.
The Major Rendering Engines
| Client | Rendering Engine | CSS Support |
|---|---|---|
| Apple Mail / iOS Mail | WebKit | Excellent |
| Gmail (web) | Custom (strips <style> blocks) | Limited |
| Gmail (app) | Custom | Limited |
| Outlook 2016-2025 | Microsoft Word | Poor |
| Outlook.com (web) | Custom | Moderate |
| Yahoo Mail | Custom | Moderate |
| Thunderbird | Gecko | Good |
Outlook desktop using Word's rendering engine is the source of most email developer pain. It doesn't support background-image on divs, border-radius, max-width, CSS positioning, flexbox, or grid.
The Safe HTML Stack
Build emails with these constraints:
Table-based layout. Not because it's 2005, but because it's the only layout method that works everywhere. Use <table>, <tr>, <td> for structure.
<table role="presentation" width="600" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 20px; font-family: Arial, sans-serif;">
Your content here.
</td>
</tr>
</table>
Inline CSS only. Gmail strips <style> blocks from the <head>. Every style must be inline on the element. Yes, this is tedious. Use your ESP's template builder or an inliner tool.
System fonts. Web fonts load inconsistently in email. Use Arial, Helvetica, Georgia, or Verdana. Specify fallbacks.
Images with alt text and dimensions. Always include width, height, and alt attributes. Many clients block images by default.
Practitioner note: The number of "deliverability problems" that turn out to be rendering problems is surprisingly high. A client's email was going to Gmail Promotions instead of Primary — the cause was a 95% image-to-text ratio because Outlook conditional comments were hiding all the text content in Gmail.
CSS Properties to Avoid in Email
These work on the web but break in email:
position: absolute/relativefloat(works in some clients, breaks in others)flexboxandgridbackground-imageon<div>(Outlook ignores it)marginon<body>or<html>max-widthwithout awidthattribute fallback@mediaqueries (limited support — see dark mode section)
Outlook-Specific Fixes
Outlook desktop requires conditional comments for certain features:
<!--[if mso]>
<table width="600"><tr><td>
<![endif]-->
<div style="max-width: 600px;">
Content here
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
These comments are only read by Outlook and ignored by every other client. Use them for width enforcement and image backgrounds.
Testing Workflow
- Build with table layout and inline CSS
- Preview in Litmus or Email on Acid across top 10 clients
- Send test to real accounts on Gmail, Outlook, Apple Mail, Yahoo
- Check mobile rendering on iOS and Android
- Fix any broken layouts before the campaign send
Practitioner note: If you can't afford Litmus or Email on Acid, at minimum create free accounts on Gmail, Outlook.com, and Yahoo. Send every campaign to those three before going live. It catches 80% of rendering issues.
Rendering and Spam Filters
Spam filters analyze HTML structure. These trigger filtering:
- Excessively nested tables (5+ levels deep)
- Broken or unclosed HTML tags
- Hidden text using CSS (
display:nonewith visible content) - Extremely large HTML size (over 100KB)
- Code-to-text ratio heavily skewed toward code
Keep your HTML clean, minimal, and well-structured. If it validates cleanly, it won't cause filter problems.
For a full email template review covering rendering and deliverability, get in touch.
Sources
- Can I Email: CSS Support Database
- Litmus: Email Client Market Share
- Email on Acid: Email Testing
- Microsoft: Word HTML/CSS Rendering
v1.0 · April 2026
Frequently Asked Questions
Why does my email look different in Outlook vs Gmail?
Outlook uses Microsoft Word's HTML rendering engine, which doesn't support modern CSS properties like flexbox, grid, or background images on divs. Gmail strips embedded styles and limits CSS support. Build with table layouts and inline CSS to work in both.
Does email rendering affect deliverability?
Yes. Broken HTML, malformed tags, and excessive code complexity trigger spam filter heuristics. Clean, well-structured HTML is a minor but real deliverability signal.
How do I test email rendering before sending?
Use Litmus or Email on Acid to preview your email across 90+ client and device combinations. At minimum, send test emails to Gmail, Outlook, Apple Mail, and Yahoo before every campaign.
Want this handled for you?
Free 30-minute strategy call. Walk away with a plan either way.