HTML Email Campaigns
When it comes to HTML email campaigns, what you want to keep in mind is that tables are your friend… actually, your best friend! I generally use tables for every email I create at Brio Group. You need to make sure that you know the limitations of your users’ email client, whether it be GMail, Yahoo, Hotmail, Outlook etc.
A key point is to set the width in your table <td> tags. Don’t assume that if you don’t specify a width, the cell will just work it out, as I can tell you now, it won’t. Stick to pixels, percentages are not rendered properly in some email clients, especially Outlook 2007 which seems to have gone back in time. Avoid using CSS padding and margins on your cells – if you can get away with using a nested table to do it, then use that. You will get a much better result in the real picky email clients.
When setting a background colour to your email, avoid doing it in the <body> and <head> tags using CSS. Use it in a table that is stretched 100% with the <td> cell background. E.g. <td bgcolor=”#000000″> for a black background. Unfortunately, Windows Live is not playing nice and requires a little more additional coding. Simply place the below code into the <head> section of the HTML email and that should do the trick.
<style type=”text/css”>
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
</style>
Never use CSS style in the <head> tag. As much as you want to, and are used to, stay away from it. It generally gets stripped by the email client. Use inline styles instead, you will be surprised on what does work with CSS inline styles on <p> tags for example. Most developers like to keep using the horrible and outdated (this really should have the same standing as ye faithful <blink>), <font> tag.
With your CSS styles, don’t use shorthand! Email clients might not accept that as a proper colour for instance. E.g. <p style=”color: #000;”>. Always use #000000 instead of #000.
Images in emails … well, try not to use to many of them! Using excess images may well cause your email campaign to end up in the spam bin. Also, most clients these days by default do not show images when the email is received, the user has to enable them.
Hotmail, for some baffling reason, adds some extra pixels of padding below images. A simple hack for this is to give a style of the image display as block. E.g. <img src=”your image in here” style=”display: block;” /> This should remove the padding and still give you results in other email clients.
There you go, some basics to HTML email creations. On a last note, just be wary of screen resolutions and the fact that there is an outside container for email clients such as folder listings, tool bars etc… so keep your design within a 650 pixel width.
And… Don’t forget to test!
Yours in HTML,
Lee
