Designing Email for Outlook: Practical Workarounds
Outlook is notorious for inconsistent HTML/CSS support, especially on desktop where it uses the Word rendering engine. Designing for Outlook means embracing conservative techniques and thorough testing. Here are the practices that minimize surprises.
1) Table-based layout
Use tables for structure with fixed widths and inline styles. Avoid floats, positioning, and complex nesting. A single-column layout is safest.
2) Inline styles and bulletproof buttons
Inline critical styles and use table-based buttons with background colors and borders. Provide text-link fallbacks for all actions.
3) Images and backgrounds
Avoid background images; they often fail. Use actual image tags with alt text and set width/height explicitly. Don’t rely on CSS filters or blend modes.
4) Spacing and alignment
Rely on table cell padding and spacer rows instead of margins. Outlook handles margins inconsistently. Test line-height carefully for typography.
5) Dark mode and high-contrast settings
Expect aggressive color changes. Use strong contrasts and avoid subtle grays that wash out. Ensure logos have versions that remain visible when inverted.
Key takeaway
Conservative HTML wins in Outlook. Tables, inline styles, bulletproof buttons, and explicit sizing keep layouts stable and readable.
Known quirks
- Margin support is inconsistent—prefer padding.
- Background images often fail—use solid colors.
- Media queries limited—design responsive with percentages.
- SVG support varies—provide PNG fallbacks.
Testing checklist
- Desktop Outlook (multiple versions)
- Outlook Web Access
- Windows High Contrast mode
- Images off, zoom levels 100–125%
Example snippets
Button (table‑based):
<table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#2563eb" style="padding:12px 20px;border-radius:4px"><a href="#" style="color:#fff;text-decoration:none;font-weight:600">Get the template</a></td></tr></table>
Spacer: <table role="presentation" width="100%" cellpadding="0" cellspacing="0"><tr><td height="16"> </td></tr></table>
Conclusion
Prioritize stability over novelty. With table layouts, inline styles, explicit sizing, and thorough testing, Outlook becomes manageable—and your emails stay usable for everyone else, too.
FAQ
Can we use media queries? Limited support—use them cautiously with fallback widths and simple stacking.
Retina images? Yes, but set explicit width/height in HTML to avoid layout jumps.
Web fonts? Assume fallback system fonts; choose a safe stack for consistency.
