Email rendering issues happen because every email client reads HTML and CSS in its own way. Classic Outlook for Windows still uses Microsoft Word to draw messages. Gmail clips messages over about 102KB, and dark mode can recolor your design. The fix is the same as it always was: code with simple, well-supported HTML and inline CSS, check a support chart, and test in the clients your audience actually uses before you send. What has changed is which clients matter. Apple Mail and Gmail now account for most tracked opens, Hotmail became Outlook.com, Lotus Notes became HCL Notes, and since 2024 Gmail and Yahoo also require bulk senders to authenticate their mail and offer one-click unsubscribe.
Why the same email looks different in each client
Making sure an email displays correctly in every client people use is one of the slowest parts of email development. An email that looks fine in Apple Mail (once called Mac Mail) can look quite different to someone reading it in Thunderbird, classic Outlook or the Gmail app.
Each client uses its own rendering engine and its own rules for what HTML and CSS it accepts. Some remove CSS they don’t support, some rewrite your code, and some add their own styles on top. Today the clients that cause the most trouble are:
- Classic Outlook for Windows. Since Outlook 2007, desktop Outlook has used Microsoft Word to render HTML. That is why it has weak support for modern CSS layout, background images and many padding and margin rules. The new Outlook for Windows uses a modern web engine, much like Outlook on the web. Microsoft has said it will support classic Outlook until at least 2029, so you will be coding for both engines for years.
- Gmail. The old complaint about Gmail was that it ignored
<style>blocks. That stopped being true in 2016, when Gmail added support for embedded styles and media queries. Some quirks remain. Styles belong in the<head>. The Gmail apps don’t apply embedded styles to mail from non-Gmail accounts added to the app. Messages over roughly 102KB of code are cut off behind a “View entire message” link. - Dark mode in mobile and desktop apps. Apple Mail, Outlook and the Gmail apps can partly or fully invert your colors. Dark logos on transparent backgrounds and hard-coded text colors are the usual problems.
HCL Notes was once a big headache for B2B senders, back when it was IBM Lotus Notes. It still exists, and it still has strict rendering. It now matters only if you know a large share of your list works inside Notes.
Check a CSS support guide before you test
The only reliable way to deal with these temperamental clients is to test your message in as many of them as you can. When you run into rendering issues in clients such as Gmail or Outlook.com (formerly Hotmail), Campaign Monitor’s guide to CSS support in email is available here. It shows which clients support CSS features such as the <style> and <link> elements and which ones don’t.
When that guide was first published, it rated Gmail the least cooperative client and Yahoo Mail the most lenient. That ranking is now history. Gmail’s 2016 update closed most of the gap, and the client that most often breaks layouts today is classic Outlook for Windows. The community-run caniemail.com site is another current reference. It tracks support feature by feature, including Gmail’s 16KB cap on <style> blocks.
Campaign Monitor’s guide also makes a point that still holds: no single design approach guarantees the same look everywhere. Instead, you should weigh two things:
- How much consistency your client or brand needs
- Which email environments your recipients are likely to use
- Business to business
- Business to consumer
Before you test, apply the habits that prevent most problems:
- Put critical styles inline. Embedded styles are fine for extras like media queries, but don’t rely on them alone.
- Use table-based layout for the main structure if classic Outlook matters to your list.
- Keep the HTML well under 102KB so Gmail doesn’t clip it. Clipping can also cut off the open-tracking pixel.
- Add alt text to every image, because many clients and corporate networks block images by default.
- Use logos and images that still read well on both light and dark backgrounds.
Match your testing to your audience
B2B emails: Focus your testing on classic Outlook for Windows, the new Outlook, Outlook for Mac and Apple Mail. Include HCL Notes only if your recipients still use it.
B2C emails: Test in the Gmail web and mobile apps, Apple Mail on iPhone, Outlook.com and Yahoo Mail.
Your own data is the best guide. Most email platforms report opens by client, and Litmus publishes a running email client market share report. Litmus notes that Apple Mail and Gmail together account for nearly 90% of tracked opens. Treat Apple’s share with care, though. Apple Mail Privacy Protection loads tracking pixels automatically, which inflates opens and hides which client was really used.
Free accounts at Gmail, Outlook.com and Yahoo cover the basics. Paid preview tools such as Litmus and Email on Acid, along with the previews built into ESPs like Campaign Monitor, show your email in dozens of clients and devices at once, including dark mode. Send the campaign live only once it displays consistently in the clients that matter to your list.
Rendering is only half of reaching the inbox
A perfectly coded email still fails if it never reaches the inbox. Since February 2024, Gmail and Yahoo have required bulk senders (roughly 5,000 or more messages a day to their users) to:
- Authenticate mail with SPF, DKIM and DMARC
- Offer one-click unsubscribe through the List-Unsubscribe headers
- Keep spam complaint rates below 0.3%
Microsoft began enforcing similar rules for Outlook.com, Hotmail and Live addresses on 5 May 2025, and it rejects mail that doesn’t comply. A basic DMARC record looks like this:
_dmarc.example.com. TXT "v=DMARC1; p=none; rua=mailto:[email protected]"
In the United States, the FTC’s CAN-SPAM rules also apply to every commercial email. You need a valid physical postal address and a working opt-out link in the body, and you must honor opt-out requests within 10 business days.
FAQ
Why does my email look broken in Outlook but fine everywhere else?
Classic Outlook for Windows renders HTML with Microsoft Word, which ignores or mishandles a lot of modern CSS. Floats, flexbox, background images and some padding rules are common casualties. Build the main layout with tables and inline styles, and use conditional comments for fixes that only Outlook should see. The new Outlook for Windows renders much more like a browser, but many business users are still on classic Outlook.
Does Gmail support CSS in the head of an email?
Yes. Since 2016, Gmail has supported <style> blocks in the <head>, including media queries. Embedded styles can still be dropped in some cases, such as non-Gmail accounts viewed in the Gmail apps or style blocks over 16KB. That is why critical styles should stay inline.
Why is Gmail clipping my email?
Gmail hides anything past about 102KB of message code behind a “View entire message” link. The limit counts the HTML itself, not the image files, so long templates, repeated blocks and bloated code from editors push you over it. Clipping can also hide your unsubscribe link and your open-tracking pixel.
How do I stop dark mode from ruining my email design?
Use logos with a light outline or a transparent background that works on both light and dark backgrounds. Avoid text placed inside images, and test the email in dark mode in Apple Mail, Outlook and the Gmail apps. You can add prefers-color-scheme media queries for clients that support them. Some apps, including parts of Gmail, will still force their own color changes.
Which email clients should I test in first?
Start with the clients that show up in your own ESP’s open reports. For most consumer lists that means Apple Mail on iPhone and Gmail. For B2B lists, add classic Outlook and the new Outlook for Windows. Keep in mind that Apple Mail Privacy Protection inflates Apple’s share of opens.
Do Gmail and Yahoo sender rules affect how my email renders?
Not directly. Those rules cover authentication, unsubscribe headers and complaint rates, not HTML. But a rendering problem can turn into a deliverability problem: a broken layout or a clipped, hidden unsubscribe link pushes people to hit “Report spam,” and complaints over 0.3% hurt your inbox placement.
Sources
- Google Workspace Admin Help, Email sender guidelines
- Google for Developers, Gmail CSS support documentation
- Yahoo Sender Hub, Sender best practices and requirements
- Microsoft Defender for Office 365 blog, Outlook.com requirements for high-volume senders (2025)
- Microsoft Learn, New Outlook for Windows product availability and classic Outlook support timeline
- Federal Trade Commission, CAN-SPAM Act: A Compliance Guide for Business
- Campaign Monitor, The Ultimate Guide to CSS support in email
- Can I email (caniemail.com), HTML and CSS support tables
- Litmus, Email client market share report