HTML Email rules

CSS rules

Use inline styles - You should favour the use of inline styles over using the style tag as many email clients will simply strip out the <HEAD> tag where your styles live.

Inline CSS most of the time is applied directly on the <TD>

Use PADDING over margin (outlook will ignore padding)

Table Rules

You need to think 1999 coding when doing emails.

Reset the table - You should reset cellpadding, cellspacing and border to "0" for safety
e.g <table cellpadding="0" cellspacing="0" border="0"><tr><td>...content...</td></tr></table>

Use HTML attributes wherever can over inline styles (again think 1999 coding)

Some Outlook know issues are here ansd work arounds - Outlook workarounds

Layout rules

1. Use a "Wrapper" table around the whole email and set it to "width=100%"

and add a "id='wrapper'" for good measure and for targetting if css classes supported

2. Use a "Container" table around the central part of the email set to 600 to 800px and add a "class='container'" for good measure and for targetting if css classes supported

3. Everytime you create new layout within your email e.g full column, 2 column, 3 column etc. Create a new "container" table

4. Use ALIGN="center" over "margin:0 auto" - again use HTML attributes wherever can for safety

Image rules

Use absolute paths for all images (relative won't work)

In Outlook it will ignore units like PX - use attributes e.g width="290"

Responsive rules

Note: not all clients support responsive tables

2 Parts to getting the response to work

1. The "container" class will need to be made responsive with the use of a, for example, ".full-width class"

2. The <TD> will then need to have, for example, a "stack-column" class to tell it to stack and this will have to be set to "width:100%!important" and "display:block!important".

3. NOTICE: You will need to use the !important suffix, if not you won't overide you internal CSS width


<table cellpadding="0" cellspacing="0" border="0" class="container full-width" width="600px" align="center">
<tr>
<td>
...CONTENT...
</td>
</tr>
</table>
   
@media only screen and (max-width:600px){
    .full-width{
           width:100%!important
    }
    
    .stack-column{
         display:block!important
         width:100%!important
    }
}