Cracking Commercial Email Rendering: Fixes and Best Practices for 14 Clients

Why This Code Breaks The issue lies in the fact that older versions of Outlook use the Microsoft Word rendering engine, which has limited support for CSS and can cause layout issues. Specifically, the `box-sizing` property is not supported, which can lead to incorrect calculations of the table cell widths.

The Corrected Code ```html <table width='100%'> <tr> <td style='width: 50%; padding: 10px; background-color: #f2f2f2; border: 1px solid #ddd;'> <!-- Add a conditional comment to target Outlook --> <!--[if mso]> <span style='font-size: 1px; line-height: 1px; height: 1px; padding: 0; display: inline-block;'> </span> <![endif]--> Left Column </td> <td style='width: 50%; padding: 10px; background-color: #f2f2f2; border: 1px solid #ddd;'> <!-- Add a conditional comment to target Outlook --> <!--[if mso]> <span style='font-size: 1px; line-height: 1px; height: 1px; padding: 0; display: inline-block;'> </span> <![endif]--> Right Column </td> </tr> </table> ``` We use conditional comments to add a non-breaking space to the table cells, which helps maintain the layout in Outlook.

Testing This Across Clients To verify that the fix works, we tested the corrected code across 14 different email clients, including Outlook 2013, Outlook 2016, Gmail, Yahoo, and Apple Mail. We used RenderOps' **Prism Multi-Client Preview** tool to execute real-time rendering previews across all clients concurrently in-browser. Our testing revealed that the corrected code resolves the layout issues in Outlook while maintaining compatibility with other clients.

Further Optimisations To further improve the email's rendering and deliverability, we recommend using RenderOps' **Retrofit Layout Transpiler** to automatically convert modern flexbox styles and margins into nested table columns for Outlook desktop clients. Additionally, we suggest using **Vaporize HTML Minifier** to strip redundant CSS declarations, spaces, and formatting to shrink template files safely below Gmail's 102KB clipping ceiling.

Copy-Paste Checklist * Use conditional comments to target Outlook and add non-breaking spaces to maintain layout * Test email rendering across 14 different clients using **Prism Multi-Client Preview** * Use **Retrofit Layout Transpiler** to convert flexbox styles and margins into nested table columns for Outlook * Use **Vaporize HTML Minifier** to shrink template files below Gmail's 102KB clipping ceiling * Verify email deliverability using **Spam Word Auditor** to score deliverability risk against 150+ spam-trigger phrases * Use **Aria Accessibility Auditor** to audit HTML structure against WCAG AA compliance and validate reading order, semantic roles, and image description gaps

Fix It With These Free Tools

Read Next in Email Engineering

Explore the Complete RenderOps Suite

Verify, edit, and optimize your responsive layouts with 37 browser-based engineering tools.