Re: Email Rendering - Mobile Responsive Showing on some Desktop?

Nikki_Aurelio · ‎06-23-2017

Hi - looking for some advice on an issue we're having with our email rendering. I am aware of different renderings across different devices and clients, but we're having an anomaly issue where sometimes emails being delivered on desktops are shrinking to show a left aligned version, almost like the mobile version for the header graphic. Here is our current situation:

Recently built out a master Marketo email template with about 10 different modules for our emails to be designed in Editor 2.0
Test every email on Email on Acid and with samples directly to our team prior to sending an email.
Email appears fine on all tests and in within Email on Acid.
My company is running Office 365 with Microsoft Outlook 2016 - so we're all on the same client.
Some executives are receiving the emails with the graphic and headline rendered as a cropped version to the left. It almost is as though some of the mobile formatting is being applied when they open on their desktop. It is happening both when they have images turned on and off.
- I've attached a few screengrabs of how the emails are supposed to look as well as the way they are receiving them with images on/off.
- It is only happening to the module that has a background image with text overlay, and it occurs if that module is in any location within the email.

I'm sure there is something in the code that can correct this, but I can't identify it since it's only happening on a few PCs with Office 365 with Microsoft Outlook 2016 and not universally on one client or device.

Here is the code for that module, and happy to share additional CSS if someone has ideas! Thank you!

<tbody>

<tr>

<!--[if gte mso 9]>

<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">

<v:fill type="frame" src="${Banner-BG-image1}" color="${Banner-BG-color1}" />

<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">

<![endif]-->

<tbody>

<tr>

<td>

<tbody>

<tr>

<div>

<span style="color: #ffffff;"><strong><span style="font-size: 36px;"><br> <br><br> <br>Thank You for <span style="color: #f0ab00;">Attending! </span> <br></span></strong></span>

</div> </td>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div> </td>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

<!--[if gte mso 9]>

</v:textbox>

</v:rect>

<![endif]--> </td>

</tr>

</tbody>

</table>

Gerard_Donnell4 · ‎06-23-2017

Hi Nicole,

Are you able to provide a full copy of one of the faulty emails with all the code and media queries etc.

Thanks,

Gerard

Nikki_Aurelio · ‎06-23-2017

Hi there- here is a link to view the email as a webpage, and I've added a txt doc with the email's full source code. Thanks!

Anonymous · ‎08-25-2017

Did anyone ever help you with this?

We are using Outlook 2013, and our modules breaks no matter if it is just text or images.

You can see our code and a video of what happens below:

BKD Newsletter Template (Code)

IMG_1109.MOV - Google Drive (video of what it does in email)

Thanks!

Nikki_Aurelio · ‎08-25-2017

No never heard from anyone on community. We've enlisted an agency with more advanced developers on their team, and our issue seems to be mostly around DPI scaling on the clients' email platform.

Gerard_Donnell4 · ‎09-01-2017

Hi Nikki Aurelio,

Just to let you know, I have tested your code and even previewed it in Litmus and have been unable to recreate the problem you described. I hope you are able to get it fixed.

Thanks,

Gerard

Nikki_Aurelio · ‎09-01-2017

Thanks Gerard Donnelly! We've done extensive testing in Email on Acid as well and cannot recreate. I'll be sure to share what the development agency finds if they are able to correct it.

Angie_Zarate · ‎09-11-2017

I am having the same issue. Sometimes the test come thru as mobile I assume and sometimes regular. No rhyme or reason as to why. But if you find out please let me know it just started for me on Friday.

Dave_Roberts · ‎09-13-2017

Hey Nikki-

I looked thru the screenshots you attached and they all seem to have the common thread that the bg-image is just a little wider on each side than the content that's "on top" of it in that banner section. This tells me that Outlook is filling the background image based on the width of the content. One thing that jumps out at me is that your inner table is set to a width of 500 and has a margin: 0 auto; -- you might try setting that to 600px and then nesting a table inside with 50px <td> spacers in place of the left/right margin. These leave less room for Outlook to interpret the width of that section, and the less you ask of Outlook, the happier everyone is

You might try replacing this:

<tbody>

<tr>

<td>

with this:

<tbody>

<tr>

...

</div>

I also saw that you mentioned that it might have something to do with image scaling. Here's a little nugget of code that I include immediately after the <head> element on the template that talks to Outlook and asks it not to make images any bigger than 96dpi. I use it more-so for the 120dpi Outlook settings, but it might work here if you're seeing inconsistent displays of similar code.

<!--[if gte mso 9]><xml>

<o:OfficeDocumentSettings>

<o:AllowPNG/>

<o:PixelsPerInch>96</o:PixelsPerInch>

</o:OfficeDocumentSettings>

</xml><![endif]-->

At the end of the day, we normally recommend against using background images in email b/c it's a proven show-stopper and they're difficult to maintain. You might want to check to be sure that your images are sized exactly to spec for desktop - I've seen images that are too large/small cause erratic display issues like this before. Under the hood, Outlook is doing some "magic" when code hits the inbox and there's some 'fuzzy math' that happens with px values are converted into pc and then back into px for display/rendering. I've also seen situations with bg-images in Outlook where adding a height to the container w/ the image and content (being as explicit about sizing as possible, everywhere) has actually helped to increase the width of that image. I mention that b/c it looks like you're ending up with a "squeezed" image in the screenshots.

The vml code can also be a bit buggy, you've got to remember you're asking a non-native Microsoft document to "speak" MSO and sometime things get lost in translation. This is another thing I try to avoid b/c even when I've thought I've had a "bulletproof" solution, it's ended up back in my inbox enough times for me to abandon the practice.

Hope some of this leads to a solution!

-Dave

Robyn_Ius · ‎03-06-2019

I'm also noticing these issues, across different browsers...Gmail desktop and iphone Safari