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.
Here are few guidelines that will help you to create an effective HTML email:
Use Tables instead of divs
Avoid background images
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.
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.
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).