Outlook desktop is rendering based on media queries

[Jo_Pitts1]

Morning all,

I have a situation where for a client, the emails they see in the Outlook desktop app are being impacted by a media query.

The media query is of this form:

    <style type="text/css">
      @media only screen and (max-width: 600px) {
        /* Lots of responsive coolness in here */
      }
    </style>

Has anyone else come across anything similar.  It is driving me batty!!!

Cheers

Jo

[Dave_Roberts]

Hey Jo,

It looks like there's a mixed bag of support for media queries on Desktop Outlook apps. These links are to an article from last year (so there might be more current info) but it looks like everything except Outlook 2007-16 will read the media queries on desktop.

https://blog.campaignmaster.co.uk/2019/02/05/outlook-com-to-support-media-queries-enhanced-accessibi...

https://campaignmaster.co.uk/resources/css-support-on-email-clients/

You might think about using a mobile-first approach for the media query stuff b/c desktop is inherently more capable than mobile of rendering more complex stuff. Rather than writing the media query to a "max-width" (so basically it contains your "mobile" set of styles) you might think about using a "min-width" (so it contains your "desktop" set of styles) and instead putting the code for desktop inside a media query. I've run into a ton of headaches in the past trying to work around a desktop-first approach b/c it gets really tangled down the line b/c you're trying to do more (use a media query) with less (email on mobile is less capable). 

[Jo_Pitts1]

Dave,

that doesn't (I don't think) explain why outlook desktop would be using what was inside a media query does it?

Cheers

Jo

[SanfordWhiteman]

What version of Outlook?  I can't repro this (nor external styles being honored at all!) in Outlook 2016 for Windows.

[Jo_Pitts1]

@SanfordWhiteman  and @Dave_Roberts ,

I'm at the point of believing it is to do with the clients various scanners.  My email, and their's, sits on office365.  I have connected up an email account on their domain to my desktop outlook.  I can send the same email to myself on my domain, and myself on their domain and get totally different rendering in Outlook.

My Domain

Client's Domain

The red box was something I added to a mobile style (buried in a media query) to see when it was getting activated (so not added after the fact).  It is mucking up the VML background (oh joy) and somehow choosing to use the mobile style (hence why the Find out more button is full width as well).

Truly odd!!

Cheers

Jo

[SanfordWhiteman]

Then it's probably more that their HTML munging doesn't understand the nested/conditional structure of media queries at all, and inlines all the CSS on-the-fly.

Outlook still dosen't support the media query itself.

[Jo_Pitts1]

Yep - that is pretty much what I determined as well.  

Of course, if they can't see the emails on their own domain, then they ain't happy :(.  

[Jo_Pitts1]

And I guess the scanner is stripping what it considers comments, and hence removes the VML (that's my current best guess anyway)

[SanfordWhiteman]

If it's stripping VML, then it's really  not built to be in an Outlook environment, but yeah.

[Jo_Pitts1]

Interestingly, it isn't stripping the VML.  It must be borking it in some way.  It does look like it has placed the opening if statement at the end of the preceding line rather than on its own line (as it is coded), as well as injecting some additional text /*SC*/ which is also not in the original code.

I've injected some simple VML into my code

<!--[if gte mso 9]>
<tr> 
<td> <span>KILROY WAS HERE</span> </td> 
</tr> 
<![endif]--> 

When I send it to my two email addresses (one client, one my own), I see 'KILROY WAS HERE' on my domain and not on their's.

I then deliberately borked the code the same way their scanner does

<!--/*SC*/[if gte mso 9]>
<tr> 
<td> <span>KILROY WAS HERE</span> </td> 
</tr> 
<![endif]/*EC*/--> 

and guess what - it breaks on both my and their domains.  Well done Mr Scanner!!!!!!!!!!!!

Hard to know if the lack of a line break is also an issue, as Marketo re-injected it after I saved the code.

I'm still in awe of this scanner and all it does (and not in a good way!)

Cheers

Jo