Outlook 2007/10 + Responsive design + Height limitation (1728px)

Hello,
We recently had a Big problem with the coding of a newsletter :

The newsletter is 2 columns, responsive design (the base code is the one posted by CM here http://www.campaignmonitor.com/guides/m … esponsive/ ). It still worked very well for our newsletters, even for Outlook 2007/2010. Until the day when our template not working with our clients...

Sometimes, the right column goes down et was no longer sticked to top.
After hours of tests (!!!), it seemed that the length of the left column was the problem. Why?

The test page

On Litmus, this worked well
screenshot

and right after, boom!
screenshot

We tried to found exactly where it broke.. The difference between the 2 screenshots is only 1 line of text. ù*µ$! Reduce the line-height, the spaces between paragraphs, this made the newsletter again work well! Mm..

After searching for solutions on the net, we found the article by CM on height images limitation in outlook 2007/2010.

Then, we found this article.

"The 1,800 Pixel Bug: If you create long emails, like a large quarterly newsletter, Outlook can break your email at around 1800 pixels. Remember when we mentioned that Outlook 2007 and 2010 render using Word? In this case, Outlook is treating your email as multi-page word processor document, and is adding page breaks. Surprise!"

And it seems that is our problem.. ! Except that is not with images but with text.
screenshot

It is already difficult to explain to customers that their design will never look exactly the same across all email clients.. but it is even more difficult to make them understand that a newsletter should not have 30 articles..

... And outlook 2013 came... Joy and disappointment.. we have not finished crying.

Does someone has already encountered this problem with text? And could you confirm that this is correct?

Thank you.
David

Frendina, 1 year ago

I have, many times, and only on Outlook for PC. I have a background color, so basically the column would appear cut off, but the text would continue (not on the side as you have it, but basically with the side column missing. My solution has been to add an additional content row, and break the HTML into 2 files. Hope this makes sense. If you want me to post any code, let me know and I will.

Fernando

roshodgekiss roshodgekiss, 1 year ago

Hi David, I see your tears, your infinite walk through the wilderness that is Outlook and HTML email coding. Take upon yourself both joy and ashes in the knowledge that you're not the only one - Email On Acid also have a post outlining this issue.

You really have two options here:

- Request that your client apply extreme brevity when adding content to their emails - we have a couple of persuasive arguments for this that you can use
- Do like what Fernando has suggested and use fixes like table stacking, however these may not always work

All of us here have a love-hate relationship with Outlook. We've potted hours into entertaining its foibles and will spend countless more. So take heart and wipe those tears - you're not alone. We'll always be happy to stand up with you against a common adversity. Best of luck!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
mcdavid, 1 year ago

Thank you Rosanne & Fernando for your help.

The solution of cutting tables to never have more than 1728px (the 23.7 inches) height for an element (images, table, td, ..) is good and works but ... Our newsletters are dynamic and managed by a cms. Customers write their news or choose their news in different modules of the website. This is where the problem is.. it is not handmade, we use templates.

Tell them you need more news on the left (even if you will have a blank space between the second and third category of news which is in a separate row/table..), but not too much (even if you will exceed 23.7 inches..), but more than the number in the right column!
I do not think they will appreciate and understand especially..

1. outlook 2007 33.7% .. 2. outlook 2010 29.7%.. 3. iPhone 19.4%
We cannot please to everyone...

Stig Stig, 1 year ago

Hey mcdavid,

One approach you can try is to use conditional comments to turn the outer table into a two column table in Outlook 2007+ only.

You can do this by inserting

    <!--[if gte mso 9]>
        </td>
        <td valign="top">
    <![endif]-->

between the two inner tables.

You'll also want to add valign="top" to the first outer <td> so all the content is kept at the top of the table.

Full test code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Newsletter</title>

<style type="text/css">
    @media only screen and (max-width: 640px) {
        table[class=contenttable] { 
            width:320px !important;
        }
    }
</style>

</head>

<body bgcolor="#ffffff" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased; width:100% !important; background:#ffffff; -webkit-text-size-adjust:none;" class="contenttable">

<table width="640" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" class="contenttable">
    <tr>
        <td valign="top">
            <table width="320" border="0" cellspacing="0" cellpadding="20" align="left">
                <tr>
                    <td>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit mi, aliquet eget hendrerit quis, aliquet non diam. Praesent pulvinar pharetra elit eget luctus. Sed sit amet fringilla quam. Donec blandit nunc viverra odio adipiscing feugiat laoreet id nisl. Mauris quis leo augue. Cras convallis mollis turpis, in mattis orci gravida non. Aliquam rhoncus nisi eget ante mollis euismod.
</p>
<p>Aenean sit amet hendrerit augue. Nullam facilisis eros sit amet purus pellentesque quis mollis nibh volutpat. Suspendisse vel ante tortor. Duis nulla ipsum, ultricies at posuere sed, commodo eget felis. Praesent quis ligula augue, tincidunt elementum nulla. Nullam nibh magna, laoreet eget dapibus eget, vehicula sed orci. Sed congue scelerisque quam ac molestie. Duis ut elit quis magna auctor sodales sit amet non sapien.
</p>
<p>Suspendisse commodo congue consectetur. Aliquam ac pretium mi. Pellentesque sed nisl sem. Nullam imperdiet, enim dignissim mattis facilisis, tortor nulla pellentesque erat, at adipiscing nisi mauris ut elit. Aenean a orci lorem, sit amet lacinia augue. Cras id diam molestie tortor varius ullamcorper nec ut purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>Fusce commodo, urna ut varius blandit, mi quam dignissim sem, et mollis nisl tortor vitae sem. Nam tortor libero, malesuada viverra porttitor quis, facilisis id leo. Suspendisse ut erat turpis. Morbi eu lectus enim, id laoreet nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sit amet urna purus. Aliquam erat volutpat. In bibendum pulvinar eros in mollis. Curabitur luctus libero ac nibh dignissim vel imperdiet lectus lobortis. Sed sagittis, libero vitae sodales consectetur, ligula elit volutpat turpis, in posuere orci est id purus. Maecenas nec tellus et quam imperdiet fringilla. Nullam id odio eget felis bibendum tincidunt. Cras feugiat erat id tellus pulvinar vitae ornare eros sodales. Nulla ut accumsan sem. Nullam massa neque, ullamcorper in volutpat et, hendrerit eu urna. Vivamus placerat lorem malesuada sem consectetur nec facilisis justo suscipit.
</p>
<p>Fusce commodo, urna ut varius blandit, mi quam dignissim sem, et mollis nisl tortor vitae sem. Nam tortor libero, malesuada viverra porttitor quis, facilisis id leo. Suspendisse ut erat turpis. Morbi eu lectus enim, id laoreet nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sit amet urna purus. Aliquam erat volutpat. In bibendum pulvinar eros in mollis. Curabitur luctus libero ac nibh dignissim vel imperdiet lectus lobortis. Sed sagittis, libero vitae sodales consectetur, ligula elit volutpat turpis, in posuere orci est id purus. Maecenas nec tellus et quam imperdiet fringilla. Nullam id odio eget felis bibendum tincidunt. Cras feugiat erat id tellus pulvinar vitae ornare eros sodales. Nulla ut accumsan sem. Nullam massa neque, ullamcorper in volutpat et, hendrerit eu urna. Vivamus placerat lorem malesuada sem consectetur nec facilisis justo suscipit.
</p>
<p>Fusce commodo, urna ut varius blandit, mi quam dignissim sem, et mollis nisl tortor vitae sem. Nam tortor libero, malesuada viverra porttitor quis, facilisis id leo. Suspendisse ut erat turpis. Morbi eu lectus enim, id laoreet nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sit amet urna purus. Morbi sit amet urna purus. Morbi sit amet urna purus.</p>
                    </td>
                </tr>
            </table>
    <!--[if gte mso 9]>
        </td>
        <td valign="top">
    <![endif]-->
            <table width="320" border="0" cellspacing="0" cellpadding="20">
                <tr>
                    <td>
<p>Column Right Content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit mi, aliquet eget hendrerit quis, aliquet non diam. Praesent pulvinar pharetra elit eget luctus. Sed sit amet fringilla quam. Donec blandit nunc viverra odio adipiscing feugiat laoreet id nisl. Mauris quis leo augue. Cras convallis mollis turpis, in mattis orci gravida non. Aliquam rhoncus nisi eget ante mollis euismod.
</p>
<p>Aenean sit amet hendrerit augue. Nullam facilisis eros sit amet purus pellentesque quis mollis nibh volutpat. Suspendisse vel ante tortor. Duis nulla ipsum, ultricies at posuere sed, commodo eget felis. Praesent quis ligula augue, tincidunt elementum nulla. Nullam nibh magna, laoreet eget dapibus eget, vehicula sed orci. Sed congue scelerisque quam ac molestie. Duis ut elit quis magna auctor sodales sit amet non sapien.
</p>
<p>Suspendisse commodo congue consectetur. Aliquam ac pretium mi. Pellentesque sed nisl sem. Nullam imperdiet, enim dignissim mattis facilisis, tortor nulla pellentesque erat, at adipiscing nisi mauris ut elit. Aenean a orci lorem, sit amet lacinia augue. Cras id diam molestie tortor varius ullamcorper nec ut purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

</body>
</html>

I hope that this works the way you had in mind, and that you can implement it in your CMS template.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
mcdavid, 1 year ago

It seems it works... You're great !!

Screenshot O2007

(But now we need to try it with a more complex template..)

Thank you very much.
D.

Stig Stig, 1 year ago

Excellent, thanks for confirming!

Yeah, definitely let us know how it works for your real world use.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
mcdavid, 1 year ago

Hi again,

The solution you provided worked for us. Thank you.

Stig Stig, 1 year ago

Very cool to hear - thanks for posting back here, mcdavid!


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Redferret, 1 year ago

There is an mso-pagination attribute that could solve it but i haven't tested it

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account