Your Achievements
Level 1
0% to
Level 2
Next /
to gain points, level up, and earn exciting badges like the new Applaud 5 BadgeLearn more!
View All BadgesSign in to view all badges
Open Alert Bar
SOLVED

Banner Images and Tables Displaying Differently Across Email Clients

Go to solution
Marisa_Rybar
Level 4
Level 4
‎10-26-2015 02:02 PM
‎10-26-2015 02:02 PM

Banner Images and Tables Displaying Differently Across Email Clients

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

0 Likes
4,189
Reply
1 ACCEPTED SOLUTION

Accepted Solutions
Dan_Stevens_
Level 10 - Champion Alumni
Level 10 - Champion Alumni
‎10-26-2015 05:02 PM
‎10-26-2015 05:02 PM

Re: Banner Images and Tables Displaying Differently Across Email Clients

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;

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1">

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

  <o:OfficeDocumentSettings>

    <o:AllowPNG/>

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

  </o:OfficeDocumentSettings>

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

View solution in original post

3,457
Reply
17 REPLIES 17
Dan_Stevens_
Level 10 - Champion Alumni
Level 10 - Champion Alumni
‎10-26-2015 02:44 PM
‎10-26-2015 02:44 PM

Re: Banner Images and Tables Displaying Differently Across Email Clients

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

3,457
Reply
Justin_Cooperm2
Level 10
Level 10
‎10-26-2015 02:48 PM
‎10-26-2015 02:48 PM

Re: Banner Images and Tables Displaying Differently Across Email Clients

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.

3,457
Reply
Marisa_Rybar
Level 4
Level 4
‎10-26-2015 03:41 PM
‎10-26-2015 03:41 PM

Re: Banner Images and Tables Displaying Differently Across Email Clients

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)?

0 Likes
3,457
Reply
Justin_Cooperm2
Level 10
Level 10
‎10-26-2015 04:34 PM
‎10-26-2015 04:34 PM

Re: Banner Images and Tables Displaying Differently Across Email Clients

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

3,457
Reply
Dan_Stevens_
Level 10 - Champion Alumni
Level 10 - Champion Alumni
‎10-26-2015 05:02 PM
‎10-26-2015 05:02 PM

Re: Banner Images and Tables Displaying Differently Across Email Clients

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;

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1">

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

  <o:OfficeDocumentSettings>

    <o:AllowPNG/>

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

  </o:OfficeDocumentSettings>

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

3,458
Reply
Marisa_Rybar
Level 4
Level 4
‎10-27-2015 12:31 PM
‎10-27-2015 12:31 PM

Re: Banner Images and Tables Displaying Differently Across Email Clients

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.)

0 Likes
3,457
Reply
Dan_Stevens_
Level 10 - Champion Alumni
Level 10 - Champion Alumni
‎10-27-2015 12:36 PM
‎10-27-2015 12:36 PM

Re: Banner Images and Tables Displaying Differently Across Email Clients

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%?

0 Likes
3,457
Reply
Marisa_Rybar
Level 4
Level 4
‎10-27-2015 12:52 PM
‎10-27-2015 12:52 PM

Re: Banner Images and Tables Displaying Differently Across Email Clients

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?

0 Likes
3,457
Reply
Marisa_Rybar
Level 4
Level 4
‎10-27-2015 01:02 PM
‎10-27-2015 01:02 PM

Re: Banner Images and Tables Displaying Differently Across Email Clients

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

Outlook v1.JPG

HOTMAIL V1

Hotmail v1.JPG

OUTLOOK V2

Outlook v2.JPG

HOTMAIL V2

Hotmail v2.JPG

0 Likes
3,457
Reply
Home