Definition
Email MS Outlook compatibility addresses the unique rendering challenges posed by Outlook's use of the Microsoft Word HTML rendering engine rather than a standard web browser engine. Outlook desktop versions render CSS differently from other email clients, with limited support for padding, margin, background images, modern CSS properties, and certain HTML elements. Achieving consistent rendering requires specific coding techniques such as table-based layouts, conditional comments for Outlook-specific styles, and careful CSS selection.
Common Outlook Rendering Issues
- Margin and padding properties partially supported — use cellpadding and cellspacing instead
- Background images not supported — use flat colour fallbacks
- Bulletproof buttons require VML code for Outlook desktop
- GIF animation support varies by Outlook version
- Web fonts not supported — system font fallbacks are required
- Certain CSS properties like flexbox and grid are not supported
Best Practices
- Use table-based layouts for Outlook compatibility rather than relying on CSS layout
- Implement Outlook conditional comments to provide Outlook-specific CSS overrides
- Use VML for bulletproof buttons that render in Outlook
- Test every email in Outlook 2013, 2016, 2019, Microsoft 365 and Outlook.com
- Avoid CSS properties known to be unsupported in Outlook and provide fallbacks where necessary
Related Glossary Terms
Accessible CTA (Email)
An accessible CTA is a button or link coded with sufficient colour contrast, visible focus states, descriptive screen-reader text, and a minimum touch target of 44×44 pixels.
AMP for Email
AMP for Email is a Google-developed framework that allows email messages to include interactive elements like forms, carousels, accordions, and live content. It turns static emails into dynamic, interactive experiences directly inside the inbox.
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.
Drag-and-Drop Email Editor
A drag-and-drop email editor is a visual interface that allows marketers to build email layouts by dragging content blocks into place without writing HTML or CSS code.
Dynamic Content
Dynamic content in email refers to content blocks that change based on subscriber data, behavior, or preferences within a single email send.
Email Accessibility Guidelines
Email accessibility guidelines ensure emails are usable by people with disabilities, following WCAG standards for screen readers, colour contrast, keyboard navigation, and readable content.