Матвей Земсков

Заметки веб-мастера

Вторник, 23 октября 2012 11:07

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

Оцените материал
(2 голосов)

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

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

Дело в том, что при верстке нужно учитывать то, что подписчик может просматривать выпуски рассылки и с помощью программ 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 и подобных)

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

Прочитано 11033 раз
Добавить комментарий

Комментарии   

 
+1 # Olunla 28.06.2013 16:40
Не соглашусь с вашими советами, тег font признан устаревшим и не поддерживается многими веб-интерфейсами почтовиков,его лучше заменить на span.

Так же у изображений не обязательно прописывать все размеры, если нет необходимости менять размер изображения средствами HTML
Ответить | Ответить с цитатой | Цитировать
 
 
0 # ВебМастерица 04.05.2014 02:59
Не соглашусь по поводу тега map. Некоторые почтовые клиенты его не видят - например, outlook не всегда на него реагирует, уж лучше резать.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 04.05.2014 10:59
Возможно. Скажу, что применение тега map при верстке рассылки это только совет, а не руководство к действию - в любом случае нужно тестировать каждый выпуск рассылки и принимать решение на основе результатов этого теста.
Ответить | Ответить с цитатой | Цитировать
 
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: