How do Outlook rendering quirks affect design?
Still have a question, spotted an error, or have a better explanation or a source we should cite?
You build an email that looks perfect in your browser, send it to an Outlook user, and it looks broken. That's because Outlook for Windows doesn't use a browser at all. It uses Microsoft Word's rendering engine, which means your CSS gets treated like Word formatting, not web standards.
This creates real constraints. Many CSS properties don't work at all. Padding and margin behave inconsistently. Images leave gaps below them. Buttons render unpredictably. Background images won't work without VML (that's an older graphics format Word understands). The max-width property you rely on in browsers? Outlook ignores it.
So The fix requires a different approach. Use table-based layouts for structure instead of CSS positioning. Use VML for backgrounds and buttons instead of CSS. You can write conditional comments that target Outlook specifically so you're not fighting the whole client. Check which CSS properties email clients actually support before you build, and test in Outlook alongside other clients.
Contributors
Who worked on this answer
Every name links to their profile. Every company links to their site. Real people, real accountability.
