Coding Restrictions for Email Templates

Coding Restrictions

Developing email templates can be a pain for developers because essentially we’re taking a step back in terms of knowledge. Simple HTML and Inline CSS are used when creating email templates, which means returning to your coding roots as modern day languages such as CSS3 and HTML5 can’t be used.
Also, the slick animations and effects you see on modern day websites that can be handled perfectly well by browsers are not supported at the moment by the majority of email clients. For example, Gmail strips out any CSS in the style tags, and any other CSS that isn’t inlined. Because of this, developers have to code email templates using tables and basic HTML in order for it to be viewed the same in all email clients. The design is also restricted by this, leaving designers forced to create a more ‘blocky’ layout, which can be tricky.

The general consensus among developers is that you should code using:

  • HTML nested tables
  • Inline CSS
  • Web safe fonts
  • Keep to a width of around 550px – 660px
  • Gifs if you want interactive elements

Things to avoid:

  • Javascript
  • HTML forms
  • Video or animations
  • Background images

Tips

Use a container table for body background colours

The ‘background’ CSS element often gets ignored by a fair amount of email clients, so to achieve the same effect it’s better practice to add your desired colour to the table column using the ‘bgcolor’ attribute.
Example:
<tr>
<td bgcolor=”#FFFFFF”>
insert code here.
</td>
</tr>

Use blank table rows and columns instead of margin or padding

Padding and margin act differently across the different email clients, which is why it’s much better to use a blank table row to get the same effect as this will work in them all.
Example:
<table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
<tr>
<td height=“20">&nbsp;</td>
</tr>
</table>

Empty cells in tables often cause problems to HTML authors. Browsers may display such cells without borders even if the other cells have borders. This is why we use HTML character entity ‘&nbsp’ to tackle this problem and fill the space within the table column.

Use tables within tables within tables

To be as specific as possible when targeting an element such as a table column or image within a table, it’s best practice to wrap everything within more tables. This allows you to get the email template pixel perfect.
Example:
<table cellpadding="0" cellspacing="0" border="0" align="center" width="600" "background: #fff;" bgcolor="#fff">
<tr>
<td width="600">
<table cellpadding="0" cellspacing="0" border="0" align=“center" width="600">
<tr>
<td><a href=""><img src="images/offer.jpg" width="600" editable alt="Get 20% off" /></a></td></tr>
</table>
</td>
</tr>
</table>

Testing

While standards support within email clients hasn’t made much progress in the last few years, there has been some small continual changes. Web-based providers like Gmail and Outlook are notorious for this, this means testing is key as an email template previously created might not look the same a year later.
Here at Clicky we test email templates using web based clients, but we also use the website www.litmus.com which allows us to test email templates in the vast majority of email clients that are available out there. This allows us to see any faults in the various clients, and then fix them before the template is used.

Written by Rich Tarr

Senior Front End Developer

Follow Rich on Twitter