Re: Banner Images and Tables Displaying Differently Across Email Clients

Marisa_Rybar · ‎10-26-2015

Help!!!

I'm building out an email and testing it across different platforms, and I've noticed it renders differently depending on where it is opened. In Hotmail and Gmail, the width of the email is 600px, so if I limit that table or image to 560px width, it looks great on those two, but then it looks terrible on Outlook and only runs about 2/3 of the way across the email. If I adjust the table to 700px, then it looks great in Outlook, but it stretches the header image in Hotmail and Gmail.

Has anyone else had this issue? I remember having to deal with it in MailChimp too a while back, but I can't remember what I did to rectify it. Any suggestions would be incredibly appreciated!

Thank you!

-Marisa Rybar

Dan_Stevens_ · ‎10-26-2015

Marisa, direct your developer to this thread as well: Marketo is rewriting/omitting a significant amount of code in our responsive emails within the HEAD ... - specifically, you'll note some guidance provided here, from Email-on-Acid. These code fixes are primarily for those emails that are responsively designed. However, this also may fix the issue that you're experiencing. The key points are:

Make sure your initial <HTML> tag contains the additional XML namespaces as follows:

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:v="urn:schemas-microsoft-com:vml"

xmlns:o="urn:schemas-microsoft-com:office:office">

And then include this conditional code within the <HEAD> area of the HTML;

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

<o:OfficeDocumentSettings>

<o:AllowPNG/>

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

</o:OfficeDocumentSettings>

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

View solution in original post

Dan_Stevens_ · ‎10-26-2015

Sounds like you're experiencing the issues of Windows scaling. See this thread (and the information that Justin Cooperman provided - in terms of requesting the fix to be applied to your email templates).

Marketo Removing Code for Image Scaling for Outlook at 125%dpi

Justin_Cooperm2 · ‎10-26-2015

Yeah, if you bought a template that has code similar to what you see in the thread Dan referenced, let me know. We can enable that feature for you.

Otherwise, it's possible that your template just wasn't written to handle sizing issues in different clients. If that's the case, other folks like Dan would be better equipped to recommend possible solutions. Each email client is very tricky, especially older versions of Outlook.

Marisa_Rybar · ‎10-26-2015

So Justin and Dan, what if we had a developer build out our email template in reference here? Is there a snippet of code I can grab to send him to add to the template? Or is this something Marketo can adjust for me (per your note in the conversation string on October 13th that the patch is in production)?

Justin_Cooperm2 · ‎10-26-2015

You need to see if your template has a certain DOCTYPE or attributes on the <html> element? Ask your developer. The feature involves Marketo not stripping custom <DOCTYPE> or attributes on the <HTML> element

Dan_Stevens_ · ‎10-26-2015

Marisa, direct your developer to this thread as well: Marketo is rewriting/omitting a significant amount of code in our responsive emails within the HEAD ... - specifically, you'll note some guidance provided here, from Email-on-Acid. These code fixes are primarily for those emails that are responsively designed. However, this also may fix the issue that you're experiencing. The key points are:

Make sure your initial <HTML> tag contains the additional XML namespaces as follows:

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:v="urn:schemas-microsoft-com:vml"

xmlns:o="urn:schemas-microsoft-com:office:office">

And then include this conditional code within the <HEAD> area of the HTML;

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

<o:OfficeDocumentSettings>

<o:AllowPNG/>

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

</o:OfficeDocumentSettings>

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

Marisa_Rybar · ‎10-27-2015

Dan, we're testing out that code and it's not working. Is this just for the header or is it also for tables? (Not that either one is scaling properly right now, it's still an either/or situation where if it looks good on Outlook 2013 it doesn't look good on anything else, and vice versa.)

Dan_Stevens_ · ‎10-27-2015

Marisa, are you starting with a fully responsive email to begin with? The code that I shared will only work for these types of emails. Also, how are you testing this - are you testing using all three of Windows display settings (100%, 125%, 150%)? Does it look OK at 100%?

Marisa_Rybar · ‎10-27-2015

You know, honestly, I'm adjusting the zoom bar at the bottom right of the Outlook page, which is the only way I know how. The layout still looks totally different than on Hotmail or Gmail, and neither the header nor the table render the same in Outlook as on Hotmail / Gmail. Is there something I should be doing differently?

Marisa_Rybar · ‎10-27-2015

Here are screen shots of how they appear. Outlook v1 and Hotmail v1 are the same test email, and Outlook v2 and Hotmail v2 are the same test email. See how they only look good on one or the other? In v1 I customized it with non-Outlook email clients in mind, and in v2 I customized it with Outlook clients in mind.

OUTLOOK V1

HOTMAIL V1

OUTLOOK V2

HOTMAIL V2