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

Описание: Программирование в HTML
Модератор: Aleksandr

LILUS M
Автор темы, Старшина
Старшина
Аватара
LILUS M
Автор темы, Старшина
Старшина
Сообщения: 136
Зарегистрирован: 2 мая 2013
С нами: 10 лет 10 месяцев

#1 LILUS » 31 января 2014, 18:38

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

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



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 и подобных)


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



Вернуться в «HTML»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 5 гостей