HTML email rendering: what you need to know
Why do emails look different in Gmail vs Outlook?
Gmail and Outlook use fundamentally different rendering engines. Gmail strips <style> blocks entirely and only supports inline CSS, while Outlook on Windows uses Microsoft Word's rendering engine which lacks support for modern CSS like flexbox, border-radius, and background images. This means the same HTML email can look vastly different between the two clients. The safest approach is to use table-based layouts with inline styles for maximum compatibility.
What CSS properties does Outlook not support?
Outlook on Windows does not support border-radius, CSS flexbox, CSS grid, background-image shorthand, max-width on certain elements, float-based layouts, CSS animations, box-shadow, text-shadow, and many modern CSS properties. It relies on Microsoft Word's rendering engine, so table-based layouts are the safest approach. Use VML (Vector Markup Language) for rounded buttons and background images in Outlook via conditional comments like <!--[if mso]>.
How do I make my HTML email mobile-responsive?
Include a viewport meta tag, use fluid widths (percentages instead of fixed pixels), set max-width on your container table, use media queries in a <style> block for clients that support them, ensure font sizes are at least 14px for readability, and make tap targets (buttons and links) at least 44x44 pixels. Test with a narrow viewport around 375px to simulate typical mobile screens. Remember that Gmail on mobile does not support <style> blocks, so inline styles are your fallback.
Do I need dark mode support for emails?
Dark mode support is increasingly important as more users enable it on their devices. Without explicit dark mode styles, email clients may auto-invert your colors, leading to poor contrast or invisible text. Add prefers-color-scheme media queries to provide dark-friendly colors, use transparent PNGs instead of images with white backgrounds, and avoid pure black (#000000) text which some clients may invert to white on dark backgrounds.
