Emailer Design Guideline - An Overview

Web safe fonts The very basic is to always use web safe fonts for Email (it is true for any kind of HTML document which is meant for online purpose). Web safe fonts are universal hence can render without any problem on any PCs worldwide.

Always use inline style Allways use the style attribute in the relevant tag. See the example below-

Example 1
<P STYLE="font-size: 10pt; color: green"> Example of an Inline Style</P>
Example 2
<h2 style="background-color: #CCCCFF; > Generic Font Families </h2>

Code in Table style: This classic layout style is safe and secure in this case.

For CSS coding it is advisable to write CSS codes in the HTML file itself. An external CSS file called in the document will not be supported well. Also test your file well on multiple platforms as all CSS tags are not supported well in all Email recipients.

Left text alignment is default text alignment and supported by most of the email recipients.

Assigning hyper-linked text a specific color value, always keep it inside font color tag. For example
<font color="#color code">hyperlink text</font>.

In absence of this code the hyper-linked text will more likely convert to default blue color (#0000CC) on recipients end.

Heading as an Image Never use heading as an image, since images are blocked in most of the cases your heading will not appear this will leave user with incomplete message.

Don't use big image using big image or images images on the top of Emailer is a No No. Since images are blocked in most of the cases, The images section will appear as a vacant space to the recipient.

ALT Tag Don’t forget to put Alt tag in image Tag. Because in case image is blocked it gives an indication to the reader as what the image is about.

For example
<img src="logo.JPG" alt=" company name logo">

In above example logo.jpg is a Company Logo, company name logo in Alt tag will indicate the user that the image is a company logo.

Starting with ALT Tag Starting EDM with a appropriate HTML or Alt tag is a good idea since it encourages reader to go through the email. Here are two reasons why?

One Gmail snippet:( It is the grey text follows immediately after the subject line) Our Alt text or very first HTML text appear immediately after it. Thus it makes the message more meaning full for the reader.

Outlook preview pan: It also follows the same rule.