Any designer who has ever sent their beautifully marked up newsletter to a variety of email clients knows the pain that is email marketing. Things just don't display quite the same in Gmail and Outlook as they do in a browser window. The industry rule of thumb is to go back to the 90s in terms of your code which means markup should be in tables and inline css. But that doesn't mean that your newsletter has to look like it came out of the 90s.
With a few key tips and tricks you can code beautiful email newsletters that display well with and without your images and in all email clients. Ready? Here we go.
- No background images.
Not in tables, not in css. Some email clients might display them for you but you should count on the fact that they are probably not going to display consistently. Background colors are A-OK.
- Display inline images block.
All of your images in your email should be inline. That is written out with the img tag. Outlook and I believe Hotmail both have a 'gap' rendering issue in that they add extra space after an image. This can cause havoc if you have sliced an image. Fortunately adding 'display: block' to the inline style tag of your image seems to correct this issue.
- Default display is NO images.
Bear in mind when you are designing your email that a large percentage of people are going to view it without images enabled. That means including alt text for every image, a background color is a nice fallback if your image is a header or footer. A width and height declaration can hold much needed space. Run some tests and remember that the default email display you should assume is no images displayed.
- Try to keep images intact.
There have been countless times I have chased an image two pixels this way and that way trying to get it to line up with it's counter part. The above tricks will help but so will clever slicing and design. If at all possible keep your images intact, don't slice ribbons in half or arms off the bodies because they will break in some email client somewhere so it's best to avoid if at all possible.
The SiteCM Newsletter component
comes with a template that is quite simple but comes with a css sheet that has many of the hacks to correct the strange rendering habits of the various email clients out there. The non-centering of Hotmail, the body duplication of Yahoo etc etc. We can't handle all of the troubles you might experience but we have given you a head start.Email on Acid
is a great website and fantastic resource for many of those quirks and idiosyncracies you might experience when testing your emails. That said TEST your emails. Send them at least to Outlook, Gmail, Hotmail and a mobile device. If you have access to a mac send them to a mac mail account as well. The more the merrier.
Start slow. Start simple. Before you know it you'll be coding amazing HTML emails your clients will go crazy over.