Much like Roger Johansson, I don’t like getting HTML emails. They don’t show well in Gmail, which I use exclusively, and often are buggy and spam-related.
Recently, though, a simpledream client asked me to design an HTML email for their monthly newsletters. At first it seemed to be an easy task , but the further the project went the more complicated it became. “HTML emails shouldn’t be this tough”, I was heard muttering as I tried my first efforts. As I found out, they are not difficult but do require some careful coding and attention to detail. Testing is also essential to make sure that the major email software programs are treating the HTML design well.
First of all, there are lots of different email programs (Hotmail, Outlook, AOL, etc) and they all render HTML emails differently. Some respect your HTML code, others like to strip off certain important tags. To add complexity to the problem, I was bent on using Cascading Style Sheets for the presentation even though I knew from experience that a table would have to be used as the layout container. Email software support for CSS is even more spotty than its support for HTML rendering. I also wanted the design to match the online version that was already formatted with CSS.
After some initial frustration, I went to Google to find out how other designers were dealing with the problem. I didn’t find very many articles, to be honest. One great article was on A List Apart: CSS and Email, Kissing in a Tree by Mark Wyner. This is a good start if you are thinking of designing HTML emails with CSS. Mark explained a lot of CSS issues, which was nice. He also wrote another article recently that is worth reading: Optimizing CSS presentation in HTML emails. Another good resource was on Site Point: How To Code HTML Email Newsletters. It offered practical advice on improving HTML email delivery and also had some sample code that was very useful.
All in all, HTML emails are worth doing well if you are asked to. By using the tips and tricks in the above articles I was able to get a reasonably good-looking HTML email template built. I am assuming that most folks wouldn’t use HTML emails voluntarily, though. What do you think? Also, if you have any tips regarding HTML emails with CSS, leave them in the comments. Thanks!
The Sensible Leader 
I’ve found Style In E-mail from the css-discuss list to be a useful page when developing HTML E-mails. I certainly understand the developer/designer frustration with this topic. We’re used to dealing with three or four browsers and trying hard to get them to render our sites correctly. Adding untold numbers of e-mail clients into the mix makes the best of us cringe.
As for receiving HTML e-mails vs. plain text, I’m on the fence. Part of me wants e-mail to remain pure and simple, but another part of me enjoys a well designed HTML e-mail, like the receipt e-mail from the iTunes store. I’ll probably remain ambivalent and create what the client wants in most situations. I would definitely use markup sparingly and try to always have the e-mail sent as mixed multi-part with a plain text version of the content. This allows people that can’t (or choose not to) receive html e-mail to still read the message. That is a must.
LikeLike
Thanks for the link to the CSS Discuss page, Aaron. I had that bookmarked but never read it! 🙂
Agreed on the multi-part email, choice is always good. Also, even though sometimes I like the nice presentation of an email receipt, sometimes I just want the content (like a tracking number) so I can choose not to see the HTML version.
LikeLike