Whats an email template ?
I am sure, you would have come across many emails from different companies in your inbox. This might be for a receipt, advertising or daily deals. You might have also marked some of them as spam. The html used to write this can be called as an email template.
Even though we are in the world of iOS/android sdks, HTML5/CSS, these templates still need to be written pure HTML 1.0 ( BASIC, BASIC..I cant stress this enough). This is because when your target audience reads your email, they might use the tons of clients out there and each
client displays the email in a different format.
How to start developing ?
Use very basic HTML.
<IMG>
Use attributes height, weight and border instead of style attributes.
Instead of:
<img src=”http://www.kmdarshan.com/envelopeTop.png” style=”width: 100%; height: 100%;”/>
Use this:
<img src=”http://www.kmdarshan.com/envelopeTop.png” width=”35″ height=”100″/>
Because some email clients might strip away the style attributes.
<line-height>
Use this for gmail, since the height attribute is stripped away for gmail.
Use line-height for other browsers.
<td style=”height: 60px;”><center><font size=”3″ style=”font-family: Georgia, ‘Times New Roman’, Times, serif; color: #73B1B3; line-height:60px;”>NAME</font></center></td>
<center>
Use this for centering text:
<center><font size=”3″ style=”font-family: Times, serif; color: #73B1B3; line-height:60px;”>NAME</font></center>
Instead of <text align>:
<td style=”text-align: center;”>NAME</td>
<font> and <size>
Use font for setting the font type.
<font size=”3″ style=”font-family: Times, serif; color: #73B1B3; line-height:60px;”>NAME</font>
Instead of:
<td style=” font-family: Georgia, ‘Times New Roman’, Times, serif; font-size: 24px;”>NAME</td>
Set the following :
<table cellspacing=”0″ cellpadding=”0″ align=”center” width=”105px”>
<background>
Adding a background image is not supported on outlook. You would either need to display it as a image, and then stretch it to display the whole block as shown below:
<td colspan=”2″><img src=”http://kmdarhsan.com/hadow.png” style=”display: block;” width=”35″ height=”10″ border=”0″ /></td>
What have I learned after developing templates ?
Always use minimal html. Tables are the best. Use styling only when the generic attributes are not available.
This is because the generic attributes are supported in most browsers. Outlook on mac and windows display differently (I have experience this).
Hacks:
They are good, but try avoiding them. What if you are working in a big organization where they refuse to alter the email body or headers.