HTML E-mail Layouts Breaking When Forwarded - Make it Survive the Word 2003 HTML Editor

Question

My boss's clients are complaining that when some HTML newsletters are forwarded, their table-based layout breaks. I have determined that this is most likely caused by using the following option in Outlook:

Tools > Options > Mail Format > Use Microsoft Office Word 2003 to edit e-mail messages

My boss refuses to change this option and is demanding that I figure out a work-around. But I'm plain stumped. The e-mail that is breaking when forwarded with this option on is at http://www.egusts.com/stratham/stanford-square/10-0826/new/

Here's what happens when the Word 2003 HTML editor is done with it. No edits, just hit "forward" with that option selected - http://www.egusts.com/stratham/stanford-square/10-0826/new/alt/

Here's an example that my boss forwarded me that makes it through just fine - http://www.egusts.com/stratham/stanford-square/10-0826/new/example.html

But I'm still really stumped. I have no clue what to do. I had thought my original template's table-html was really simple and straight-forward. What's breaking in the Word 2003 Editor? Why? Is it stripping some tags? Adding some tags that screws it up? Is there anything I can do?

I'm at my wits end! Thanks for the help

Answer 1

Unfortunately, forwarding an email causes one client to re-render HTML that has already been rendered, and this will almost always screw something up. However, using better practices when coding your emails will help cut down on these problems. I've done a lot of emails and here are some things I've learned:

1. Never use rowspans or colspans. These tend to break down quickly across email clients and when forwarded. Instead use nested tables.

2. If you have a bulleted list, use either an unordered list (ul), or if you must use a 2 column table with a row for each list item and put the • in the first column for each item.

3. Stay away from p tags, they have inconsistent spacing across email clients. Using 2 br tags can give you roughly the same amount of space.

4. Use padding to control the spacing of elements instead of margin. Again, not very consistent, in fact, I'm not sure it works at all.

5. Super scripted elements will usually push the line they are on down (or the lines above up). Use an inline-style of line-height:0; to fix that. Note, however, this will still happen when forwarded. If you're using footnotes and need to superscript just a few numbers, use the HTML entities ¹ , ² , and ³.

6. Background images are not supported in Outlook 2007-2013 for Windows. They seem to work for Outlook Mac, and a lot of other clients, but don't bother with them if you need to support Outlook for Windows.

7. Find a reliable template to use and always start with that. This should include styles in the head aimed at fixing problems with web, desktop, and email clients. Here are some I usually use:

   body { width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; } a:link { color : #1d3666; text-decoration : underline; } a:visited { color : #1d3666; text-decoration : underline; } a:hover { color : #a43232; text-decoration : none; } table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; } table td { border-collapse: collapse; } img { outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; } a img { border:none; display:block; }

While web clients like Gmail, Yahoo, Outlook.com, and AOL will probably strip the head and any internal styles out of your email, these will come through for most mobile mail client users and for desktop email clients like Outlook and Thunderbird, which are what these styles aim to fix for. For everything else, use inline styles.

Also, it looks like you created this using Fireworks. That might work for a web page, but email has a lot of pitfalls and limitations that FW probably does not account for. I'd recommend either using Dreamweaver or some other helpful text editor and do it using HTML with inline styles.

Answer 2

I figured out that, in addition to using transparent spacer GIFs, I needed to specify a "width" for each of the s that housed the spacer GIFs.

That solved most of the layout problems, although forwarding an e-mail in outlook with that option set injects a lot of other ugly code that can screw things up.