We are always working with our Publishers’ email templates, whether it’s integrating our LiveTags, doing template troubleshooting, or building our own email templates, we are consistently working with or writing HTML code for email. Developing an HTML template for email can be more of a pain than it is when developing for websites. We’d like to share why it can be so troublesome to code and provide some tips and tricks to overcome these pains.    

Depending on the email client, device, and environment in which an email is opened, the HTML template will be rendered differently. Many clients such as Outlook and Gmail will take the beautiful HTML code you’ve written and render it into something that looks like it’s been sitting in the back of your refrigerator for a few years. Non-compliant CSS, ineffectual element attributes, font resizing, lack of recognition for shorthand, and extra extra extra…did we say extra?…padding are just some of things that must be accounted for when developing an email template.

Always use tables for layout: Many popular clients lack support for CSS. In addition, some browsers (such as IE) allow Javascript to be run in CSS files, which can lead to security issues not commonly found in email.

Always use inline styling for layout:  To ensure you get the layout you want, always use inline styling (e.g. style=”…;”). And when using inline style never use CSS shorthand. Email clients don’t seem to play well with shortcuts.

Use width element to control table widths:  It is best to use specific width values within <table></tables>. Without width values irregular table behavior may occur, such as rows expanding the full widths of a page (whether viewed in preview pane, regular email, browser, or mobile client).

Don’t use empty cells to add spacing:  We know there are many people out there who use empty rows and cells as a way to create spacing within the layout. <td></td> cells should never be empty. Some email clients will ignore the fact that you’ve created a cell with height=”5000000” and never add the empty space you intended. A simple fix of placing an empty anchor tag within the cell solves this problem (e.g., <td><a> </a></td>).

Use style=”display: block;” in <img> tags to get rid of extra white space:  When rendering images in a table cell an email client will sometimes add extra white space in the form of a line break immediately after the image. To prevent this from happening always include the inline style display: block to your <img> tags. (e.g., <td><img src=”www.liveintent.com“ style=”display: block;”></td>)

Always remove space between <img> and </td> tags to get rid of extra white space:  Oftentimes, extra space is caused when using <img/> tags to place an image. There are two tricks to prevent this from happening. The first is to make sure that there is no space between the closing image tag and closing cell tag (e.g., good = <img src=”……”/></td>, bad =  <img src=”…..”/>     </td>).

Always close element tags (<td>, <img>, <tr>, etc) to ensure cell layout:  Many email clients will not recognize that an open <td> element does not have a corresponding </td> and will ignore the cell layout. This goes the same for most element tags that can be found in your email template. Make sure to close them.

Nested tables are your best friend. USE THEM:  Sometimes applying a certain type of layout formatting such as padding, margin change, or similar, causes the change to occur to not just that cell but also the whole row you are working in. To overcome this issue, always use another table in the cell you are modifying if you want to apply layout styling specific to one area of a table. For example, padding-top will always be applied to all <td>’s in a row when specified in just one <td>. Create a nested table within the <td></td> that you are trying to modify.

Use alt, height, and width for ALL images to ensure layout when images aren’t loaded:  If images are not loaded in an email, the image areas of your template where width and height aren’t defined will collapse and break your layout. Just do it. It’s good practice.

SOMETIMES one ends up having issues dealing with one specific email client. To help you out, here are some client specific tips to get your emails looking the way you want them to.

Microsoft Outlook

Background images, animated GIFs, and much of CSS is not compliant in Outlook

margin-top CSS style rarely works correctly in Outlook and Hotmail.

<td> tags that contain images shorter than 12 pixels tall must always have the image height specified within the <td> tag, as well as the <img> tag. Otherwise, Outlook will often add unexpected vertical padding below the image.          

Gmail 

Gmail strips out <style></style> tags and/or anything in the <head></head> section of an HTML file.

iPhone & iPad

When coding for iphone/ipad use html {-webkit-text-size-adjust:none;} in the <style></style> section of the template