Часть Ваших подписчиков просматривает полученные письма через веб интерфейс своих почтовых ящиков (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-рассылка