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!