1

I'm having trouble getting my HTML email template to render properly when it is sent from Mailchimp to Outlook 2007, 2013 and 2016. The thing is, when I upload the HTML directly for testing on Litmus, the email renders fine across all Outlook previews. When I send the test email from Mailchimp to Litmus, the email looks out of proportion in Outlook 2007, 2013 and 2016 (for Win7).

Is Mailchimp doing something with my Outlook-targeting conditional comments, and how can I work around that?

My conditional comments seem to work sometimes to fix the width on some elements of my MC email (you'll see in the screenshots, the textbox is the right size for the top card but not on the second one). But for the life of me, I can't figure out why one works and the other doesn't, I'm writing the same comment for both.

Screenshots:

when Mailchimp sends the email to Outlook (what went wrong)

when the HTML is rendered for Outlook directly (what it's supposed to look like)

Conditional comments:

I've put in Outlook-specific conditional comments like so: 

<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->

<!--BODY TABLE-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
...
</table>

<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->

Thank you for the help! Really appreciate it.

Cherrie
  • 13
  • 2

2 Answers2

1

I feel your pain, I've had the same issue for templates I was making for a client. I wanted to make the icons retina proof and let the client upload any image size he'd like. Unfortunately after many many hours debugging en searching the web, I read the following on a MailChimp post:

Outlook doesn’t recognize the HTML that constrains images. This means that if you use HTML to resize an image uploaded to a campaign or template, it may display at the original size in Outlook. Be sure to resize your images before you upload them to MailChimp, or use our built-in image editor.

source: MailChimp Knowledge Base

I didn't really believe that this could actually be true so I kept trying to constrain the images. I've put fixed width on the img, td, tr, table.. nothing helped.

Sadly I can't really explain what happens, hopefully the link to the MC article gives you a better view on it. But my best answer is to set a max-width & width to your img and td anyway. And tell your client to resize the images to the allowed size. Setting a max-width and width will also display the #px when hovering over the editable image in your MailChimp editor. I also found out that when you do upload a bigger size, MailChimp throws a lil' warning.

If it may help in any way; see my code below that I used in my templates to make it fluid. 

<table mc:repeatable mc:variant="Item with image top and CTA" width="650" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:650px;">
<tr>
  <td style="padding:30px 20px 40px 20px;" bgcolor="#FFFFFF">
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td style="padding-bottom:15px;max-width:610px;">
          <img src="/images/img.jpg" alt="x" style="width:100%; max-width:610px;" width="610" mc:edit="article_image">
        </td>
      </tr>
    </tr>
  </table>
</td>

Kevincore
  • 494
  • 1
  • 4
  • 16
  • Yes - that's exactly what I figured out too when I compared my original html and the code that mailchimp spits out - MC for some reason strips out the width unless I go into the editor and set a width. So far it seems I'm doing the same as you to get it to display right - to make sure the person using the template sets the width in the MC Editor. I've also found reference to this issue [here](http://stackoverflow.com/questions/31182584/how-to-retain-image-dimensions-in-mailchimp-templates) but for some reason can't get mso conditional comments to work? Have you tried that/had any luck? – Cherrie Feb 03 '17 at 15:50
  • MailChimp is simply wrong in their explanation cited above, and it's a shame. Setting the width as an html attribute is pretty much the *only* way to constrain the width in certain versions of Outlook. MC stripping that attribute makes it virtually impossible for me to provide a template for my clients that uses foolproof, responsive retina images. I really can't expect my non-technical clients to remember to set the width of each image they add, especially when it will look just fine to them in the preview if they don't. I hope MailChimp figures this one out. – Kerri Mar 14 '18 at 00:29
0

Are you using retina images in your emails? From experience I have found that outlook's, if they are given a big image, they display it at a big size if a specific width is not assigned to the img tag. Below is an example of a code i use for the images in my emails.

<img src="[IMAGE PATH]" width="" height="" style="width:px; height:px;display:block;" border="0">

Also can you post the img tag of the offending element so i can have a look at it better please?

Cheers

Syfer
  • 4,262
  • 3
  • 20
  • 37
  • Thanks - you were totally on the right track, after comparing the original html and the code that comes from the Mailchimp email, I realized that mailchimp strips out the width in the img tag - and found some reference to this problem as well [here](http://stackoverflow.com/questions/31182584/how-to-retain-image-dimensions-in-mailchimp-templates). The only way I've figured how to temporarily fix it is by setting the width directly in the mailchimp design editor - which is a tad annoying. I'm just not sure why my mso conditional comments aren't helping to constrain the width? – Cherrie Feb 03 '17 at 15:46
  • Hi Cherrie, The width of the table in outlook is only for the table i am afraid not targeting the image tag. If you want, you can add a conditional statement to display just a particular image for outlook and one for the rest? Cheers – Syfer Feb 09 '17 at 08:12