Дело в том, что при верстке нужно учитывать то, что подписчик может просматривать выпуски рассылки и с помощью программ Email-клиентов, и заходя на почтовый ящик через веб-интерфейс. Так же как браузеры, почтовые клиенты по-разному отображают письма в формате HTML, которыми являются выпуски рассылки. Нужно стараться добиваться одинакового внешнего вида полученного письма и при просмотре через веб-интерфейс, и в Email-клиенте.
Верстка рассылки
Вообще при работе над версткой html-шаблона рассылки, приходиться использовать веб-технологии 10-15 летней давности. Вот некоторые правила, которых я придерживался при верстке шаблона рассылки:
- Использовать табличную верстку;
- Желательно устанавливать фиксированную ширину таблиц в шаблоне;
- Использовать атрибуты
cellpaddingиcellspacingв теге‘<table>’; - Не использовать внешние таблицы стилей, находящиеся в CSS-файлах;
- Применять CSS-правила непосредственно к html-элементам, размещая их внутри атрибута
style. В процессе верстки вам может помочь он-лайн инструмент zurb inliner, который преобразует код страницы со стилями, размещенными в разделе'<head>'в HTML с инлайновыми стилями; - Использовать при верстке устаревшие HTML-элементы (например,
<font>) и атрибуты элементов (например, border, align и bgcolor для таблиц); - Не использовать картинку в качестве фона, а вставлять ее с помощью тега
‘<img />’. CSS-правилоbackground-imageне поддерживается примерно 20% email-клиентов. - Явно указывать ширину и высоту размещаемого изображения в атрибутах тега
‘<img />’; - Использовать атрибут
altу изображений; - Для создания отступов у изображений нужно использовать атрибуты
hspaceиvspaceтега‘<img />’; - Изображения, используемые в рассылке, нужно хранить на своем сервере, а не на каком-нибудь стороннем хостинге для изображений. Чтобы они не были удалены без вашего ведома;
- Использовать абсолютный путь к изображениям, используемым в верстке;
- Не использовать
DOCTYPE, т.к. Email-клиенты его вырезают; - Не использовать javaScript в коде шаблона;
- Использовать карты изображений (элемент
‘<map>’) вместо нарезки изображения и верстки его с использованием таблиц; - Не нужно использовать при верстке абсолютное, относительное и фиксированное позиционирование. CSS-правила
positionвырезаются почтовыми клиентами в целях безопасности;
Добавлено 09.04.2015 С момента написания данной статьи уже прошло несколько лет и ситуация с версткой рассылок изменилась. Поэтому мне хотелось бы обратить внимание читателя на пару современных и актуальных возможностей:
- При верстке рассылки можно использовать не только табличную, но и блочную верстку. На данный момент верстка писем таблицами не так актуальна, как несколько лет назад, потому что большинство почтовых клиентов отлично воспринимает блочную верстку;
- Ширину основного контейнера можно указывать с помощью CSS-правила
max-width. Таким образом рассылка будет корректно отображаться на мобильных устройствах с небольшими экранами. Используя такой подход нужно учитывать то, что изображения также должны масштабироваться; - При верстке рассылок можно пользоваться уже готовыми шаблонами. Например, существует полезный набор шаблонов под названием Cerberus. Шаблоны корректно отображаются не только в почтовых клиентах (Outlook 2000/02/03/07/10/13 (Windows), Apple Mail, Thunderbird) и веб-интерфейсах почтовых сервисов (Gmail, Outlook.com, Yahoo), но и в приложениях на мобильных платформах (Mail (iOS), Gmail (iOS, Android 4.4), Mail (Android 4.4) и других)
На сайте “Campaign Monitor” можно ознакомиться со списком CSS-селекторов и свойств, поддерживаемых различными почтовыми клиентами.
На сайте FreshInbox размещена более подробная информация о поддержке CSS почтовыми клиентами.
Тестирование рассылки
После завершения работы над версткой шаблона рассылки, верстку нужно протестировать. Надежней всего будет отправить тестовый выпуск на различные адреса и посмотреть как отображается письмо в различных Email-клиента, а также через веб-интерфейс популярных сервисов (mail.ru, yandex.ru, rambler.ru и подобных)
Я написал небольшой скрипт, с помощью которого вы сможете отправить ваш выпуск рассылки на различные почтовые ящики, а потом зайти на них используя веб-интерфейс или ваш почтовый клиент и проверить как будет отображаться ваша верстка.