Mailchimp влияет на мои условные комментарии для Outlook в HTML

Question

У меня возникают проблемы с тем, чтобы мой HTML-шаблон электронной почты правильно отображался при его отправке из Mailchimp в Outlook 2007, 2013 и 2016. Дело в том, что, когда я загружаю HTML-код непосредственно для тестирования на Litmus, электронная почта хорошо обрабатывается во всех предварительных просмотрах Outlook, Когда я отправляю тестовое электронное письмо из Mailchimp в Litmus, оно выглядит непропорциональным в Outlook 2007, 2013 и 2016 (для Win7).

Mailchimp что-то делает с моими условными комментариями, ориентированными на Outlook, и как я могу обойти это?

Мои условные комментарии иногда работают, чтобы зафиксировать ширину некоторых элементов моей электронной почты MC (на скриншотах вы увидите, что текстовое поле имеет правильный размер для верхней карты, но не для второй). Но я не могу понять, почему одно работает, а другое нет, я пишу один и тот же комментарий для обоих.

Скриншоты:

когда Mailchimp отправляет письмо в Outlook (что пошло не так)

когда HTML визуализируется для Outlook напрямую (как он должен выглядеть)

Условные комментарии:

Я поместил в Outlook условные комментарии, например, так:

<!--[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]-->

Спасибо вам за помощь! Действительно ценю это.

Answer 1

Я чувствую вашу боль, у меня была та же проблема с шаблонами, которые я делал для клиента. Я хотел сделать иконки для сетчатки и позволить клиенту загружать изображения любого размера. К сожалению, после многих часов отладки и поиска в Интернете я прочитал следующее в посте MailChimp:

Outlook не распознает HTML, который ограничивает изображения. Это означает, что если вы используете HTML для изменения размера изображения, загруженного в кампанию или шаблон, оно может отображаться в исходном размере в Outlook. Обязательно измените размер своих изображений, прежде чем загружать их в MailChimp, или используйте наш встроенный редактор изображений.

источник: База знаний MailChimp

Я действительно не верил, что это действительно может быть правдой, поэтому я продолжал пытаться ограничить изображения. Я поместил фиксированную ширину в img, td, tr, table.. ничего не помогло.

К сожалению, я не могу действительно объяснить, что происходит, надеюсь, ссылка на статью о MC даст вам лучшее представление об этом. Но мой лучший ответ в любом случае установить max-width & width для ваших img и td. И скажите вашему клиенту, чтобы изменить размер изображений до разрешенного размера. Установка максимальной ширины и ширины также будет отображать #px при наведении курсора на редактируемое изображение в редакторе MailChimp. Я также узнал, что когда вы загружаете больший размер, MailChimp выдает маленькое предупреждение.

Если это может помочь каким-либо образом; посмотрите мой код ниже, который я использовал в своих шаблонах, чтобы сделать его плавным.

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

Answer 2

Вы используете изображения сетчатки в ваших электронных письмах? По опыту я обнаружил, что в outlook, если им дают большое изображение, они отображают его в большом размере, если конкретная ширина не назначена тегу img. Ниже приведен пример кода, который я использую для изображений в моих электронных письмах.

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

Также можете ли вы опубликовать тег img нарушающего элемента, чтобы я мог взглянуть на него лучше, пожалуйста?

ура