If you’ve ever had to manually develop (or even design) an HTML email before, your face is probably permanently scarred from forcefully planting it into your keyboard time and time again. HTML emails are a developer’s nightmare for a couple of simple reasons:
- The use of deprecated tags and methods of development; and
- The hundreds of ways the email is viewed by the end user
Dealing with five or six browsers to support with your website is nothing compared to the amount of email clients or websites available that want to run your email through their own personal shredder.
So what am I teaching you today? I’m not teaching the basics; there are enough sites and blogs out there that can help with that (MailChimp’s Resources page is a great example of that). I’m offering some structuring tips, as well as some bug fixes that I’ve had the displeasure of meeting.
Resistance is Futile
No matter how well prepared you go into your testing phase, always plan for it to take a couple of hours. Each email client and service has its own individual way of rendering the code you throw at it. Use tools like MailChimp’s Inbox Inspection, Litmus, or simply signing up to the most popular email clients and testing it that way (here’s a list of the most popular email clients in June 2011). Spending a couple of extra dollars on testing services is a great idea, because it yields the highest result of getting a professional looking email to your clients.
Keep It Simple Stupid
KISS your complicated designs and expert coding good bye (haha, I made a pun). If you’ve read anything about HTML emails, you should know that email construction is something of the stone-ages. It’s really important to take these adages seriously. Here are some things to keep in mind:
- Use only tables. A lot of email clients can’t handle div tags and a lot of the properties you can attribute to it. Sure, there are some examples of when they can work, but it’s probably safer to just stick to tables.
- Inline styles are your friends. It may seem like a lie, but it’s not. No fancy CSS in your header because most email clients strip it all so it doesn’t interfere with their own UI. Makes sense, but it just makes things a little difficult for you.
- Deprecated tags are okay! Use your font, your b, your center… You may be able to get a better function out of an inline-style, but with the lack of support of some properties, I’d say just make sure you test.
- Simple things you’ve come to enjoy fail to be cross-compliant. You like a lot of backgrounds? You like transparent .pngs? Have some fancy @font-face fonts? Forget it. Here’s a trash can―feel free to throw it all out.
- Find the fine balance between text and images. Many clients don’t support background images on anything but the body. Also, as stated, font-faces and pretty transparent images are a thing of the future. To achieve maximum open-rate and attempt to bypass the spam filter, try to balance in favor of text. Make sure your designers know this in efforts to save headaches later.
Working with Tables
Get out your toolbox, because we’re going to use it. Here are some things I found which were helpful in making sure whatever table you put in gets spit out properly on most email clients:
- Zero out your cellpadding, cellspacing, and borders. This will help prevent any gaps in your design.
- Eliminate rowspan and colspan. Nest the heck out of your tables. For ever tr that has a td with either, just nest a table inside and remove the spans. Large tables with spans can become difficult and hard to test. Scrapping them and nesting tables yields a higher success rate.
- Delete white space. Spacing out your tr and td on new lines may make it easier to read, but some clients may render the spaces into your design.
Eating Bugs for Dinner: Slimy, Yet, Satisfying
Just like any other development environment, there’s going to be bugs. And just like most bugs, they often don’t make sense. Plus, it doesn’t help that some email clients just seem to be working against us for the lulz. So let’s heat up our frying pan and show them who’s boss (it’s us; we’re the boss).
- Gmail in Firefox, Safari, Chrome has gaps around images. Solve this problem by adding an inline style to your images: style=”display: block”
- Hotmail turns all H2-H6 to green. Why? Who knows. But guess what, they have it coupled with an !important declaration (it’s war). You can either override this with your own inline !important, or nest a span inside your heading with an inline color style (with no !important).
- Outlook ignores inline !important declarations. So, if you need to set !important, forget it. If you choose to use CSS in your header, it will work.
Conclusion
Internet marketing is important. Having a nice looking and engaging HTML email is probably what’s going to lasso in some results for you. But there’s a lot of thought, preparation, and testing that needs to go into a campaign before it gets sent off. Image is everything, and HTML emails are a prime example of simplicity trumping complexity. I hope my tips were helpful, and if you have any to share, I’d love to hear them in the comments!
