New Spin Design

Below is a list of issues recently uncovered when trying to build a nice looking two column HTML email that complies with Outlook 2007. Some are minor but can be pretty puzzling until they’re pinpointed.

Notes for Outlook 2007:

• Redeclare font family: each nested table has to have a duplicate font-family: whatever declaration. Just applying this on the top level table does not do it - the style does not cascade down!
• Headings within lists bad: this did not produce very good results in my experience. Adding an <h5> within an <ol> caused the line height of the text to double within the <ol>. Using line-height: 1 did not undo it. My solution was to use a <strong> for the heading paired with a dose of <br>s.
• Disappearing background color: this is a biggie. If you nest too many tables or divs the background color of the td or table disappears. Simply using a <div style=”border-top: 1px solid black”></div> as a substitute for an <hr> within a table within a parent table caused this disappearing background color.

Note for Outlook 2003:

• Use image height and width declarations. When images aren’t loaded and dimensions on the image are missing, the image defaults to the max width to show all of the alt text. If your alt text is long you can see how this would become an issue.

Webmail (Gmail, Hotmail) Notes:

• Ignorance of <style></style>: They ignore any code in there even in the body! So there’s no way to style every <h1> the same in one swoop. The ugly solution is to use inline styles on every element. Create an HTML cheat sheet where you can copy and paste the headings and other elements from when building your email.