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

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 bulletted 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 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.