Tips for designing emails to be compatible for Microsoft Outlook

The first thing you need to understand when designing and coding for Outlook is that the usual rules do not apply. Forget all your best practices for CSS – go back to 2001 coding practices for an idea of where your head should be. Note that some of these things might work in Outlook, but I advise against them because in my experience they do not work consistently, and it’s embarrassing to get an email back from your client asking why it broke when they sent it.

General “best practices” for Outlook 2007:

Forget about separating content from design with CSS. Build your emails with tables and spacer gifs. No divs.

No background images, only background colors. If you want to have HTML text over an image area, you’ll have to make the area behind it a solid color so you can slice it out of the layout.

You can use basic styles, but use them inline attached to each tag, not in the header. Don’t get fancy – a lot of what works in a browser will not work in Outlook.

Don’t use padding, only margins. Padding does not work properly.

Keep your code as simple as possible.

Optimize your email for ‘images off’ mode, which is likely to be default for your recipients. If you don’t define a height for images, they’ll collapse vertically, moving your text content up. Do specify width though.