I wrote down some notes on building html-based emails for myself and I thought I should post them, since it looks like people are having trouble with html emails. There’s probably nothing new here, but maybe it will be helpful to someone.
Since you’ll need your email to render properly in Microsoft Word’s html rendering engine (used in Outlook 2007), everything must be built using tables.
But that sucks, horribly sucks! you say. I respectfully disagree.
“So the thing to do when working on a motorcycle, as in any other task, is to cultivate the peace of mind which does not separate one’s self from one’s surroundings. When that is done successfully, then everything else follows naturally. Peace of mind produces right values, right values produce right thoughts. Right thoughts produce right actions and right actions produce work which will be a material reflection for others to see of the serenity at the center of it all.”
– Robert Pirsig, Zen And the Art of Motorcycle Maintenance
As long as you approach the problem with a negative attitude and feel like what you’re doing is wrong and dirty, nothing good will come out of it. At the end of the day you’ll just have a broken layout and you’ll be really pissed at Microsoft.
Tables are not that bad, even though everyone says so on the Internet. You’re only working on a single-page layout – not 5 different Drupal templates in a situation where the design changes every other day – so using tables will not really kill you.
Take it as a challenge. Build a nice looking newsletter with the simplest tools you have in your toolbox.
The important stuff
- No floats, no positioning, no background images (bgcolor property works though) no cool fonts (except in images), nothing fancy. Make sure your designer knows this, otherwise you’re pretty much doomed.
- Download the MailChimp templates and use them to build your own. It’ll save you a lot of time. Also, take a look at how they’re built, you’ll learn some cool stuff.
- For testing emails in Outlook 2007, use this macro. Incredibly useful.
- You can use non-inline CSS in a separate stylesheet if you use premailer afterwards. It’s a really awesome tool that makes all your styles inline and does some other stuff too.
- Maximum width is 600px, according to MailChimp. Haven’t tested myself but I tend to trust them.
- Tables and cells should always have a width defined: <table width=”200″>
- Images must always have dimensions and alt text defined. The email clients of most people won’t display images by default, so don’t expect everyone to see them.
- For spacing, use spacer <td>’s with fixed height and width instead of margins/paddings. Cellpadding/spacing also works.
- Use row/colspan or nested tables for more complex layouts (my notes say use nested tables instead of colspan, but I don’t remember why I wrote that, last time colspan worked well – update: nested tables are simpler to use in complex layouts).
- I personally use double line breaks instead of paragraph/heading bottom margin, but there has to be a better way..
- I’ve yet to figure out how to get image paddings/margins working, but manually adding the paddings in Photoshop does the trick too.
- When all else fails, use images instead of text.
- Know which email clients your target audience uses and test accordingly.
- Add the “Can’t see the email properly?” link pointing to a web page.
- If you’re putting together a puzzle of images in table cells and there are small margins everywhere, the valign property will help you out.
- !important doesn’t work in Outlook 2007, the whole statement is ignored I think. However, hotmail requires you to use !important or all your headings will be green.
- Therefore, I try to avoid headings. <p class=”h1″> is good enough.
- Do not start a line with a period.
- Wrap text in a span. Outlook 2007 won’t style it if it’s just in a <td> (not 100% sure on that one though)
- Span styles must be inline. GMail seems to ignore them if they’re not.
- Div margins work, paddings don’t.
- Images must have display: block, otherwise mail clients will quietly add extra space somewhere in one of the containing tables, in an extremely frustrating way.
Can’t think of anything else right now, but there’s definitely more coming.