Save Hours Of Email Code Debugging With These Steps
On occasion, we review HTML email code for a few clients. This review isn’t an audit. It’s an answer to a client’s plea for help. Sometimes a client will approach us for help because they can’t figure out how to fix an image that refuses to sit in the right place or how to correct some little glitch in the text format.
Having dealt with such problems for a while, we’ve learned some tricks and tips. We’d like to share those with you. So, here are some simple steps to follow to fix broken email code.
MsoNormal
Using Microsoft Word is one of the easiest ways to mess up a perfectly coded email. You can lose hours and hours of work simply by copying and pasting your text into Word. The great thing is, Word is the simplest mistake to catch and fix. Open the source of the email (using WYSIWYG or some other editor), and run a search for “mso-”. Nearly every special CSS attribute that Microsoft Word creates begins with “mso-”.
This problem can be avoided quite easily. Simply paste any text you’re copying from Word in Notepad. Then you can copy the text from Notepad into the editor you use. That way you’ll make sure there you don’t have any lingering Word classes.
Floats, Background Images, and Boxes
“float” is a very common CSS attribute. Generally, it is found on “<div />” tags. Unfortunately, in emails, these aren’t actually a good idea. Web developers use floats all the time. And if you’re a web developer, you might find yourself wanting to sneak float into emails. The truth is, float can ruin any good template. It isn’t supported in email creation.
Background images may look cool, but they’re dreadful to work with. In fact, they simply don’t work in email. Just avoid them, and you won’t have trouble.
Then again, “<div />” tags are partially supported and very unreliable, rendering totally different in just about every email client. There are even a few email clients (such as Lotus Notes) that totally remove them. Some email clients even strip them out!
Margin
Margin may seem like a simple thing, but it can cause a huge headache! At times it works great. Other times it quits working quite unexplainably. So, want to avoid problems? Take the margin out of your email and leave it out. If an element requires a margin set it at “margin-top:0px”. If you do that, the first paragraph tag will sit at the top of the table, and so on. You won’t lose any cushioning room by removing the margins, since they’re made to overlap in the first place. For spacing, especially vertical, use tables.
Why does the color disappear?
Color can be a strange attribute that comes and goes. Sometimes you’ll see the nice bright red headings. Sometimes you’ll be back to the boring black that you tried to get rid of. Don’t panic if this happens. There’s a solution.
First try to adjust the placement of the color attribute in your inline style. Try moving it backward or forward one attribute. To make doubly sure that it appears, add the style to a <style /> tags. Assuming the inline styles for your email clients strip the <style /> and <head /> tags, you won’t hurt anything by adding it.
Table Cell Spacing
As we mentioned in the third step, you should be relying on tables for most of your spacing. What wasn’t mentioned there is that table cells can be pretty irregular in size. In several email clients, the empty <td />, no matter what its width or height attributes, comes out meaning “Don’t render me!” Stranger still, a <td /> tag containing an image that is shorter than the font height and has a height declared will elongate itself to your font height. (Confusing enough to read, and to figure out!)
Here’s a simple trick for solving these problems. Use whitespace images. Make an image that is the height or width you need, and put it in your cell. The image doesn’t have to be of anything. It can just be the background color!
Conclusion
Of course, this has barely touched on all the things that it could have, and all the problems that could possibly crop up in coding. I hope, however, that these five quick steps prove helpful in figuring out the nightmares of cross-client work.
Don’t stop here. We’re continually expanding our list of unsupported attributes and tags. Check it out and make sure there aren’t any other rules you’re breaking. If you don’t have it email us.
Best of luck! Don’t forget you can always contact us for help.
