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.
Frequently Asked Questions
Frequently Asked Questions
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.
Gmail web (mail.google.com) strips `