A Beginner’s Guide to Create HTML Emails

Common FAQs

When you start creating HTML emails, few questions may surface like:

• Which software tool the user will use to see the email
• Will the user use Desktop Software like Outlook, Thunderbird, Eudora, AOL or Lotus Notes.
• Will the user use web-based email services such as Yahoo, Google Mail or Hot-mail.
• Whether to use the current coding standards like using with more CSS styles or <table> and less CSS styles as in the old standards.
• Whether to use external CSS, Javascript, Flash etc.

Here are few guidelines that will help you to create an effective HTML email:

1. Use Tables instead of divs

   Use tables instead of div’s as div does not work correctly in HTML emails.

2. Avoid Javascript

   Do not use Javascript in your HTML emails as some of the email clients treat that as security risks and will delete the Javascript. This can cause your HTML to display incorrectly as the Javascript will not be working.

3. Avoid Flash

   Avoid using EMBED tag used for embedding flash in your HTML. We can say that avoid using flash at all in your HTML email.

4. Avoid background images

   Background images should be avoided in HTML as these are not displayed correctly in most of the email clients whether desktop or web-email.

5. Specify image attributes:

   Use alt, width and height elements for image tag so that  in case the image does not load, the alt text can be seen and also as the width and height  of the image are specified, the HTML will be displayed properly even when the image does not load.

   For e.g. <img src=”http://example.com/images/abc.jpg” alt=”some image” width=”120” height=”120” />

6. W3C compatibility

   Your HTML code should be compatible with W3C standards.

7. Fixed Width:

   The Width of your HTML emails should be fixed, preferably around 500-650 pixels. The height can vary.

8. Use Inline styles:

   Do not use CSS styles as classes or id’s. Give the style in the <td> itself- inline styles. If you have to give different styles to different text written in a single <td> you can assign the style to a <span> also. In short you  have to provide style to the element itself and not use classes.

   For e.g. <td style=”font-size:11px;”>This text will appear in font size 11</td>

9. Image Maps

   You can use Image Maps in an HTML email as they are accepted by the email clients.

10. Test on all browsers

    All the browsers should be given equal preference while testing the HTML. Test the email on all mail clients

    Test the email on all desktop (Outlook, Thunderbird, Eudora etc.) as well as web based (Yahoo, Google Mail and Hotmail etc.) email clients. If the email shows up properly in one, it does not signify it will show correctly in the rest.. If your HTML is displaying properly in Firefox and Internet Explorer, then you can test it on the web-based email services like Yahoo, Google Mail and Hot-mail. Fix any issues with these mail clients.

    For instance, in Hotmail, when you are using images inside a <td> you may find that in Safari, Firefox and in some other browsers  there maybe  a 1px gap between two rows (<tr>). For fixing this you have to include style “table image(display: block;)”. This means that all the images inside the table will be displayed as block and the space issue will be resolved .

    If the HTML you have created is displaying properly in browsers, you will need just a small amount of minor tweeks to make it compatible with the email clients (if need be).