Основные ошибки в подготовке писем. Верстка HTML-писем

К списку статей

HTML Часть Ваших подписчиков просматривает полученные письма через веб интерфейс своих почтовых ящиков (gmail.com, yandex.ru, mail.ru И тд) и это отлично. Но остальная часть подписчиков использует почтовые клиенты, такие как Outlook, The bat и т.д. Некоторые из этих программ имеют ограниченные способности в отображении полученных писем. Поэтому, для корректного отображения писем, необходимо придерживаться следующих правил:

При компоновке письма всегда уменьшайте рисунки до необходимых размеров заранее, так как в Outlook они все равно увеличатся до своего исходного размера, испортив вам всю картину.
К сожалению, фоновые изображения не поддерживаются некоторыми почтовыми клиентами, поэтому не стоит их использовать в своем письме, либо задавайте альтернативный однотонный фоновый цвет. Единственный способ добиться отображения фонового рисунка во всех перечисленных выше почтовых клиентах это прописать исключительно в тег <body> следующий стиль: style="background: url();
Блочная верстка не подойдет! Поэтому про такие свойства как clear и float можно забыть. За основу нужно брать только таблицы, оптимальная ширина до 700 px
Множество статей, посвященные верстке HTML-писем единогласно пишут, что все стили нужно прописывать исключительно inline. Это, конечно, правильно, но уже в настоящий момент, все перечисленные мною выше почтовые системы понимают и встроенные стили (даже MC Office Outlook всех версий). Внешние таблицы стилей по-прежнему использовать нельзя.
```
<style type="text/css">
span
{
font-family: Arial, sans-serif;
font-size: 12px;
color: #404040;
}
</style> 
```
Для того чтобы текст письма отображался во всех почтовых клиентах одинаково, его необходимо оборачивать в дополнительный инлайновский тег (используя старый – добрый font) Стили обобщать нельзя, т.е. если прописать font:italic 10px Arial; половина почтовиков их не поймет, прописывать нужно каждый стиль отдельно font-family, font-style, font-size и т.д.;
```
<p>
   <font face="Arial" size="2" style="font-size: 12px;" color="#404040">Это тестовый текст</font>
</p> 
```
Padding и margin лучше не использовать. Вместо них <tr><td></td></tr> c фиксированными размерами;
Цвета прописываются также полностью, т.е. color:#FFF не работает, работает color:#FFFFFF
Для оформления текста используется тег <div> или <span>, не использовать <p>, <font>
Для таблиц нужно обязательно сбрасывать все отступы по умолчанию и границы т.е. border=«0« cellpadding="0" cellspacing=»0»
Ячейкам таблицы задавайте точные размеры, если не хотите увидеть свою таблицу, расползшуюся на все тело письма.
Для горизонтальных отступов использовать ячейки таблицы с заданной шириной, внутрь ячейки помещать тег <br/>
Если в ячейке лежит только картинка, например высотой 10px, для нее нужно прописать такой ячейке
```
font-size:1px; line-height:1px;
```
Для вертикального выравнивания в таблице использовать атрибут valign
Для тега <img> обязательно прописывать размеры, и атрибут border=0
Для ссылок ставить target=«_blank»

После составления рассылки необходимо всегда выполнять тестовую рассылку на свой почтовый ящик, для того, чтобы убедиться, что рассылка придёт пользователям в том виде, в котором она отображается на экране браузера. При этом письмо желательно просматривать как в браузере, так и в Outlook.

Также рекомендую выполнять проверку на СПАМ, и проанализировать полученные рекомендации по улучшению компоновки письма.

Теги: html email-рассылка

Читайте также

Продукт

Юридическая информация

Центр помощи

Сообщество