09/05/08
Best Practices for Coding HTML Emails
If you are a web designer you know the pains of cross-browser coding. We currently have 3-4 popular browsers (IE6, IE7, FF, Safari) to keep in mind when creating new pages and each will interpret your code slightly different. This is the source of much hair pulling in the design community. However, shortly after delving into coding HTML emails, testing with 3-4 platforms starts looking inviting. Let me explain…
There are a wide range of tools available for viewing email; from software applications like Outlook, AOL, Lotus Notes, Eudora, etc. to web applications like Yahoo Mail, Google Mail, Hotmail and others. Each one of these has the potential of rendering your code differently and all have to be taken into account when coding your emails. So if you have any hair left, here are some ‘best practices’ you can follow to help keep your end users’ experience as uniform as possible.
- Use tables to control your page layout instead of divs. You should be using divs and adhering to xhtml standards when coding for the web, but unfortunately this isn’t an option with email. Many email clients are years behind in css support so using old techniques are our only option. I know, I know, this is like nails on chalkboard for many of you. Note: percentage widths are best, but you may have to use a fixed width (don’t use 100% – use 98%, 90% or a fixed with)
- Do not use any css shorthand. Use individual properties.
- Use spans and divs sparingly.
- Use attributes within the <table> and <td> tags to control display. Such as border=”", valign=”", align=”", cellpadding=”", cellspacing=”", background=”" etc.
- Use inline styles as much as possible. Some email clients will ignore anything in the <head> tag or even in the <style> tag. Yes, this can cause duplication in your code.
- Place your style information in the <td> tag closest to your content.
- If you opt to use <style> to declare your css place it inside the <body> tag.
- Do not use a link element to attach an external style sheet. It will be ignored in most cases.
- Test you email in web browsers and email clients. By testing in IE6, IE7, Firefox, Safari, etc. you will have a good start. Take it one step further by sending a test email out and checking it in as many email clients as you can get your hands on. The more popular ones were previously mentioned.
- Test your emails with images turned off. Many clients have the images turned off by default. If you have white text on a dark image and the image isn’t visible your email will look like a blank message.
- If you find a ‘phantom pixel’ remove the spaces between your tag and the image. This is a legacy issue that is still around with some mail clients. If you are faced with this issue just make sure your tags have no spaces between them and are on the same line.
- Avoid using Javascript. Many clients will just ignore it.
- Don’t use 1×1 pixels clear gif for spacing. Using this will increase the changes your email will be interpreted as spam.
- Adhere to CAN-SPAM rules.
Resources
Delicious
Facebook
Flickr
MySpace
Twitter
YouTube
Thanks for sharing. Funny – I just sent out my first html newsletter for our company. I was using divs instead of tables – when i saw everybody reading it – it was all whacked.
next time i know