As a web designer, I actually do not frequently find myself working with email designs. So when my employer requested some HTML email templates, I had to do some research. I found a fantastic article on HTML emails that really helped me out. It was a bit long though, and I discovered some additional things along the way that I thought I’d share.
The first thing you have to do as a web designer when working with HTML emails is forget everything you know about modern coding standards. HTML email is years behind the curve. You’ll find yourself using inline CSS with limited shortcuts, tables instead of divs, and even deprecated attributes that haven’t been used in years.
The second thing you have to do is settle on a simple design. If you thought cross-browser testing was a miserable experience with four to five browsers (Safari, IE, Firefox, Chrome, and maybe Opera… plus mobile if you desire) try the dozens upon dozens of different email clients that all render differently! There are some good resources out there for cross-email-client compatibility testing such as Campaign Monitor or Litmus, but most charge, and if they don’t, they have a lot of restrictions like frequency of checking.
So here are the secrets to making your emails look good across all of your major email clients:
1. Use Tables For Layout because floating and positioning doesn’t work all that well. If you need something to appear next to another item (such as an image next to text) you should still divide that up into two tables. I know I know, it goes against everything you’ve ever known about modern coding standards and practices. But trust me, it’s the best way to go.
3. Don’t Shy Away From Deprecated Attributes like width and border for your tables. When in doubt, just include it, because W3C standards do not really apply in the same way for emails as they do for websites. I always double my declarations. If I want my table to have no border, then I put that in my inline style declaration, and as a border="0" within the tag.
4. Avoid CSS Shorthand like "font: 14px Arial;" and instead do it longhand like "font-family: Arial; font-size: 14px;". Some email clients won’t read the shorthand CSS, though admittedly a majority do.
Here’s a bare, one column template that you can use with a single h1, h2, p, and a tag. Notice the XX and YY for your own personal preferences. The 98% width on the main table prevents email client bugs that create horizontal scroll bars.:
<html><body> <table style="width: 98%;"><tr><td valign="top" align="center"> <table style="width: YYpx;"><tr><td valign="top"> <table width="YY" cellpadding="0" cellspacing="0"> <tr> <td style="width: 600px;" valign="top"> Header Content Goes In Here </td> </tr> <tr> <td style="width: YYpx;" align="left" valign="top"> <h1 style="font-size: XXpx; color: #XXXXXX; font-family: XX; margin: XXpx XXpx XXpx XXpx;">Enter Your Header Here</h1> <h2 style="font-size: XXpx; color: #XXXXXX; font-family: XX; margin: XXpx XXpx XXpx XXpx;">Enter Your Subheader Here</h2> <p style="font-size: XXpx; color: #XXXXXX; font-family: XX; margin: XXpx XXpx XXpx XXpx;">Enter Your Main Content Here</p> <a href="" target="_blank" style="font-size: XXpx; color: #XXXXXX; font-family: XX; margin: XXpx XXpx XXpx XXpx;">Enter Your Link Here</a> </td> </tr> <tr> <td style="width: YYpx;" valign="top"> Footer Content Goes In Here </td> </tr> </table> </td></tr></table> </td></tr></table> </body></html>
In a future post, I’ll discuss ways to avoid getting your email marked as spam, as well as other best practices for making a good marketing email.