Tips for creating templates
You are designing templates for e-mails in HTML. In principle, HTML is a standardized language. Unfortunately, however, not all HTML is correctly interpreted by the different e-mail clients and there are even some HTML tags and codes that are not supported by e-mail programs, such as <form>. Especially email clients such as Lotus Notes and Outlook 2007 support very poor HTML.
Therefore, the most important tip is KEEP IT SIMPLE. Limit your design to simple CSS with the most current styling codes. Do not try to use something advanced and complicated, because your effort will not be seen by most of the email recipients.
Furthermore, you should know that most recipients read their e-mails in the small preview pane of their mail client, without much scrolling. Keep also in mind that most of the time images are blocked when an e-mail arrives.
Ten commandments
While designing your template, even before inserting ADDEMAR tags, keep in mind the following ten commandments:
-
Design within a maximal width of 600 px. Most email client preview panes are not larger than that.
-
Consider the upper left corner of your e-mail as the most important part. If a recipient does not scroll, he will only see the upper left corner.
-
Avoid to use too much images, foresee enough text to make sure every recipient gets the main message of your email, even the ones that receive their email with blocked images.
-
Include the following elements:
- a link to an online version. This is the ultimate workaround for ensuring recipients will still enjoy the most creative and interactive experience.
- an unsubscribe link. This is a legal privacy issue. Put it in a prominent place, to avoid recipients hit the "report SPAM" button instead of unsubscribing.
- a sentence asking the recipient to add the from address to his address book, this to avoid your next e-mail will be flagged as coming from an 'unknown sender'.
-
For text styling, use as much as possible inline CSS that you repeat in every <td>, not just in the <table> tag. If you really want to work with a general CSS, put it in the <HEAD> and in the <BODY>. An example of inline text styling:
<td style='font-size:11px;font-family:arial;font-weight:bold;color:#000000'>put here your text</td>
-
Do not use CSS positioning, but use tables instead. Keep the general structure of your email as simple as possible. Do not work with <div> to create the structure.
-
Do not use flash or javascript.
-
For pictures, use jpeg as much as possible: gif might give problems with transparancy.
-
Limit the use of background images. Keep in mind that white and light grey text may become unreadable if the background image or color is not rendered.
-
If you want to use a body background color, put it in a big <div> around the email (width=98%) and repeat this colour in the <body> tag and in every <td>.
VALIDATE your HTML, insert ADDEMAR tags and then TEST, TEST and TEST.
Test as much as possible in different mail clients: create yourself an account on Livemail (Hotmail), Gmail and Yahoo and control if the e-mails are rendered as you'd meant they should appear. Testing in webmail environments at Telenet and Skynet might also be very valuable. Install Outlook 2007 or Lotus Notes on your computer and verify the rendering there too.