Pure360 – Top 10 HTML tips for email – part 1
…Episode 1 – The Email Menace
HTML for email is much like finding a time machine, hopping inside, pressing the big red button that says “DO NOT PRESS” and finding yourself back in the middle of the Oasis vs Blur Brit Rock years… *shudder*. The Internet as a whole has progressed, and the techniques for writing websites has really leapt forward in recent years, but unfortunately, HTML for email is still the same as it was when Wonderwall topped the charts.
This blog post is a list of the top 10 HTML tips when coding specifically for email. Here are my first five…
1. Use nested tables
Unfortunately, many email clients do not support Divs, and colspans and rowspans are best avoided, so the only real option that’s left is to use nested tables to really develop your emails so that they are cross browser/client compatible and are structurally sound.
Tip: Make sure that you indent your code correctly, as it makes it much easier to follow if you make a mistake and have to try and work out where the problem is.
2. Avoid using spacer gifs
Spacer gifs are often used by developers to stop an empty table cell from collapsing, making your email render incorrectly in the different clients. By putting in a clear gif at the correct width or height the image keeps everything sturdy, but the downside to this is that the “Images off” experience often suffers as a result.
There is a way around using spacer gifs however. By specifying the width or height of your spacer table, setting a font-size and line-height of 1px in the inline style, and putting a non-breaking space ( ) into the table, the table cell will be completely rigid without the need to use a messy looking spacer gif.
This is the code that you can use to achieve this:
<td width=”N” style=”width:Npx; font-size:1px; line-height:1px;”> </td>
For a horizontal spacer row simply exchange width for height in the attributes.
Want to check out the who’s who and what’s what of email marketing?
Read The Buzz.
Other post by this Author