In my early years at SendLabs, I often would find myself reviewing email HTML code for some of our clients. These weren’t necessarily audits, but rather code reviews as occasionally a client would ask us for a little help because they got stuck on something like an image not sitting right or a line of text that wouldn’t wrap right. That’s where I would come in and evaluate what the issues were.
While that’s not my day-to-day work at Dyn, I managed to compile some tips and tricks through the past few years that I wanted to share for the greater good of email development, aka my not-so-secret steps for fixing your broken email code.
Step 1: MsoNormal
I can’t stress enough how much using Microsoft Word can ruin your perfectly coded email. Hours of hard work can spiral down the drain because of a simple copy-and-paste. What’s great is that Word is the easiest mistake to spot and ultimately fix. If you open up the source of your email (either through the WYSIWYG or through another Editor), do a quick search for “mso-“.
Just about all of the special CSS attributes Microsoft Word creates start with that phrase. An easy way to avoid running into this issue is to paste anything you’ve copied from Word into Notepad or TextEdit first and then place that text into your editor/WYSIWYG. That will ensure you no longer have any Word classes lingering.
Step 2: Floats, Boxes and Background Images
Float is an extremely common CSS attribute and is usually found on <div> tags. Unfortunately, neither of these are a really good idea when it comes to emails and even I catch myself trying to float something in an email as it’s almost second nature when you work in web development. The sad truth is that float isn’t supported in email creation and that can tear any good template apart.
On the other hand, <div> tags are half supported and unreliable, rendering completely different in almost every email client. Some email clients even strip them out (I’m looking at you, Lotus Notes). The last attribute in this section is the dreaded background-image as it’s no secret this guy doesn’t work in email. Just steer clear and you’ll be fine.
Step 3: Margin
Yes, margin gets its own section and yes, it deserves it. I can’t tell you how much I despise margin. Sometimes, it works and other times, it’ll give up on you for no reason at all. A word of advice? Take it out and keep it out. If you really want to use margin, only stick to margin-left and margin-right. They’re the only margin you’ll ever get to work right in most email clients and even then, they won’t work with everything. Margin reliability would be comparable to throwing a dart through the window of a moving car and trying to hit a bulls-eye on the other side.
I like to set margin-top:0px on elements that natively has it. That way, the first paragraph tag always sits at the top of your table element and so on. Margins are designed to overlap anyway, so you won’t lose any breathing room if you do take it off. Remember to use tables for spacing — especially vertical spacing.
Step 4: Where did the color go?
Color is one of those weird attributes that can’t seem to make up its mind. Sometimes, you’ll see that pretty shade of blue on your headings and other times, it’ll be your everyday generic black text color you tried so hard to rid yourself of. If you run in to this mess, all is not lost. In the words of Douglas Adams: “Don’t panic.”
Just try moving the color attribute forward or back one attribute in your inline style. You can also try doubling your efforts and adding the style to a <style> tag. As long as you have your inline styles for the email clients that strip the <head> and <style> tags, there’s no harm in adding it.
Step 5: Table Cell Spacing
As I pointed out above in Step 3, you should rely on your tables for a good majority of your spacing, but what I didn’t mention is the irregularity of these cells. In some email clients, an empty <td>, regardless of height or width attributes, translates to “Don’t render me!” Even stranger, a <td> tag with an image shorter than your font height and a height declared will stretch to be the height of your font. (As a side note, try saying that 10 times fast.)
An easy trick to these issues is whitespace images. Just create an image with the width or height you require and place it in the cell. It doesn’t even have to be an image of anything: use your background color!
I realize I’ve barely scratched the surface of what could and will go wrong in your coding endeavors, but I hope these five quick steps help you get to the bottom of those cross-client nightmares.
What issues have you run into that you need help with? Comment below and we’ll try to help out.
John Norton is a developer of SendLabs at Dyn, an IaaS (Infrastructure-as-a-Service) company that features a full suite of DNS and email delivery solutions for enterprise, personal and SMB use. Follow him at Twitter: @jukebox42 and @DynInc.