If you ever needed to create an HTML based email, you probably came across one basic question: "How do I make sure the email is displayed to every recipient in the same way, while each recipient has a different email client (GMail, Yahoo, Hotmail, MS Outlook, etc.)?"
Well that's a very good question.
With web browsers, we are used to know that all of them display HTML in almost the same way (IE included). But email clients are not standardized as web browsers. Each email client implements HTML and CSS code a bit differently, if at all.
So the short answer for the question above would be: Simple is Better! This is the golden rule of building HTML for email clients. However, making it happen is not simple at all. It is a very frustrating procedure to create an HTML that will be displayed the same way by all email clients.
I had my fare share of frustration and in the spirit of sharing and helping others with theirs', here are a few tips on how to create such an HTML code:
- Layout should be based on TABLEs, not DIVs! - Email clients are "stupid" compared to web browsers and not all CSS properties are accepted. Keep you HTML as simple as possible using <table> tags and keep <div> tags to a minimum.
- Avoid using margin CSS property - Some email clients ignore it and some interpret it as padding! See next tips on how to add spacing.
- Use inline styling rules - Best not to use <style>...</style> in th HTML. Insert all your styling rules to the HTML tags like: <p style="color:#FF0000;">This is a red text</p>.
- Avoid using colspan and rowspan in tables - Again, using these attributes may not work in all email clients. Replace it with TABLE hierarchy. For example, if you need two cells with one on top of each other and both next to only one cell, use a TABLE inside a cell. Meaning: put two cells next to each other and in the second cell introduce a new table with two cells one on top of each other (two rows).
- Do not use background-image CSS property! - It may work on some email clients (mainly on web based ones), but it will not work on others, like MS Outlook. You can use background-color which can give you a solid color background, but no image background.
- Specify font-family CSS property everytime - Since the styling rules are inline, they are not always shared by other HTML elements. Best to declare the font-family for each HTML element that contains some text. This will make sure that all email clients display the same text font and not their default, which can be quite different from other clients.
- Get rid of unexpected space that comes with using TABLEs - When using tables with only the <table> tag, some email clients will add some default spacing and this can be very annoying and hard to debug. Best use the following tag for all TABLE tags: <table cellpadding="0" cellspacing="0" border="0">. This will ensure no unwanted spacing takes place.
- Insert space with empty table rows - Since we wish to avoid using margin CSS properties (see item #1), we can still introduce some spacing in the email using an empty table row like so: <tr style="font-size:1px; height:20px;" height="20">&nbsp;</tr>. This will give us a space with a height of 20 pixels. Note that we use both CSS height property and the HTML height attribute so all email clients will know what needs to be done. Also, we set the font size to 1 pixel and insert an HTML space ( ) character to ensure that this row will not be ignored if there is no content, like some email clients like to do.
- Validate your HTML and get rid of all errors - One of the most important tips I can give you. Use the official World Wide Web Consortium HTML Validator to check your HTML and deal with every HTML error it pops up. Clean, error-less HTML will guaranty easy email reading in all the different email clients.