Outlook for Mac (2011): Conditional Comments

Question

Setup: I am trying my hand at an email with responsive design. Let me say up front, I am experienced enough that I expect there to be email clients that I can't control for. However, the one I am having trouble with now, that I would like to find a work around for, is Outlook 2011 (for Mac).

I am using inline CSS on a main <table> to establish a min- and max-width, and then setting my header image to a 100% width. This will obviously fail in Outlook (creating a HUGE image), so I am using conditional comments to give Outlook clients a <table> around the first that has a fixed width.

Example: <!--[if mso]><table cellpadding="0" cellspacing="0" border="0" width="600" style="margin: 0px 0px 0px 0px; width:600px; border:0px; background-color:#000000;"><tr><td><![endif]-->

<table cellpadding="0" cellspacing="0" border="0" style="margin: 0px 0px 0px 0px; max-width:600px; min-width:150px; width:100%; background-color:#FFFFFF; border:0px;">

Problem: I can't get Outlook 2011 (the one for Mac) to recognize any conditional comments. Further, it won't handle the max- and min-width styles. I tried testing for mso and mso version, IE, even for non-Windows machines (<!--[if !(WindowsEdition)>), but none of these is recognized by this version of Outlook (though my GS3's email client did recognize the non-Windows test).

Does anyone have any way to test for this version of Outlook?

Answer 1

@astangelo,

I just designed a new responsive email template for my employer, and came across the EXACT same issue with Outlook for Mac.

After googling a bit, I found out that oddly enough (and in really great news), Outlook 2011 for Mac uses the Webkit rendering engine, not Microsoft Word.

So, you cannot target it using conditional comments that you usually would for other PC-based versions of Outlook.

All you need to do is add an @media query in your head styles and specify a max-width using (preferably) a table["attribute"="property"] selector.

I just did this and tested it and it finally fixed my issue.

Make sure you use Premailer's CSS inlining tool, and 'Check' the 'Don't remove or from the head', otherwise your @media query won't come through and the trick won't work.

I hope this helps!

Sincerely, Robert

Answer 2

This is kind of a shot in the dark, but it is worth a try because i'm about 99% sure it will work. Outlook 2011 for Mac uses webkit to render email. So targeting webkit by using

@media screen and (-webkit-min-device-pixel-ratio:0) {  

body {  }  
} 

should work.

Be careful to check all previous working email clients after doing this because you could be targeting those as well.

Let me know!

Answer 3

As far as I'm aware there is no conditional comment for 2011, I've tried a few things but had no joy.

However if you set the height and width of your image in the html element it wont appear huge. Then set it to 100% in a media query.

<style>
@media screen and (max-width: 600px) {  
  .headerimage{
    width:100%;!important;  
    height:auto;!important;
  }
}
</style>

<img src="xxx" height="100" width="600" class="headerimage">