Вопрос по email – Нужно ли использовать спейсерные изображения при кодировании электронных писем в формате HTML?

9

Я понимаю, что для электронных писем в формате HTML нужно использовать макеты старой школы - как и многие другие ответы на SO (например,HTML электронная почта: таблицы или div?, HTML электронная почта с использованием CSS).

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

Например, сравните эти три макета:

РАЗМЕРЫ:

<table cellpadding="0" cellspacing="0" border="0" width="100">
  <tr>
    <td width="100" height="10"></td>
  </tr>
</table>

С SPACER GIF:

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td><img src="spacer.gif" width="100" height="10"></td>
  </tr>
</table>

С SPACER GIF И РАЗМЕРАМИ:

<table cellpadding="0" cellspacing="0" border="0" width="100">
  <tr>
    <td width="100" height="10"><img src="spacer.gif" width="100" height="10"></td>
  </tr>
</table>

Как я могу использовать их с размерами? Есть ли почтовые клиенты, которым по-прежнему требуются дистанционные картинки? Есть ли вред в любом случае?

Ваш Ответ

4   ответа
11

Лично я никогда не использую разделительные картинки, потому что они разрушают макет при отключенной блокировке изображений по трем причинам:

  1. If they don't render at all, any layout that requires the spacer image is lost.
  2. If they render incorrectly (such as reverting to their original size, or proportionally to their original size) they break the layout.
  3. Even if they do render properly and the layout works, all the image placeholders that are displayed when image blocking is turned on distract from the message of the email.

Чтобы обойти проблему № 2, вы можете сохранить каждое изображение с его фактическими размерами. Однако это, очевидно, увеличивается:

  • Time to build
  • Number of images to be downloaded by client

и это не решает проблемы № 1 и № 3.

Причина использования дистанционных картинок в том, что некоторые клиенты (Outlook 2007, Outlook 2010, Lotus Notes, Hotmail / Live Mail) не будут отображать пустую ячейку. Очень трудно иметь абсолютную точность по отношению к размерам текстового узла, и поэтому достаточно изображения спейсера. Однако даже упомянутые клиенты будут отображать пустую ячейку.that has width defined.

Так что, пока вы определяете ширину пикселя для любых пустых ячеек, у вас все в порядке. Чтобы вернуться к примерам в вопросе:

  • Dimensions-only - works with and without image-blocking in all major email clients
  • Spacer images only - works only when image-blocking is turned off
  • Dimensions and spacer images - works only when image-blocking is turned off

Из-за этого,you should use dimensions and not spacer gifs.

Различные статьи также обсуждают этот вопрос (ищите «spacer images» на страницах)

@ Марко У меня была дискуссия с кем-то на другом посте - этот вопрос был касательным к ФП, поэтому я не хотел обсуждать это в комментариях. Я не смог найти существующий Q + A по этому поводу, поэтому написал один и связался с ним. Dan Blows
Я не понимаю: вы задаете вопрос и сразу отвечаете на него ... Для чего это?
@ Pumbaa80 полный список? Все проверено на Лакмусе, плюс еще несколько. За 7 лет работы с электронной почтой я не сталкивался с клиентом, у которого есть проблема с не включением разделительных картинок, пока определяется ширина ячейки. «Рекомендация по передовому опыту»; восходит к дням IE4 и Netscape, но с конца 90-х годов проблем не было. Dan Blows
"упомянутые клиенты будут отображать пустую ячейку с определенной шириной" - какие-либо источники с полными списками для других клиентов?
@ Pumbaa80 Некоторые клиенты (я думаю, что одна версия Outlook и Thunderbird) расширяют местозаполнитель, чтобы соответствовать либо предупреждающему сообщению, либо тегу alt. Другие клиенты расширяют изображение пропорционально - поэтому вместо растяжения изображения 1х1 до 1х10 оно становится 10х10. В обоих случаях размеры изображения переопределяют размеры вашей ячейки, поэтому теперь макет нарушен. Учитывая, что все клиенты работают превосходно, пока вы определяете ширину ячейки (кроме Lotus Notes & lt; v7, которая также не будет работать с изображениями распорок), изображения распорок в лучшем случае бесполезны, а в худшем случае повреждают. Dan Blows
1

Примечание. Outlook 2007/2010 рассматривает пустые ячейки как пробелы. И применяет к ним атрибуты текста и цвета фона по умолчанию. (поэтому, если вашему пользователю нравятся фиолетовые фоны, ячейки без цвета получаются с фиолетовым фоном, выглядывающим сквозь них).

Чтобы сместить этот формат вашей пустой проставочной ячейки следующим образом:

<td width=(a percentage or a pixel width) height=(optional unless needed) bgcolor="#FFFFFF(always use 6 digit hex!)" style="font-size:1px; line-height:1px;")>&nbsp;</td>
2

Если вы держите свои ячейки выше 19px (минимальная высота Outlook по умолчанию), вам никогда не нужно использовать высоту строки и простой<td height="20">&nbsp;</td> работает отлично. Пример:

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td align="center">
      top
    </td>
  <tr>
  </tr>
    <td height="20">
      &nbsp;
    </td>
  <tr>
  </tr>
    <td align="center">
      bottom
    </td>
  </tr>
</table>  

Но для вертикального интервала в большинстве случаев вы, вероятно, можете избежать этого и добавить отступ в строку выше или ниже:

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td align="center">
      top
    </td>
  <tr>
  </tr>
    <td align="center" style="padding-top:20px;">
      bottom
    </td>
  </tr>
</table>

или вот так, без дополнения:

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td align="center">
      top
    </td>
  <tr>
  </tr>
    <td align="center">
      &nbsp;<br>
      bottom
    </td>
  </tr>
</table>

Обратите внимание на последний пример, который я использовал&nbsp;<br> вместо просто<br>, Это связано с тем, что Outlook свернет любую строку или ячейку, в которой нет содержимого. Это та же самая причина, почему оригинальный пример также имеет&nbsp; в разделительной клетке. Если бы вы добавили несколько строк или отступов внизу, это выглядело бы так:

<td align="center">
  &nbsp;<br>
  &nbsp;<br>
  &nbsp;<br>
  bottom
  <br>&nbsp;
  <br>&nbsp;
  <br>&nbsp;
</td>

Есть два преимущества двух вариантов без разделительной ячейки. Во-первых, это быстрее и содержит меньше кода. Во-вторых, он рендерится более последовательно, когда кто-то перенаправляет вашу электронную почту из Outlook. Потрясающий движок MS Word в Outlook<p> теги, которые добавляют неизбежный разрыв между строками. Наличие на одну строку меньше будет держать вашу электронную почту ближе к вашему первоначальному дизайну.

2

Вы можете определенно избежать использования проставки GIF-файлов.

Я считаю, что следующий код работает во всех клиентах. Я обычно либо указываю ширину или высоту этих пустых ячеек. Этот конкретный пример - то, что я использую для создания вертикального пространства:

<tr>
 <td style="line-height: 0; font-size: 0;" height="10">&nbsp;</td>
</tr>
Это правильный код, чтобы он работал в Outlook. Какие почтовые клиенты его не поддерживают?
Если вы указываете высоту или ширину, вам даже не нужно&nbsp;, Кроме того, я думаю, чтоfont-size:0;line-height:0; может быть проигнорировано в некоторых клиентах, так что вы получите 14px по умолчанию&nbsp;, Может не отображаться как проблема рендеринга из-за сочетания поддерживаемого / неподдерживаемого контента, но я думаю, что он более ошибочный, чем вообще его не использует. Dan Blows

Похожие вопросы