One of the most frustrating things I’ve had to do at my job is coding email designs so that they render properly in Outlook 2007. In the move from Outlook 2003 & Outlook 2007, Microsoft ripped out tons of CSS support (Guide to Email CSS Support). Since the office I work in uses Outlook 2007, it’s important that any emails we send out look fine in 2007. This has been quite the challenge, so I have 7 tips for others struggling with this.
- Use Tables
Welcome to 10 years ago. Forget everything you know about XHTML and CSS layouts. Use tables since Floats or Positioning are not supported. Be prepared to wade thru a lot of TRs and TDs. - Inline Everything
Inline for everything, never trust Outlook to carryover styles. Putting a Font-Family on a Table will not work, you’ll have to put it on each individual TD. Do the same for all of your Headings and List items as well. Speaking of list items… - List Items are fail in Outlook 2007
If you want a list item with a bullets, you’ll have to use a bullet character and a paragraph. My experience with list items in 2007 is it keeps the spacing but removes the actual bullet. - Use Margin, not Padding
If you are trying to gain some extra space, use an Inline Margin. Outlook 2007 doesn’t recognize the Padding property. - Background Images will not work
If you want a background-image in an Email, make sure you also give it a background-color so that it will break gracefully in Outlook 2007. Obviously this means that any important images in your email should not be background images. - Test
Test it over and over again. Make sure it displays properly in Outlook 2007. If it looks fine but is slightly off in other email clients, use some of the styles that Outlook doesn’t recognize to fix it. For example, if spacing is off, give it a padding (but leave the Margin). - Include a Link to a Web Version
Since not all email clients are created equally, include a link at the top of any email that takes the user to a version online. This way there is at least one place that you have control over the output of the design.
