Электронная почта HTML - промежутки между изображениями в Outlook 2013

Я составляю электронное письмо в формате HTML, которое отлично смотрится во всех основных почтовых клиентах, кроме Outlook 2013, который добавляет вертикальные промежутки между фрагментами моих изображений. К сожалению, на моем компьютере не установлен Outlook 2013, поэтому тестирование затруднено, но на снимке экрана моего клиента видно, что это выглядит так: скриншот проблемных промежутков

Мой код доступен здесь - HTML-версия.

Я понятия не имею, что еще я могу сделать, чтобы избавиться от пробелов - я установил высоту строки для tds и изображений на ноль, я установил изображения для отображения: блок, я установил таблицы на границу 0, cellpadding и cellspacing ноль, и border-collapse: collapse. Что еще я могу сделать, чтобы это исправить?

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


html email outlook html-email outlook-2013
person Emma W    schedule 08.11.2013    source источник

Ответы (3)


arrow_upward
14
arrow_downward

Проблема решена - изменение высоты строки tds, содержащего изображения, на высоту изображения, а не на 0, устраняет пробелы и не нарушает макет в других клиентах. Так

    <td width="150" style="line-height: 83px;">
       <img src="" height="83px">
    </td>
person Emma W    schedule 08.11.2013
comment
Это большое открытие. Раньше не сталкивался с этим исправлением. - person John; 08.11.2013
comment
Джон прав в том, что программирование разметки электронной почты по-другому полностью минимизирует эту проблему. Я использую эту технику постоянно. Однако избегайте колпанов. Даже если они могут работать, зачем все усложнять. Этот ответ - самое быстрое и эффективное решение. - person Darryl Vos; 08.11.2013
comment
Эш, я собирался начать рвать волосы из-за этого. Хорошее исправление. - person Aaron Hipple; 18.02.2014

arrow_upward
3
arrow_downward

Вы сталкиваетесь с проблемами, потому что неправильно используете всю компоновку. Вам не нужно разбивать изображение часов на несколько частей, и определенно не должно быть изображения, содержащего буквы DS из названия в центре.

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

Также рекомендуется иметь все CTA (призывы к действию) и важную копию / текст в html, а не изображения, поскольку большинство клиентов по умолчанию блокируют изображения. Спамом также считается электронное письмо с плохим соотношением изображений и текста.

Попробуйте:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top" width="450">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="top" width="400" style="padding:30px;">
           Fall in love with...
          </td>
          <td valign="top" width="50"> <!-- It is easier to split an image vertically -->
            <img alt="Ring Overhang" src="" width="50" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td colspan="2" valign="top" width="450">
            <img alt="Shop now screenshots" src="" width="450" height="200" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td colspan="2" valign="top" width="450" style="padding-top:30px; padding-bottom:30px;">
            Luxury Watch Brands  <!-- Titles like this should always be in text not images -->
          </td>
        </tr>
        <tr>
          <td colspan="2" valign="top" width="450">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="150">
                  <img alt="Watch 1" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
                <td width="150">
                  <img alt="Watch 2" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
                <td width="150">
                  <img alt="Watch 3" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td valign="top" colspan="3" width="250">
      <table width="250" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            <img alt="Ring Image" src="" width="250" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td>
            <img alt="Big Watch" src="" width="250" height="450" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td>
            Shop Luxury Watches >   <!-- Call to actions are better in text not images -->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
person John    schedule 08.11.2013
comment
Раньше я использовал colspans, но столкнулся с еще большим количеством проблем в Outlook (с неправильным отображением ширины ячеек), чем сейчас (с высотой ячеек). Я согласен с тем, что использование заголовков в виде изображений - плохая практика, но меня попросили сохранить их таким образом, поскольку, по-видимому, шрифт является важной частью брендинга - это было настолько близко, насколько я мог: / Я действительно теперь разрешил таблицу Outlook проблема с высотой - изменение высоты строки в tds с 0 до высоты строки, похоже, решает проблему. Спасибо! - person Emma W; 08.11.2013
comment
@EmmaW Вы можете найти это полезным в случае, если Outlook не соблюдает ширина colspan. - person John; 08.11.2013

arrow_upward
0
arrow_downward

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

person Umer Farook    schedule 25.11.2014