…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.
3. Use inline styles
Not all email clients allow you to reference style sheets, and some strip them out entirely, so the best way to get around this is to make sure that all of your most important styles are set inline within the table cell itself (you can use span tags with inline styles, but if the template is edited via a visual editor can sometimes strip this out and revert all text back to default).
This relates to everything from width and height, to font type, font sizes, colours, font weight and pretty much anything else that you would usually use a stylesheet for.
4. Make as much content as possible text (60/40 ratio)
Getting emails to inbox is the main objectives for email marketers, and one of the key deliverability issues is what is known as the 60/40 ratio. This means that your email should be weighted 60% or more text to 40% or less images, as otherwise your email can be picked up by spam filters and binned before anyone even sees it.
The basic rules for judging this is to quite simply, make as much of your email text as possible (without diluting your design or message of course).
This means, for instance, instead of using images for your navigation bar, use a table with a background colour and real text.
Don’t put important ‘Call to action’ text on an image. Make it real text next to, above or below the image.
Instead of inserting ‘Read More’ buttons, make them text… etc, etc.
There’s many ways in which you can increase the text/image ratio, and not only will you start to reach more inboxes, but it will also increase your “Images off” experience for the recipient and boost click-throughs.
5. Use a background table and wrapper table
If you wish for your email to be center aligned and/or have a background colour in email clients you need to have a background table that is set to a width of 100%. Your colour style can then be applied to this table.
Inside this background table, you should then make another table with the width that you want your email to be (generally no wider than 600px). You should be building your email structure within this wrapper table, which can be aligned to be centered.