HTML Email

• Styling HTML emails is different in nature from styling web pages
• The approaches for styling web pages are not transferrable to HTML emails
• The options for styling HTML emails are limited

• Achieving consistency with even basic styling in HTML emails requires extensive testing in each of the supported email readers
• Test in all email readers early and often
• There are online services available to help with testing in different email readers 
  

• Outlook 2003 and earlier uses IE to render emails
• Outlook 2007 uses Word to render emails

Basic approach

• Table-based layout
• Inline styles
• No background images

Limitations

No background images        ==> Use foreground images                       Outlook 2007, Hotmail, Gmail
No CSS-based layout         ==> Use tables                                  Outlook 2007, Gmail
No colspan                  ==> Use multiple tables or nested tables        Outlook 2007
 
No style sheets             ==> Use inline styles                           Gmail
No width or height styles   ==> Use html attributes for width and height    Outlook 2007, Gmail
No padding                  ==> Use margins                                 Outlook 2007

No JavaScript
No plug-ins

No animated GIFs                                                            Outlook 2007
No image maps               ==> Split the image using a table               Gmail

CSS styles not supported

float              Outlook 2007, Gmail
position           Outlook 2007, Hotmail, Yahoo mail, Gmail
display            Outlook 2007
 
width              Outlook 2007
height             Outlook 2007, Gmail
padding            Outlook 2007

font-family        Gmail
 
background-image   Outlook 2007, Hotmail, Gmail
list-style-image   Outlook 2007, Hotmail

HTML attributes not supported

alt             <img>            Outlook 2003, Hotmail, Yahoo Mail, Gmail
background      <table>, <td>    Outlook 2007


cellpadding     <table>          Gmail
cellspacing     <table>          Gmail
colspan         <td>             Outlook 2007 

Styling details

Margins

• Vertical margins have a tendency to collapse, even in web browsers
• To keep the vertical spacing simple and predictable, use margin-bottom for vertical spacing around an element
• Avoid using margin-top, except for setting it to 0 when needed 
  

• margin-bottom needs to be overridden for Hotmail, for the following tags: p, h1, ..., h6, ...
• margin-top and margin-bottom need to be overridden for Yahoo Mail, for the following tags; h1, ..., h6, ...
• margin-top and margin-bottom need to be overridden for Outlook 2003, Outlook 2007, Gmail, for the following tags: p, h1, ..., h6, ...

Spacer divs

• For additional vertical spacing, add spacer divs 
  

<!-- Sample 14px-tall spacer div -->
<div style="height:14px; font-size:14px; line-height:14px;">&#160;</div>

• Have to specify height or they collapse in Firefox

For divs 1px tall

• Have to specify font-size or they're too tall in Outlook 2007
• Have to specify height or they collapse in Thunderbird 
  

Alignment

• text-align:left needs to be explicitly set for Hotmail in IE6 (the default is text-align:center)

ul

• An explicit left margin needs to be specified for Outlook 2003, Outlook 2007, Hotmail, Yahoo Mail, Gmail
• An explicit left padding needs to be specified for Hotmail, Yahoo Mail, Gmail
• In Outlook 2007, it's not possible to change the default margin

li

• An explicit left-margin needs to be specified for Outlook 2007, Gmail
• An explicit text-indent needs to be specified for Outlook 2007

Sample code

• The code shown below is intended to be used as isolated chunks of code that can be copied and pasted, and modified as needed
• Each chunk of code is self-contained; for the most part, it can be dropped anywhere in an email
• and it will render correctly

• Non-zero values can be changed as needed
• Zero values should almost never be changed: they're zero for a reason

• When a chunk of code has a set of styles with identical values (height:18px; font-size:18px; line-height:18px;), those values need to always match (if one is changed, all should be changed)

• Styling the content for a new email is a process of copying & pasting chunks of code, inserting the data, and tweaking the non-zero values as needed 
  

• The class names shown below (vert-spacer, horiz-ruler) are only there to make the code more readable (they're acting as comments)

<div style="text-align:left; font-family:arial,sans-serif;"> 
 
    <p style="margin-top:0; margin-bottom:3px; font-size:26px; font-weight:bold; color:#0A599E;">
        Primary Title Header
    </p>
 
    <p style="margin-top:0; margin-bottom:18px; font-size:20px; color:#666666;">
        Sub Title
    </p>
 
    <div class="vert-spacer" style="height:24px; font-size:24x; line-height:24px;">&#160;</div>
    <div class="horiz-ruler" style="margin-bottom:12px; height:4px; font-size:4px; line-height:4px; background-color:#0A599E;">&#160;</div>
 
    <p style="margin-top:0; margin-bottom:9px; font-size:14px; font-weight:bold; color:#333333;">
        Section title
    </p>
 
    <p style="margin-top:0; margin-bottom:12px; font-size:12px; color:#666666;">
        Paragraph text
    </p>
 
    <div class="vert-spacer" style="height:6px; font-size:6x; line-height:6px;">&#160;</div>
    <div class="horiz-ruler" style="margin-bottom:12px; height:1px; font-size:1px; line-height:1px; background-color:#DEDEDE;">&#160;</div>
 
    <p style="margin-top:0; margin-bottom:12px;">
        <a target="_blank" href="#" style="font-size:12px; color:#407AAC;">Link</a>
    </p>
</div> 

Forwarding emails in Outlook

• Generally speaking, avoid forwarding HTML emails in Outlook, because Outlook reformats them when it forwards them.
• If you receive an HTML email that you want to send to someone else, send it as an attachment. That preserves  the formatting.
• If someone forwards an HTML email to you, it's already too late; all that you can do at that point  is to ask the person to send it to you as an attachment instead

Hotmail lineage

Outlook Express --> Windows Mail ---|
                                    |
Hotmail --> MSN Hotmail ------------|--> Windows Live Mail --> Windows Live Hotmail (aka Hotmail)