Search code examples
macosoutlookresponsive-designhtml-emailconditional-comments

Outlook for Mac (2011): Conditional Comments

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?

Solution

  • @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