Bulk Merge or Campaign Email Renders Differently on Various Email Clients/Readers

It is common for all people who design and know HTML that all Internet browsers across any operating system renders HTML and CSS (Cascading Style Sheets) differently. Although this is a known fact, it is not very well known though that aside from browsers, email readers such as the different versions of Outlook (Windows), Mail (Mac), Thunderbird (FOSS) and including Web Mail services such as Gmail / Google Apps, Live, and Yahoo renders HTML based email differently.

At the time of writing, a comprehensive list of the differences are documented over at http://www.email-standards.org/ , before an email template is created, it would be best to read on what each of the email readers and web mails do not currently support.

Here are some recommendations to ensure that the HTML template that you use for Campaigns and Bulk Merges render at an acceptable manner for almost every known browser, mail reader client and web mail currently used:

1. Use Tables in place of SPAN and DIV tags. Using tables ensure that no matter how the email reader reads the HTML code, all elements in the page will render at their correct places. This is very important when your HTML template includes text and images.
2. Use inline CSS. Using inline CSS as opposed to linking to one ensures that even if the receiver downloads their email then goes offline or if the web mail reader does not allow linking to other sites that the CSS implemented in the code will most of the time render correctly.
3. Use and link to the correct image size / dimensions. Although it is possible to resize images using HTML code, this is not recommended. Mail readers and web mail services do not currently read other IMG tag properties. This not only causes images to display in their actual size but also adds load times when the image is read, specifically high resolution images
4. Avoid Image backgrounds. Some mail readers do not read image backgrounds in HTML, this causes the background to get dropped and not be seen. Worst case scenario, this behavior will cause your text to sometimes not become visible or readable. To remedy this, ensure that even though you use a background image of a certain color, use a background solid color in your HTML that matches the image's general color to have a fallback when the image does not display.
5. Check for unbalanced tags. When tags that should be closed are not closed and overlap with other of the same tags, HTML will most of the time display in ways we are not expecting. Cleaning up a very complicated HTML to know if there unbalanced tags will take some time, before jumping into this scenario, make sure to clean up the HTML first using http://validator.w3.org/ using the "Clean up Markup with HTML Tidy" option to balance the tags as well as other HTML markup common issues.