Email Chart
Why the same email looks different in every inbox
Why the same email looks different in every inbox

Why the same email looks different in every inbox

Elena Vargas
Publié 12 mars 2026 · Mis à jour 28 juillet 2026 · 14 min de lecture

Résumé: When a recipient opens your message, no single browser engine is in charge. Gmail may strip your style block, Outlook may ignore your max-width, and Apple Mail may respect media queries your template never tested. The HTML file you upload to an ESP is only the starting point. Each client applies its own parser, security rules, and dark-mode heuristics before anything appears on screen.

Email is not a web page

When a recipient opens your message, no single browser engine is in charge. Gmail may strip your style block, Outlook may ignore your max-width, and Apple Mail may respect media queries your template never tested. The HTML file you upload to an ESP is only the starting point. Each client applies its own parser, security rules, and dark-mode heuristics before anything appears on screen.

That is why two teammates can screenshot the same campaign and argue about whether it is broken. Both screenshots can be correct. Email Chart treats rendering differences as normal physics, not as a sign that your platform failed. The job is to design for the lowest common denominator while accepting that premium clients will look slightly better.

If you come from web development, the mental model shift is simple: you are shipping documents, not apps. There is no DOM you control after send. You get one static file, interpreted differently everywhere.

How major clients treat HTML

Gmail removes many style tags from the head and inlines what it keeps. It also clips messages over roughly 102 KB of HTML, which looks like a broken layout with a View entire message link. Gmail on iOS and Android use different wrappers than Gmail in Chrome, so mobile and web previews are not interchangeable.

Outlook desktop on Windows uses Microsoft Word as its rendering engine for classic messages. That means flexbox, grid, and modern CSS you expect on the web simply do not exist. Margin collapse behaves oddly, background images on divs fail, and VML fallbacks are still part of professional template work.

Apple Mail on macOS and iOS is comparatively standards-friendly and respects many media queries. That makes it a dangerous client to design in exclusively, because Outlook will not forgive the same choices. Yahoo and AOL variants add another layer: generally WebKit-based, but with image proxying and link rewriting that can affect tracking pixels and query-string heavy URLs.

Dark mode is a second template

Dark mode is not a color preference toggle you can ignore. Clients infer dark backgrounds and invert colors heuristically. Logos on white PNGs disappear. Button text that was carefully brand-blue may flip to unreadable pastels. Some clients honor prefers-color-scheme media queries; Outlook applies its own rules regardless.

Professional teams maintain paired assets: a default logo and a knock-out version, explicit background colors on table cells, and meta tags documented in Microsoft's guidance for Office dark mode. Testing only in light mode is how brands ship invisible logos to half their Outlook users.

Dark mode also changes perceived spam signals indirectly. Broken branding reduces clicks and replies, which eventually hurts engagement metrics mailbox providers watch. Rendering and deliverability are separate disciplines, but they meet in the inbox experience.

What founders should standardize

Pick a baseline width near 600 pixels, table-based structure, inline-critical styles, and a plain-text part. Host images on HTTPS URLs your ESP documents. Avoid JavaScript, video embeds, and form elements. They will not run in email clients.

Document which clients your audience uses before you obsess over edge cases. B2B lists skew Outlook-heavy; consumer product mail skews Gmail mobile. A ten-person startup can sample support inboxes and sales threads to learn more than any generic benchmark.

Use a pre-send checklist that includes at least one Gmail account, one Outlook desktop install, and one iPhone. Automated preview tools scale that process, but human eyes still catch copy truncation and awkward line breaks automation misses.

When to escalate to a specialist

If more than five percent of revenue touches customized templates, hire or contract an email developer for regression QA. ESP editors, including AI-native platforms like Brew, produce solid starting HTML, but complex modules still deserve a rendering pass before peak season.

Escalate when you see inconsistent metrics tied to a single template version, sudden growth in Outlook-only support tickets, or clipping reports from Gmail. Those symptoms usually trace to HTML size, nested tables, or non-inline styles rather than list quality.

Keep a versioned template library with preview screenshots per client. Future you will not remember which campaign broke Outlook 2021, but a screenshot archive saves hours.

Gmail removes many style tags from the head and inlines what it keeps. It also clips messages over roughly 102 KB of HTML, which looks like a broken layout with a View entire message link. Gmail on iOS and Android use different wrappers than Gmail in Chrome, so mobile and web previews are not interchangeable.

Sources

FAQ

Why does Gmail clip my email?

Gmail clips HTML when the message exceeds about 102 KB after processing. Reduce nested tables, remove unused comments, and split long newsletters if clipping persists.

Is Outlook still worth testing in 2026?

Yes for B2B audiences. Outlook desktop still uses Word-based rendering for many messages, and enterprise inboxes remain a large share of B2B revenue.

Do AI-generated emails render worse than hand-coded ones?

Not inherently. Quality depends on the generator's output rules. AI-native ESPs that target table-based, inline-safe HTML can match agency baselines, but you should still preview before high-stakes sends.

Lectures associées

Email Chartemailchart.co