Если вас нет в интернете,  
вас нет в бизнесе  

Неограниченное кол-во жалоб/абуз

Строго запрещены:
-фишинг
-наркотики
-фарма
-казино

Бесплатный тест smtp сервера / бесплатные консультации


Наши клиенты:



все клиенты...

Мы принимаем:

   






Главная  /  База знаний  /  Правила HTML-верстки электронных писем

Правила HTML-верстки электронных писем

1.
Кодировка и meta-данные
Как правило, электронные письма верстаются в UTF-8:
<meta http-equiv=«Content-Type» content=«text/html; charset=utf-8» />
Если письмо отправляется в виде текстовой версии, а HTML-код находится в аттаче, то при получении емейлов почтовыми клиентами
могут возникать ошибки кодировки. Тогда используется cp1251:
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251” />
Совет

В последнее время наметилась тенденция использовать Multipart/Alternative MIME format:
Сontent-Type: multipart/alternative.

Когда отправляется емейл вида html+текст, его оформляют как multipart/alternative и две части – plain/text и
text/html.
3
2.
Верстка макета
Используется только табличная разметка.
Ширина креатива должна укладываться в 600 px, а высота может варьироваться в широких пределах, но, как правило, превышает 500 px.
Нельзя!
Применять сокращенные CSS-правила.

Внедрять «плавающие» блоки.

Позиционировать средствами CSS.
Совет
Чтобы стили были поняты большей частью почтовых клиентов, надо использовать
inline style
:
<div style=”...”>...</div>
Совет
Стоит ограничиться минимальным набором тэгов:
h1-h6
,
div
,
ul
,
ol
,
img
,
a
,
font
,
table
и не пытаться
превратить письмо в web 2.0 страницу.
4
3.
Отступы
При верстке для русских рассылок необходимо задавать фиксированные размеры для высоты и ширины ячеек. Например:
<td width=”150” height=”85” >
Ранее горизонтальные отступы делались при помощи дополнительных ячеек таблицы, однако популярные веб-сервисы (например,
Gmail, Яндекс и Рамблер) могут не понять такой конструкции:
<table cellpadding=”0” cellspacing=”0” border=”0” width=”100%”>
<tr>
<td width=”10” nowrap></td>
<td width=”100%”></td>
<td width=”10” nowrap></td>
</tr>
</table>
Серединная ячейка растянется на 100% (несмотря на
nowrap
), а левая и правая ячейки — исчезнут (т.е. их ширина будет равна нулю),
поэтому горизонтальные отступы «придётся» задавать при помощи CSS (а для сочетания «Mail.ru + резиновый дизайн», видимо,
вариантов нет — только фиксированные размеры всех ячеек).
Совет

Для создания левого отступа средствами чистого html можно использовать соответствующий тэг, имеющий
левый отступ «по умолчанию» —
dd
, но Outlook 2007, осуществляющий рендеринг html-страниц при помощи
движка от Microsoft Office Word, воспринимает тэг неправильно.
5

Для создания вертикальных отступов надо использовать картинки, т.е. сделать «пустую» картинку (лучше
не 1?1 px, а хотя бы 10?10 px, чтобы письмо не оказалось вдруг в папке со спамом) и путём задания для неё
нужной высоты формировать соответствующий отступ:
<div><img src=”padding.png” alt=”padding” border=”0” height=”10”></div>

Единицы измерения (px) в значении атрибута не указываются — в соответствии со стандартами
При тестировании было выявлено, что конструкция, описанная ниже, также впоплне адекватно воспринимается большинством
почтовых клиентов и сервисов:
<td style=”padding:20px;”>...</td>
4.
Текст и ссылки
Гарнитура, цвет и размер шрифта задается с помощью тэга
font
. Например:
<font face=”tahoma,sans-serif” color=”#000000” size=”2”>Текст</font>
Если нужно изменить цвет ссылки, тэг
font
располагается внутри
<a>
.
6
Совет

Обязательно добавьте атрибут
target
со значением
_blank
ко всем ссылкам, чтобы ваш сайт не пытался
открыться прямо в окне почтового клиента.

Если задать для ссылки
text-decoration:none
; и цвет с помощью
font
, например:
<a href=”http://example.ru” style=”color:#FFA500; text-decoration:none;”
target=”_blank”><font color=”#FFA500”>http://www.example.ru</font></a>
то ссылка будет нужного цвета (иначе, если написать без
text-decoration:none
, то невзирая на
font
,
она будет синей и подчеркнутой).
Нельзя

Использовать тэг
<p>
(для разрыва строк надо использовать
<br />
).

Вписывать стили в тэг
<body>
.

Использовать
red font
и любые другие оттенки на основе красного.

Использовать в тексте слишком много восклицательных знаков.

Использовать большие размеры шрифтов (от 16 pt и выше).

Применять выделение полужирным.
Помните, что письмо должно корректно отображаться вообще без использования CSS. Допустимо использование CSS, если тот же
прием дублируется в HTML.
Адреса всех ссылок необходимо дублировать текстом.
7
Совет

Помните, что там, где картинка, должна быть картинка, а там, где текст – текст (если позволяет дизайн).

Ссылки должны начинаться с «
http://
» (в конце ссылки не надо ставить «
/
»).

Для разрыва строк нужно использовать
<br />
.
Совет
Обязательно надо указывать фон у ячеек таблиц (например, вместо черной картинки ставится черный фон).
5.
Цвета
Чтобы сделать прямоугольный блок с текстом, залитый каким-нибудь фоновым цветом, придётся делать таблицу, в ней строку, в ней
ячейку. И для ячейки прописать атрибут
bgcolor
.
Нельзя
Использовать сокращенную запись (например,
#FFF
вместо
#FFFFFF
) при задании любого цвета в
шестнадцатеричном формате — заданный таким образом цвет автоматически трансформируется в чёрный.
8
6.
Изображения
У изображений всегда должен стоять тэг
alt
– альтернативный текст, т.к. пользователи часто отключают загрузку изображений по
умолчанию. Также обязательно надо указать атрибуты
height
и
width
внутри тэга
img
.
Многие почтовые клиенты игнорируют следующие атрибуты тэга
img
:
align
,
vspace
и
hspace
. Поэтому обтекание изображений
делается с помощью таблиц.
В
background
адреса картинок прописывать, фактически, нельзя — все оформительские рисунки придётся включать в письмо при
помощи тэга
img
.
Совет
Чтобы изображения с большой долей вероятности отобразились в письме, их надо включить в приложение (а не
ставить ссылку на картинку) и посылать вместе с емейлом, несмотря на увеличивающийся вес письма.
Совет
Лучше обнулить межстрочный интервал, чтобы предотвратить возникновение нежелательных отступов в
некоторых почтовых клиентах:
<div style=”line-height:0;”><img src=”border.png” alt=”border”></div>
9
Нельзя

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

Использовать много картинок, в частности разделителей и логотипов, и при этом мало текста. Фильтры также
считают это признаком спама.
7.
Почтовые клиенты
Почтовый клиент
Особенность
Совет
Outlook 2007
Не дает использовать фоновые картинки.
Нужно указать
background-image
для
body
.
Тогда Outlook покажет фон.
Но это не сработает, если используются
back
-
ground-position
или
background-re
-
peat
. В веб-клиентах этот фон не будет показан,
поэтому нужно дублировать его указание.
Дублируйте указание фото — в
style
у
body
для
Outlook, и в
background
у «корневой»
table
для веб-клиентов.
Делает поля сверху у элементов типа
div
. У
table
с
cellpadding=0 cellspacing=0
таких полей нет.
Неустранимо.
10
Почтовый клиент
Особенность
Совет
Outlook 2007
Иногда не растягивает/не уменьшает картинки.
Надо использовать картинки один к одному, как
сделано дизайнером при разработке макета.
Иногда картинка, помещённая внутрь
td
,
у которого задан
colspan
или
rowspan
,
обрезается вдоль продолжения линии границы
соседних ячеек, которые объединяет
colspan
или
rowspan
. В этом случае отображается
часть целого изображения-картинки.
Проблема не решается без разрезания
объединённой ячейки на несколько одиночных
и дробления изображения на несколько частей,
каждая из которых занимает одну простую ячейку
таблицы.
Иногда письмо без переносов строк начинает
отображаться неправильно.
Избегайте слишком длинных строк.
Узкий preview panel и хитрый механизм
отображения картинок. Если у картинки не
прописан размер, то движок IE изменяет размер
рамки так, чтобы в нее уместился весь текст из
поля
alt
. Получившаяся распорка шириной
примерно 900 px легко раздвигает столбцы, и
текст, который оказался в соседнем столбце,
ничего не может этому противопоставить —
он выстраивается узкой полоской или даже
уезжает за пределы экрана.
Чтобы избежать такой чудовищной
трансформации макета, достаточно задать
ширину и высоту картинки стандартными
атрибутами
width
и
height
.
TheBat!
При использовании прозрачных гифов
прозрачные точки заменяются чёрными.
«Прозрачные» распорки должны заполняться
цветом фона, на котором они расположены.
11
Почтовый клиент
Особенность
Совет
TheBat!
Отображает некоторые стили. В нем работают
«простые» определения, касающиеся оформле-
ния шрифта, отступы (
margin
и
padding
) и
цвет фона (
background-color
). Остальные
стили отключает.
Неустранимо.
Не загружает изображения по умолчанию.
После получения письма не предлагает их
загрузить.
Неустранимо.
Thunderbird
Не загружает изображения по умолчанию.
Неустранимо.
Совет
В Outlook есть такой параметр у тэга —
NOSEND
. Он нужен для того, чтобы получателю письма приходило письмо
без картинок, а картинки он мог по желанию подгрузить с сервера через контекстное меню. Пример:
<img src=”внутренний_сервер_картинок/img1.jpg” width=”145” height=”110”
NOSEND=”1” />
12
8.
Почтовые сервисы
Почтовый сервис
Особенность
Совет
Mail.ru
Вырезает практически весь CSS – тэг
style
просто заменяется на
xstyle
.
Неустранимо.
Делает большие отступы у элементов.
Нужно обернуть письмо в
<div id=«mailsub»>...</div>
.
Превращает отступы (
\t
) в пробелы.
Код при верстке не должен отбиваться табами.
Сочетание "
>0<
" заменяется на полный текст
письма.
Пример: «Скидка: 0 руб.» в интерфейсе Mail.ru
отображается как «Скидка: Скидка: 0 руб. руб.»
Правится заменой на "
> 0 <
".
Gmail
У картинки, которая является единственной в
ячейке таблицы, появляется 3 px отступ снизу.
Можно устранить, указав для изображения
style=«display:block»
.
Рамблер
Картинки, указанные в теле письма, копируются
на сервер Рамблера с подменой ссылок.
Поэтому в письме, отправленном с собственных
серверов, закрытых извне http-авторизаций,
картинки не будут отображаться.
Неустранимо.
13
Почтовый сервис
Особенность
Совет
Яндекс
Если тело письма поместить внутрь {
strip
}
(при этом вырезаются все переносы строк), то
иногда в теле письма появляются непонятные
переносы, которые могут попасть на значение
атрибута
src
или
href
. При этом картинки
могут не отображаться, а ссылки не открываться.
Не стоит помещать письмо внутрь {
strip
}.
Превращает отступы (
\t
) в пробелы.
Код при верстке не должен отбиваться табами.
Совет
Некоторые методы, которых необходимо придерживаться для Gmail и старых почтовых клиентов:

Прописывайте определение фонового цвета с помощью атрибута
bgcolor
тэга
td
, не используйте для этих
целей CSS-стили.

Используйте атрибут
background
для тэга
td
, чтобы применить фоновую картинку, вместо CSS-стилей.

Используйте
padding
для контроля отступов в ячейках,
margin
в этом случае не работает.

Если вам нужны границы вокруг ячеек, используйте дополнительный тэг
div
, в котором прописывайте
значения границ, так как назначение границ напрямую тэгу
td
не будет работать в Google Mail.

Выставляйте отступы по 10 пикселей вокруг контента, что бы текст не “заезжал” на границы.

Тщательно проверяйте все шрифты, может случиться, что вы забудете прописать стили в нескольких местах.
Желательно верстать письмо вообще без пробелов – код будет абсолютно неудобно читать, но не добавятся
нежелательные отступы во многих почтовых клиентах.
14
Ссылки на полезные ресурсы

http://www.email-standards.org
– емейл-стандарты.

http://www.campaignmonitor.com/templates
http://www.mailchimp.com/resources/html_email_templates
– примеры шаблонов US-
платформ рассылки (не применимы в российских условиях из-за большого числа стилей, но полезны для общего развития).

http://spamcheck.sitesell.com
– проверка на спам.

http://www.campaignmonitor.com/css
– поддержка CSS в разных клиентах.

http://www.campaignmonitor.com/resources/category-archive/cat/designing-and-building-emails
– несколько конкретных примеров
решения часто встречающихся задач.

http://www.email-marketing-reports.com/iland/2008/07/42-html-email-design-resources.html
– 42 популярных US-ресурса о верстке
писем (данные 2008 года).

http://24ways.org/2009/rock-solid-html-emails
– толковые рекомендации и примеры.

http://www.mailchimp.com/kb/article/how-to-code-html-emails
– последние рекомендации MailChimp по верстке писем.

 
24.08.17 

31.05.16 

31.01.15 

19.02.14 

11.02.14 




Вверх страницы
Вниз страницы
Cloudim - онлайн консультант для сайта бесплатно.
Работает на Amiro CMS - Free