Несколько правил html-верстки шаблона почтовой рассылки.

[LILUS]

Tue, 23 Oct 2012 17:06:45 +0400

Недавно при разработке рассылки новостей компании, мне нужно было сверстать html-шаблон для выпусков рассылки. С этой задачей я столкнулся впервые и обнаружил для себя некоторые своеобразные моменты ее реализации. Об этом и пойдет речь в данной статье.

Дело в том, что при верстке нужно учитывать то, что подписчик может просматривать выпуски рассылки и с помощью программ Email-клиентов, и заходя на почтовый ящик через веб-интерфейс. Так же как браузеры, почтовые клиенты по-разному отображают письма в формате html, которыми являются выпуски рассылки. Нужно стараться добиваться одинакового внешнего вида полученного письма и при просмотре через веб-интерфейс, и в Email-клиенте.

Верстка рассылки

Вообще при работе над версткой html-шаблона рассылки, приходиться использовать веб-технологии 10-15 летней давности. Вот некоторые правила, которых я придерживался при верстке шаблона рассылки:

• Использовать табличную верстку;


• Желательно устанавливать фиксированную ширину таблиц в шаблоне;


• Использовать атрибуты cellpadding и cellspacing в теге ‘<table>’;


• Не использовать внешние таблицы стилей, находящиеся в CSS-файлах;


• Применять CSS-правила непосредственно к html-элементам, размещая их внутри атрибута style;


• Использовать при верстке устаревшие html-элементы (например, <font>) и атрибуты элементов (например, border, align и bgcolor для таблиц);


• Не использовать картинку в качестве фона (CSS-свойство background-image), а вставлять ее с помощью тега ‘<img />’


• Явно указывать ширину и высоту размещаемого изображения в атрибутах тега ‘<img />’;


• Использовать атрибут alt у изображений;


• Для создания отступов у изображений нужно использовать атрибуты hspace и vspace тега ‘<img />’;


• Использовать абсолютный путь к изображениям, используемым в верстке;


• Не использовать DOCTYPE, т.к. Email-клиенты его вырезают;


• Не использовать javaScript в коде шаблона;


• Использовать карты изображений (элемент ‘<map>’) вместо нарезки изображения и верстки его с использованием таблиц;

На сайте “Campaign Monitor” можно ознакомиться со списком CSS-селекторов и свойств, поддерживаемых различными почтовыми клиентами.

Тестирование рассылки

После завершения работы над версткой шаблона рассылки, верстку нужно протестировать. Надежней всего будет отправить тестовый выпуск на различные адреса и посмотреть как отображается письмо в различных Email-клиента, а также через веб-интерфейс популярных сервисов (mail.ru, yandex.ru, rambler.ru и подобных)

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