So you want to create a HTML email that looks good for everyone that reads it?
It’s not the easiest job in the world and there will always be some people that can’t see the full beauty of your creation, but following these rules will ensure it looks good to most.
I compiled it from hours of research, experience, and of course good old trial & error. Hope that it’s helpful. 
- Use tables for layout
- Don’t use DIVs at all.
- Don’t use CSS (there are a small handful of inline ‘style=’ exceptions below) and never use classes.
- Do not use a list of <style>s at the top of the page. There is one exception below ** If you do use them, they must be beneath the <body> tag. (some email clients strip the body tag out)
- Don’t use background images at all. Background colours are fine, these are referenced ‘bgcolor=”#……”’ on the table cell. Make sure you apply the “bgcolor” to the <td> and not the <table> tag. Some mail clients won’t read this otherwise (especially on mac computers).
- If you have a table inside another table with a background colour, make sure that each td has a colour attached to it, on the table outside and inside (otherwise it sometimes doesn’t render out the colour)
- For an entire background colour to the page containing the email, make a table 100% width, with a bgcolor assigned to it, and then have the main content in another table within this, at the fixed size. Don’t use body bgcolor, as a lot of email programmes strip the body tag out.
- The best width of an email is debateable, the standard seems to be 600px. There are no rules apart from don’t make them really wide. They are usually narrow so that people can read them using the ‘preview’ pane of their email client (without having to open the email as a new window)
- I’ve read that you shouldn’t use colspan or rowspan for emails, but I’ve used these with no problems.
- Don’t use Doctype. Start the code with <HTML>. (else the whole page will not show up in the likes of Excite email, in IE)
- Use <font> tags around all text, with ‘face’, ‘color’, ‘size’ attributes. If a size is required that isn’t correct at size=”1” or “2” then add ‘style=”font-size:11pt” (or whatever size) to the font tag. But have the font size (1,2 etc) as close as possible for email clients that can’t read the css. Can use nested tags, so one font tag could be surrounding a large block of text giving it the size, and another can be within that giving it colour, face etc.
- Use ‘pt’ instead of ‘px’ for font sizes. This just seems to give a more consistent result across the email clients.
- Use alt tags on images saying what they are about, unless they are purely decorative. Also, name images with relevant filenames. (you will see this info before downloading the images, or choosing not to view images in your email program) Don’t use images as text for important content, always use live text for this. Adding ‘[image: what the image is]’ or [image of something] in the alt tag of the image is the best way to go. This is useful for people to read before they download images or choose not to within their email cient, so they know what it is.
- Save images out as small a filesize as possible. Use limited palette gifs for flatter coloured images and compressed jpegs for photos, compress them as much as possible without them looking too awful.
- If gaps are appearing in tds (usually in hotmail) then ensure the td has a height assigned to it to fit the image/content.
- If there’s a 3 pixel gap below an image in Hotmail, put ‘style=”display:block;” on the image above the gap to fix it.
- If gaps still a problem in hotmail, then add ‘style=”font-size:1px” to the cell. Sometimes an assumed font size will add space to a table cell, even if there’s no text in there.
- Remember that <p> tags will add space/gaps, so strip them out where not needed. **Yahoo does not adhere to this rule as another stylesheet for the yahoo site overrules this, and the margins around a <p> will not show. <p>’s ought to have space around them, and as other clients will show this, add a Style at the top for the benefit of Yahoo. Have to use ‘!important’ afterwards though for it to be read. So
p { margin-top:0.7em!important;
margin-bottom:0.7em!important; } - Watch for Hotmail and line-spacing. Hotmail has it’s own style for this. I had a line spacing style that was in the strong tag which had a p tag outside of it. When I moved the inline style to the p tag, Hotmail read this.
- Links need to be something more than ‘#’ for Yahoo to show them up as links (for testing)
- Add in ‘style=”text-align:right” etc. to tds with anything other than left aligned content (e.g. right, or center) E.G. <td align=”right”…..add style=”text-align:right” > to ensure the cell displays content to the right (for clients like Excite, which don’t do this otherwise)
- Put <font color=”#whatever”> tags inside a link – just before the link text and </font> just after. ALSO put in “style=”color:#whatever;” to the <a> tag itself. These two measures will ensure that a link colour and it’s underline will display in the correct colour. E.g. <a href=”#” style=”color:#cccccc”><font color=”#cccccc”>LINK HERE</font></a>
- If using CSS (but you shouldn’t be apart from the exceptions in here), don’t use css shortcuts, eg. “margin:0px 2px 0px 7px”. You have to use margin-top: 0px; margin-left:7px; and so on.
- Font colours have to be referenced with the hex ref, and using 6 characters. Eg white = #ffffff. Can’t use the abbreviated 3 characters, or words, like ‘white’ as you would with web build.
- Remember characters, e.g. ‘£’ needs to be £, and ’ needs to be ‘ etc. etc. otherwise will display strangely
- Supply a link to a HTML version online in case the reader has trouble viewing the HTML email. (this should be the same code, using the rules here, your email will display perfectly on browsers too)
- Font size <font size> needs to be outside a link rather than within it, else the link’s ‘underline’ will appear quite low down and not directly underneath the link on the html version (online) and look a bit odd.
- Ensure tables are accurate in their width’s, use a calculator to work out that the cells add up to what you expect, otherwise gaps will appear etc. For accuracy, it’s better to use numbers rather than percent for widths if your table has more than one cell.
- Remember to include an ‘unsubscribe’ link & a permission reminder.
- Include a ‘text only’ version of the email as well the HTML version, otherwise some people won’t be able to read it at all.
- Finally; test, test, test. Use as many email clients as you can. Results will differ so get it looking as good as you can in as many as you can before sending out your final polished email.
