REplying or Forwarding from Outlook 2010 breaks emails

I have several templates I designed for email campaigns. These templates use responsive design to reformat on different devices sizes. I ran a bunch of tests sent to my test accounts (Outlook 2010, OWA, Gmail, Yahoo, outlook dot com, Android, iPhone).
I send them using Thunderbird and when sent out, they all render fine in all of the test clients.
The issue appears when I reply to and Forward from Outlook 2010.
I am getting some bad breaks that I trust is from the Word HTML rendering engine. I have googled and looked through forums for answers but cannot find any. I am trying to fix these issues (outlined below) to have a more secure template going forward. If anyone has email HTML knowledge I would appreciate some assistance. It is mostly Microsoft related issues I have found with some minor stuff with yahoo and gmail.
Code (http://jsfiddle.net/G8BbC/1/) and screenshots are available to help with this issue.

When Replying/Forwarding from Outlook 2010 to OWA
Email breaks completely. The top and bottom tables are 75% versus the middle table that is 100%. This is the biggest problem as OWA ia used at my job.
When Replying/Forwarding from Outlook 2010 to Outlook dot com
Text is centered instead of left-aligned (this is an inline style issue I believe I can add to the h and p tags
The bottom shadow images is ignores my valign inline style and pushes the image away from the bottom of the email
Worst of all the Header graphic has space above and below the image (so the image is kinda floating with what looks like padding above and below. I believe for this i need to set the height in the td but it might interfere with my responsive design.
When Replying/Forwarding from Outlook 2010 to gmail
Text is centered instead of left-aligned (this is an inline style issue I believe I can add to the h and p tags
The bottom shadow images is ignores my valign inline style and pushes the image away from the bottom of the email

roshodgekiss roshodgekiss, 3 years ago

Hi there Brandon, forwarding or replying to email campaigns from within almost every email client causes issues with formatting, I'm sorry to say - that's why we strongly recommend using, and encouraging your recipients to use Forward to a Friend links for the former case. It's really the only way to overcome the chaos that ensues from a display perspective - plus it will prevent things like accidental unsubscribes from happening... Or getting your stats skewed, for that matter.

As for the OWA issues you've mentioned, we've historically had a lot of issues reported with this client, which you can read about on our blog. I imagine having emails forwarded or replied to only compounds the issue with styles disappearing, etc. All the more reason to use FtaF links where possible.

We have a copy of Office 365 for testing, but not older versions of OWA internally. So not sure how much debugging we can do in this regard.

Thanks, Brandon - please let is know if there's anything we can clarify here. Best of luck!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
brandon-pines, 3 years ago

@roshodgekiss,

Thank you for the reply. I am well aware of the issue. Some I can live with like the padding around the images as they don't really break the design too bad. But certain things like my text aligned centered should be an easy fix but is not (i worked for a few hours to fix it today but did not have success.).

We will eventually be moving to Zimbra but I am sure that will have issues too. The biggest issue is people in my company reply to the emails from Outlook 2007/2010 and send to their sphere. This is why I need to ensure the email does not break and usually it doesn't except for my notes above). I have noticed issues when the user has windows display set to 125% but I cannot control that if I want responsive designs.

I was hoping at least to get someone to look at my fiddle (ha) http://jsfiddle.net/G8BbC/1/ and look at the code for maybe something I am not seeing.

JohnP JohnP, 3 years ago

You don't have align on your main text table cell. Another suggestion is losing all the p tags and using double br's. if you need to change up your text style, use font tags. I've found this method to be most consistent way to layout the text.

I know there are 'no guarantees' when forwarding emails out of Outlook, but it is possible to have your email not break, you just have to design with forwarding in mind. The biggest issue is finding ways to minimize the effect of vertical spacing caused by Outlook when forwarding.

Outlook creates 20px or so gaps between tables that are stacked. If you instead use table rows, this gap is limited to just a couple pixels. Knowing that some sort of gap is unavoidable if someone forwards your email, the trick is hiding it by setting your background colors to match. Here is an example:

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#252525">
  <tr>
    <td style="padding-top:30px; padding-bottom:30px;">
      <table align="center" width="600" border="0" cellpadding="0" cellspacing="0" style="color:#CCCCCC;">
        <tr>
          <td>
            pre-header
          </td>
        </tr>
      </table>
      <table align="center" width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
        <tr>
          <td height="400" align="center">
            content
          </td>
        </tr>
        <tr>
          <td bgcolor="#252525">
            <img style="margin: 0; border: 0; padding: 0; display: block;" src="http://lorempixel.com/600/100/sports/" width="600" height="100" alt="footer">
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

When forwarded, the preheader table and content table will drift apart 20px as they are sitting one after another in the same place. Meanwhile the content row and footer image row will drift only a couple of pixels, because they are in rows and not separate tables. To keep the preheader attached to the content, I'd instead need to make it the top row in the contents parent table.

As the gap is always created at the bottom of table cells, you'll notice on the footer image cell, I set this to the background color (#252525) instead of leaving the table's default white (#FFFFFF). This is because there will be an unwanted white line below the footer image when forwarding from Outlook. By setting the cell the same as the background color (#252525), I am hiding this line, keeping my email looking great when forwarding.

Hope that helps.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098