Definition
Email client rendering refers to how different email applications display HTML emails. Unlike web browsers, which all render against relatively standardised web specifications, email clients use wildly different rendering engines — from Gmail's heavily modified web rendering stack (which strips <style> tags and inline CSS from the <head>), to Outlook for Windows using the Microsoft Word rendering engine (which handles CSS completely differently from standards-compliant browsers), to Apple Mail which uses the WebKit engine and supports modern CSS. These variations mean an email that looks perfect in Apple Mail may appear broken or completely unstyled in Outlook.
The current market share landscape as of 2024 shows Gmail leading at 30-35% of all email opens, followed by Apple Mail at 25-30% (combining iOS Mail and macOS Mail), Outlook at 10-15% (including Outlook for Windows, Outlook for Mac, and Outlook.com), Yahoo at 5-8%, and Samsung Email at 3-5%. The remaining 10-15% is distributed across Google Mail (Inbox-style), ProtonMail, HEY, Fastmail, and dozens of smaller clients. Market share varies significantly by audience — B2B audiences see 25-35% Outlook share, while B2C audiences may see 40-50% Apple Mail share.
Each client has well-documented rendering quirks. Gmail strips all CSS from <style> tags in the <head> so all styling must be inline. Gmail also strips <style> tags from the <body> on non-AMP emails. Outlook for Windows uses Word's HTML renderer which does not support background images on buttons, padding on list items, certain font rendering, or CSS floats. Apple Mail supports modern CSS including media queries, CSS animations, clamp(), and custom fonts via @font-face. Yahoo strips <style> tags that use id or class selectors but preserves inline styles.
Best Practices
Build emails so they look acceptable in Gmail's stripped-down rendering environment, then enhance for Apple Mail. Since Gmail accounts for 30-35% of all opens and strips <style> tags, your email must work with all CSS inlined and without relying on embedded stylesheets. Use inline styles for everything — font sizes, colours, padding, margin, borders, and background colours.
Test every template in the Outlook rendering engine (Word-based on Windows) before sending. Outlook for Windows is the most challenging client with the most rendering bugs. Test padding on buttons (use mso-line-height-rule: exactly; to fix Outlook's line-height bug), background images (not supported in Outlook), and typography (use web-safe fonts with fallbacks). Use conditional <!--[if mso]> comments to apply Outlook-specific fixes.
Create a comprehensive testing matrix covering the clients that represent 90%+ of your audience based on your actual analytics data. The standard recommended set includes Gmail (web and mobile), Apple Mail (iOS and macOS), Outlook (Windows, Mac, and web), Yahoo (web and mobile), and Samsung Email (Android). Test on real devices and using an email testing platform. The cost of a broken email in a top-3 client is higher than the cost of testing.
Use a bulletproof button technique for calls-to-action universally. The standard approach uses <!--[if mso]> VML code for Outlook combined with a standard <a> tag with inline styles for other clients. The button should have explicit padding, a background colour, and rounded corners via border-radius (which Outlook ignores — VML handles the Outlook rendering).
Limit your CSS to properties supported across all target clients. Core safe properties include: font-family, font-size, color, background-color, text-align, padding, margin, border, width, height, and display (limited). Unsafe properties in Outlook include max-width, min-height, flexbox, grid, position, float, and opacity. Test each new CSS property in your target client matrix before using it in production templates.
Which email client is the hardest to code for?
Outlook for Windows uses the Microsoft Word rendering engine, making it the most difficult client to support. It lacks support for basic CSS properties including background images, CSS floats, flexbox, padding on list items, and rounded corners without VML coding. Approximately 20-30% of development time for a new template goes to Outlook-specific fixes.
Does Gmail support CSS media queries?
Gmail web (mail.google.com) strips <style> tags entirely, so media queries in <style> tags do not work. Media queries embedded as inline CSS or in the <head> are stripped. Gmail mobile apps (iOS and Android) support media queries in limited form. The safest approach is inline-only CSS that does not rely on media queries.
What percentage of users see images disabled by default?
Approximately 10-15% of email opens occur with images disabled. Gmail, Yahoo, and Outlook webmail all block images by default. Apple Mail loads images automatically. Design your emails so they are readable with images off — use descriptive alt text, adequate font sizes, and background colours that work even without images loaded.
How often should I update my email testing matrix?
Review quarterly and whenever you observe a shift in your audience's client distribution. The email client landscape changes slowly — Gmail and Apple Mail have held the top two positions for years — but new versions of Outlook, Gmail UI updates, and the emergence of new clients warrant re-testing. Major template redesigns should trigger a full re-test.
Are AMP emails compatible with all email clients?
No. AMP for Email works only in Gmail (web and mobile), Outlook.com, Mail.ru, and Yahoo Mail. Apple Mail, Outlook for Windows, Outlook for Mac, and most other clients do not support AMP. AMP content must include a non-AMP HTML fallback for unsupported clients. As of 2024, AMP accounts for a very small percentage of all email opens.
Related Glossary Terms
AI Inbox
An AI inbox is an email client that uses artificial intelligence to summarise, sort, prioritise and sometimes answer emails before the human recipient reads them. It is transforming email marketing metrics and copywriting.
Dark Mode
Dark mode in email refers to how email clients render messages when the recipient has dark mode enabled. It affects colour display, image rendering, and readability. Designers use CSS media queries and hybrid coding techniques to control the dark mode appearance.
Email Background Image Fallback
Background image fallback ensures emails remain readable and visually coherent when background images fail to load — a common occurrence across email clients with image blocking enabled.
Browser Rendering
Browser rendering refers to how different web browsers display HTML emails when viewed in browser-based email clients like Gmail, Yahoo Mail, and Outlook Web Access.
Email Client Preview
Email client preview refers to how an email renders across different email clients and devices, which varies significantly due to different rendering engines and CSS support levels.
Client Support
Client support refers to which HTML, CSS, and interactive features are supported by different email clients, determining what designs will render correctly for your subscribers.