Replying / Forwarding HTML email in Outlook shows hidden content / breaks

Question

I'm utilising a technique for producing "responsive" emails which involves having two versions. One explicitly written for desktop and one written for mobile. Using a combination of conditional statements and CSS (mso-hide:all; display:none;) to hide the mobile version when in a desktop client and vice versa.

This works perfectly, and as intended. When I go to forward or reply to one of these emails, the styling breaks and the previously hidden 'mobile' version is shown. I've tried using inline styles (mso-hide:all; display:none;) on the table, as well as applying a class and using conditional comments to apply the same styling in a CSS fashion, but it's not working.

I'd show an example, but the work is rather sensitive.

Basically, I'm after a way to hide a table in Outlook and have it stay hidden when the email is replied to / forwarded.

Answer 1

Try wrapping your mobile version in <!--[if !mso]><!--> [tables] <!--<![endif]-->. That should prevent the mobile version from being interpreted by outlook and therefore being forwarded.

Forwarding html emails means forwarding the html that was already processed by the client, which if you look at an outlook processed html file, is horrendous. Filled with garbage MS code.

Most email developers (myself included) accept that you can't control forwarded emails, and therefore don't try to code so forwarding works properly.

Answer 2

Do they both have the CSS display values set inline? Are you overwriting the inline declarations with the !important tag in the media query?

Outlook often trashes the media queries (especially on forwarding), so if you have only one version visible inline as the default view, maybe that might work - which is what you should have for non-style tag clients like Gmail anyway...