Нужно ли использовать спейсерные изображения при кодировании электронных писем в формате HTML?
Я понимаю, что для электронных писем в формате 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)
Лично я никогда не использую разделительные картинки, потому что они разрушают макет при отключенной блокировке изображений по трем причинам:
If they don't render at all, any layout that requires the spacer image is lost. If they render incorrectly (such as reverting to their original size, or proportionally to their original size) they break the layout. 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» на страницах)
http://www.banane.com/workblog/?p=61 http://www.campaignmonitor.com/design-guidelines/Примечание. 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;")> </td>
Если вы держите свои ячейки выше 19px (минимальная высота Outlook по умолчанию), вам никогда не нужно использовать высоту строки и простой<td height="20"> </td> работает отлично. Пример:
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center">
top
</td>
<tr>
</tr>
<td height="20">
</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">
<br>
bottom
</td>
</tr>
</table>
Обратите внимание на последний пример, который я использовал <br> вместо просто<br>, Это связано с тем, что Outlook свернет любую строку или ячейку, в которой нет содержимого. Это та же самая причина, почему оригинальный пример также имеет в разделительной клетке. Если бы вы добавили несколько строк или отступов внизу, это выглядело бы так:
<td align="center">
<br>
<br>
<br>
bottom
<br>
<br>
<br>
</td>
Есть два преимущества двух вариантов без разделительной ячейки. Во-первых, это быстрее и содержит меньше кода. Во-вторых, он рендерится более последовательно, когда кто-то перенаправляет вашу электронную почту из Outlook. Потрясающий движок MS Word в Outlook<p> теги, которые добавляют неизбежный разрыв между строками. Наличие на одну строку меньше будет держать вашу электронную почту ближе к вашему первоначальному дизайну.
Вы можете определенно избежать использования проставки GIF-файлов.
Я считаю, что следующий код работает во всех клиентах. Я обычно либо указываю ширину или высоту этих пустых ячеек. Этот конкретный пример - то, что я использую для создания вертикального пространства:
<tr>
<td style="line-height: 0; font-size: 0;" height="10"> </td>
</tr>
, Кроме того, я думаю, чтоfont-size:0;line-height:0; может быть проигнорировано в некоторых клиентах, так что вы получите 14px по умолчанию , Может не отображаться как проблема рендеринга из-за сочетания поддерживаемого / неподдерживаемого контента, но я думаю, что он более ошибочный, чем вообще его не использует.