Web Designers often create HTML Email Templates and face the problem of its compatibility on Email clients and Webmail especially. It might be like, Its running good on Yahoo, AOL. But fails in Gmail. Quite often, HTML Emails fail to load on Outlook 2007 and Outlook 2010.
I’ll like to share some tips using which one can create successful HTML Emails. So that your HTML Email loads properly in all the Mailboxes and Email clients
- The first basic rule of HTML Email is one single file, that is you can’t attach a style sheet. And you shouldn’t probably call it too, you should simply include something like
{code type=HTML}<style type=”text/css”>.
/* Your Style sheet */
</style>{/code}
Within the <head> of your Email HTML Template. But there is a big problem with it, Gmail doesn’t supports a style sheet, its only supports inline CSS. Thus you’ll need to convert it into an inline type with no external references to style using #Tags. That is something like {code type=CSS}<p style=”font-family: “Verdana”, Arial;”>{/code} Also, attachments are often stored in randomly named temporary cache folders by some email programs. They also hog a lot of bandwidth (especially when they bounce) so attachments are not the way to go. Simply upload your images into a public-accessible web sever and call your Images from there. Also remember not to resize the Image, stretched images may not render properly. All graphics should have their correct dimensions. - Another thing important is, use as less CSS as you can . Desktop Email clients, mainly Outlook 2007 and Outlook 2010 doesn’t support most of the CSS. Outlook often converts your DIVS to paragraphs, so your DIVS will be messed up. Also, Avoid using “margin” or “padding” CSS properties in your TABLE tag. Cellpadding and Cellspacing attributes are generally safe but margin or padding will often be added to every TD within the table. Also, Outlook 2007 and 2010 impose a 2-pixel height minimum for table cells. So, for example, if a table cell contains a 1-pixel transparent gif and a background color, your ‘horizontal line’ will appear thicker than expected.
- Tables is the safest thing to use in HTML Email. Do not rely on CSS based layouts. Make Email layouts completely based on Tables. You may also nest tables in your HTML template. Its completely safe.
- One more thing important is, don’t have too wide templates for your HTML Email Template. We are not designing HTML sites here. The width should exceed 600px I believe. Think small!
- After you are done you can test you email in virtual Email simulation and testing websites. One good site I came across was http://www.emailonacid.com, here you can see how your Email will look in various Email programs.
I hope the above points help you. Good luck!
