Reminder Emails That Actually Work: A Deep Dive Into Fixing Broken Layouts
Alex Vance & Deliverability Lab Team
Verified across 45 physical email clients & Word MSO rendering engines
# Introduction ``` ```html <table width='100%'> <tr> <td style='background-color: #f2f2f2; padding: 10px; border-radius: 10px;'> <p>This is a reminder that your subscription is about to expire.</p> </td> </tr> </table> ``` This code snippet is a basic example of a reminder email layout, but it has a major flaw: it will not render correctly in Outlook desktop clients due to the lack of nested tables and VML markup.
Why This Code Breaks The code breaks because Outlook desktop clients have limited support for modern CSS styles, including border-radius and padding. To fix this issue, we need to use tables to create the rounded rectangle and add padding to the table cells.
The Corrected Code ```html <!-- Using Retrofit Layout Transpiler to convert modern flexbox styles into nested tables --> <table width='100%'> <tr> <td style='padding: 10px; background-color: #f2f2f2;' valign='top'> <table width='100%' cellspacing='0' cellpadding='0' border='0'> <tr> <td width='10' style='background-color: #f2f2f2;'></td> <td style='background-color: #f2f2f2; padding: 10px; border-radius: 10px;'> <p>This is a reminder that your subscription is about to expire.</p> </td> <td width='10' style='background-color: #f2f2f2;'></td> </tr> </table> </td> </tr> </table> ```
Testing This Across Clients To verify that the corrected code works, we can use the **Prism Multi-Client Preview** tool to test the email layout across 14 different email clients, including Outlook desktop. We can also use the **FlightControl Preview Workspace** to test the email layout in a comprehensive HTML email workspace that integrates visual rendering, accessibility checks, and dynamic previews.
Further Optimisations To further optimize the reminder email, we can use the **VML Button Builder** to create a hybrid VML roundrect markup button that will display perfectly in Outlook desktop clients. We can also use the **CSS Inliner** to move stylesheet rules into inline HTML attributes, protecting the layout against style block stripping in Gmail.
Copy-Paste Checklist * Use tables to create rounded rectangles and add padding to table cells * Use Retrofit Layout Transpiler to convert modern flexbox styles into nested tables * Test email layouts across 14 different email clients using Prism Multi-Client Preview * Use FlightControl Preview Workspace to test email layouts in a comprehensive HTML email workspace * Use VML Button Builder to create hybrid VML roundrect markup buttons * Use CSS Inliner to move stylesheet rules into inline HTML attributes * Test email layouts in dark mode using Dark Mode Simulator to ensure contrast issues are resolved
Get weekly email rendering fixes in your inbox
Subscribe to receive bite-sized, private email dev tips once a week. No spam. Unsubscribe anytime.
Social Distribution Kit
Authors: Copy this article formatted as an optimized Twitter/LinkedIn thread.
Fix It With These Free Tools
Apply this fix in 60 seconds
Use the free RenderOps toolkit — no signup required. 100% browser-side, instant results.
Read Next in Email Engineering
Email Preheader Optimization: The Hidden Revenue Lever
How to Fix Custom Font Fallbacks Crashing to Times New Roman in Outlook
Bypassing Gmail's 102KB Clipping Limit: The Complete Developer Guide
Explore the Complete RenderOps Suite
Verify, edit, and optimize your responsive layouts with 37 browser-based engineering tools.