Rendering in Outlook
Designing an e-mail perfectly tailored to your readers’ interests can take a sizable amount of time. But when a seemingly minor task takes hours because of rendering issues, inconsistent standards across multiple e-mail clients are highlighted. Most often in the spotlight is Outlook. Although it has over 27% market share (as of June 2011), Outlook 2010 is the only e-mail client to use the Microsoft Word rendering engine. Which means it poorly supports CSS float, position, margin, padding, and background images.
So what can you do?
Float and position
- Avoid these CSS properties. Instead use the align attribute in the image tag.
- Use tables instead of CSS. Set the width of each cell, not the width of the table. Instead of margin and padding, use nested tables.
WHY? Float and position are unsupported in Outlook.
- Include background element on both the “wrapper” table and body tag OR apply inline styles to fill in body background images and use background element on only the “wrapper” table.
WHY? Outlook 2010 does not render background images on tables/cells and requires inline styles or a background element applied to the body. Gmail, AOL Mail, and Hotmail require the background element on a wrapper table and ignore the body background element.
- Set the cell widths in your table to keep the structure of your layout even when images are not displayed.
- Include the height and width of each image – and make sure images are sized accordingly before uploading.
WHY? Some e-mail clients will display the true size of the image, ignoring the coded dimensions.
- Set a margin for every paragraph, because each email client has different defaults.
- Don’t use shortcuts for CSS font ― or HEX colors for that matter. Avoid @fontface and stick to fonts that are pre-installed.
WHY? Several email clients don’t support CSS shorthand.