HTML email templates that work in Outlook and dark mode

After more than 200 hours coding newsletters for one client, I’ve learned that email HTML has its own rules. Here’s what makes templates hold up across inboxes.

Why Outlook breaks layouts

Desktop Outlook on Windows renders HTML with Microsoft Word’s engine. Flexbox, grid, many CSS properties and background images don’t work the way they do in browsers.

• Use tables for layout, with fixed widths for columns
• Inline important styles; some clients strip style blocks
• Use conditional comments for Outlook-only fixes
• Keep the main width around 600–640px

Surviving dark mode

Some email apps invert colours automatically. A dark logo on a transparent background can disappear completely.

• Add a subtle light outline or padding behind dark logos
• Avoid pure black on pure white; slightly softer colours invert more gracefully
• Use dark-mode media queries where supported for full control
• Test in both modes before every send

Build once, reuse forever

A modular template with reusable blocks (header, article, product grid, CTA, footer) turns each new newsletter into an assembly job instead of a new build, and keeps every issue consistent.