Email Client Rendering Checker

Check email compatibility across Outlook, Gmail, Apple Mail, and Yahoo

Email Client Rendering Checker

Email clients interpret HTML and CSS differently, which means an email that looks perfect in Gmail may appear broken in Outlook. Mailnaptic's built-in Email Client Rendering Checker analyzes your email content and flags potential compatibility issues before you send.

How the rendering checker works

The rendering checker performs a static analysis of your email HTML and CSS, testing against known quirks and limitations of four major email clients:

• Microsoft Outlook — Uses the Word rendering engine, which has limited CSS support. Flexbox, grid, background images, and many modern CSS properties are unsupported.
• Gmail — Strips certain CSS properties and does not support embedded <style> blocks in all contexts. Media queries are partially supported.
• Apple Mail — Generally the most standards-compliant, but has specific quirks with dark mode rendering and certain font handling.
• Yahoo Mail — Strips some CSS properties and has inconsistent support for background images and advanced layouts.

What gets checked

The checker scans your email for a comprehensive list of potential issues:

• Layout — Flexbox, CSS Grid, and CSS position properties that Outlook cannot render.
• Background images — CSS background-image declarations that may not display in Outlook or Yahoo.
• Max-width — The max-width property, which Outlook ignores entirely.
• Border radius — Rounded corners that Outlook does not support.
• JavaScript — Any <script> tags, which are stripped by all major email clients.
• SVG — Inline SVG elements that have inconsistent support across clients.
• Forms — Form elements like <input> and <select>, which most clients strip or disable.
• Dark mode — Missing dark mode meta tags or color scheme declarations.
• GIF animations — Animated GIFs that Outlook renders as static images.
• Email size — Total HTML size that may cause clipping in Gmail (over 102 KB).

Running a rendering check

1. Open your campaign and navigate to Step 3: Review in the campaign builder.
2. Look for the Email Client Compatibility panel on the right side of the review page.
3. The checker runs automatically when you reach this step. It analyzes your email content and displays results within a few seconds.

Reading the results

The checker returns a compatibility score from 0 to 100. A score of 100 means no issues were detected. Each issue includes:

• Client — Which email client is affected (e.g., Outlook, Gmail).
• Severity — How impactful the issue is: critical, warning, or info.
• Category — The type of issue (layout, images, CSS, etc.).
• Suggestion — A specific recommendation for fixing the problem.

Focus on critical issues first, as these represent elements that will be completely broken or invisible in the affected client. Warnings indicate degraded appearance, and info items are minor cosmetic differences.

Tips for maximum compatibility

• Use HTML tables for layout instead of flexbox or grid.
• Inline your CSS styles rather than relying on <style> blocks.
• Always include alt text on images for clients that block images by default.
• Keep your total email size under 100 KB to avoid Gmail clipping.
• Use VML markup for background images if Outlook support is critical.
• Test with the rendering checker every time you make significant layout changes.

The rendering checker helps you catch problems early, saving you from sending emails that look broken for a portion of your audience.