DJ Quilter

Front-End Developer

HTML Email Tips

Every so often I’m asked to write a HTML email. It is literally the worst thing that someone can ask me to do. I hate HTML emails. Having said that, I have developed a list of things that make my life easier when I’m given the dreaded task:

  • Push back on designs. Any design that you’re given needs to stick to a strict grid. Work on the assumption that you cannot do any clever positioning and you’ll rarely go wrong. (Note ‘rarely’; HTML emails will always throw up a problem.) I like single column layouts, they make life easier.
  • Just use tables. Everyone that has ever looked at doing an HTML email knows this. Outlook uses a silly rendering engine, so we have to use tables. That is all.
  • Use tables within tables. This is completely counter-intuitive, but if you ever find youself with a difficult layout issue, ask yourself if using another table will fix it. If the answer is yes, then you should.
  • Use attributes on your table elements extensively. I use the following on every td: cellspacing=”0″ cellpadding=”0″ border=”0″, which tends to prevents some major headaches early doors.
  • Check that you can use a CSS style before you use it. As soon as I start work on an HTML email, I open the Campaign Monitor Guide to CSS Compatibility. If a style doesn’t have a full row of ticks, I don’t bother using it.
  • Don’t use margins or padding. You’re already doing this if you’re following the above rule, but it’s worth mentioning as it’s easy enough to chuck some margin on something and assume it will be the answer. Although it sounds gross, you can use border instead as this is universally supported.
  • Set widths on content within table cells. About the only thing that doesn’t need this is images, but setting widths on content will solve most (if not all) of your layout issues. This has saved me many times. I think there is an argument for NOT setting widths as your email is then not responsive, however I’d rather have a fixed width email that looks right than a responsive email. But that’s just me.
  • Don’t use lists (ul’s or ol’s), paragraph tags or div tags. There are various reason for not using these elements, but essentially it comes down to email clients doing whatever they like with them (in terms of styling), or simply not supporting them. Prevent yourself the headache and just avoid using these elements.
  • Know what clients your coding for. This again will save you some headaches. If you can, find out upfront what email clients will be receiving your work of art. You can then ignore clients other than those when you come to your final step…
  • Test! If you’re going to be doing a lot of HTML emails, sign yourself up to a service like Litmus or Email on Acid. Although they are costly, they save you a heap of time in testing. You’ll get screenshots of your email in all of the clients that you specify (both have comprehensive lists of clients that you can test against).

I won’t pretend to be an HTML email expert. I’m very much an amateur (mainly because I’m always trying to avoid this nuisance of a job). But these are the tips I’ve picked up on the unfortunate occasions when I’ve been given a really bad day.