Email Looks Different in Different Clients: Why and What to Do
Six clients, six sets of limits and one code that works everywhere
Mailvex · 31 August 2026 · 4 min read
The same email renders correctly in Gmail, falls apart in Outlook and changes colour in Apple Mail. The cause is not a coding mistake: email clients share no display standard and each handles the code its own way. The fix is writing code for the most limited client, so the rest simply understand it.
Why there is no single standard
Browsers agreed on standards; email clients did not. Each uses its own rendering engine, and some of them are more than a decade old.
Security adds to it: an inbox cannot let a message execute code or load anything from anywhere. So clients strip whatever they consider unnecessary — external stylesheets, scripts, part of the styling properties.
Hence a rule that saves time: do not try to make every client look identical. Aim instead for an email that stays clear and functional everywhere, even when details differ.
What breaks in each client
Six groups of clients cover almost the whole audience. Each has its own set of limits.
| Client | What breaks | What to do |
|---|---|---|
| Outlook for Windows | rounded corners, shadows, buttons, media queries | add VML code, build buttons on tables |
| Gmail in a browser | strips external styles, clips heavy emails | write styles inline, keep weight under 100KB |
| Apple Mail | inverts colours in dark mode | set colours explicitly, add dark mode meta tags |
| Mobile mail apps | some ignore media queries | single column layout by default |
| Corporate systems | block images and external resources | alt text, meaning in the copy |
| Older webmail | no support for modern properties | tables instead of blocks, full colour codes |
Note the first row: Outlook for Windows causes the most trouble because it uses a word processor engine rather than a browser one.
Three techniques that cover most differences
Most differences are handled by three techniques rather than by tuning for each client individually.
- table-based layout instead of modern blocks — every client understands it
- styles written inline rather than in an external stylesheet — they will not be stripped
- a table-based button with added VML code — fully clickable even in Outlook
- full six-digit colour codes rather than the three-digit shorthand
- 600 pixel width and a single column by default
- system fonts with fallbacks
These six rules remove roughly nine differences out of ten. What remains are details like line spacing, which nobody notices.
Where to test and in what order
You do not need to test in twenty clients. Four are enough to cover the main engines.
- a mobile mail client — where most emails are opened
- Outlook for Windows — the most demanding
- Gmail in a browser — the largest webmail
- any inbox in dark mode — reveals colour problems
Order matters: start with mobile. If the email works on a narrow screen it will almost certainly work on a wide one. The reverse does not hold.
What not to try to fix
Some differences cannot be fixed, and trying only wastes time.
Rounded corners and shadows will never appear in Outlook — the engine does not support them. A web font gets replaced by a system one in several clients. Animation shows up unevenly. That is fine: the email must work without them, and where they render is a bonus.
How a builder handles this
In Mailvex an email is assembled from blocks, and the compiler turns them into code compatible with every client: tables instead of blocks, inline styles, separate VML code for Outlook buttons, full colour codes.
A test send to your own address runs from the editor, so you can open the email in your own inbox and see the result before exporting.
Build an email that works in every client.
Browse templatesFrequently asked questions
Can I make an email look identical everywhere?
Not completely, and you should not try. Rounded corners and shadows will never appear in Outlook. The goal is different: the email must stay clear and functional in every client, even when styling details differ.
Which clients must I test in?
Four: a mobile mail client, Outlook for Windows, Gmail in a browser and any inbox in dark mode. They cover the main rendering engines. Start with mobile.
Why does Outlook break things the most?
Classic Outlook for Windows uses a word processor engine rather than a browser one. It does not understand media queries, rounded corners, shadows or background images, and buttons built the ordinary way are clickable only on the text.
