Я не очень давно писала такое мини-руководство для верстки рассылок.
Рассылку лучше всего сначала верстать ручками в файлике .html.
Из статьи последней редакции 2015 года, заготовка файла такая:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#ffffff" style="padding:0;margin:0;">
…
</body>
</html>
Источник
https://mindbox.fogbugz.com/?W95
Дальше мы забываем про тэг
<body>, его параметры будут проигнорированы почтовыми сервисами (в лучшем случае), забываем про блочную верстку и вообще про существование тэга
<div>, возвращаемся в 1996-98 год и вспоминаем табличную верстку.
Конечно.. Можно использовать div, но стоит ли? Учитывая, что где-то они будут игнориться. Хотя есть вот прием - оборачивание картинки в тэг div, чтобы outlook, не делал бы ей лишние отступы. Но по-моему лучше картинке задать display: block;
Весь дизайн-макет мысленно (или графически) разбиваем на ячейки одной таблицы, или на вложенные таблицы, насколько хватит воображения.
Для того, чтобы задать фон для будущей рассылки лучше использовать таблицу с одной ячейкой, шириной в 100%, внутри которой уже верстать основную таблицу рассылки.
Стили
Про хэдерные стили через тэг
<style>тоже забываем - только инлайновые стили.
Важно помнить, что некоторые почтовики удаляют все стили, которые прописаны после недопустимого в нем (яндекс) или вообще удаляют весь атрибут style, если в нем прописан хотя бы один недопустимый стиль (гмеил).
Подробнее об обработке стилей почтовыми клиентами смотреть тут:
habrahabr.ru/post/146414
Обязательно просматривать таблицу восприятия почтовиками стилей тут:
https://www.campaignmonitor.com/css/Обнуляем таблицы!<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0">
Этот набор атрибутов запомнили сугубо и тригубо.
Шрифты и текст
Забываем про красивые дизайнерские шрифты и используем стандартные безопасные:
www.wearymax.ru/webmasters/fonts
Лучше не использовать тэги
<p>и
<font>. Весь текст задаем через
<span>.
Фоновые картинки и не только фоновые
Забываем про background-image, если хотим, чтобы пользователи Outlook тоже могли насладиться красотой. Если все-таки фоновые картинки нужны и без них никак, то нужно назначить альтернативный цвет фона.
Тэгу img не забываем прописывать следующие атрибуты:
<img src="..." width="..." height="..." border="0" alt="" />
И лучше всего к этому:
style=" line-height:0; display: block "
Для картинок display: block не дает Outlook-у добавлять им свои отступы.
Атрибуты align, vspace и hspace лучше не использовать для этого тэга вообще.
Картинки (на мой взгляд) лучше подгружать по абсолютным адресам с сервера. Но лучше про варианты погрузки картинок почитать в этой статье:
habrahabr.ru/company/sibirix/blog/114472Цвета
Никаких сокращенных обозначений HEX цветов, только шестью значениями!
Цвет фона лучше всего задавать атрибутами background="" или bgcolor="" , есть некоторые отшибленные почтовики, которые будут игнорировать фон, заданный стилем (но их не много, так что.. ).
Отступы и выравнивания
Есть такое утверждение, что вертикальные отступы рекомендуется задавать не пустыми ячейками с прописанной шириной, а вкладывать в них нулевые (прозрачные) картинки. Желательно хотя бы 10pxна10px, и самим картинкам задавать ширину нужного отступа. Другие же говорят, что это наоборот плохо, потому что the bat, например, заливает прозрачные картинки черным цветов.
Я картинки для отступов не использую. Просто ячейки с заданной высотой. Пока везде работало.
Горизонтальные отступы нужно задавать ячейками таблицы жестко, четкой фиксированной шириной.
Забыли про float. Он под запретом, будет игнорироваться большинством почтовых сервисов.
В принципе, в одной из статей написано, что мы можем (уже сейчас!) использовать для отступов внутри ячеек padding и его производные. Это работает для самых популярных почтовых клиентов. Но все же, если учитывать большинство статей рунета, использовать лучше с осторожностью. (Но я юзаю!)
Ссылки
Не забываем прописывать
target="_blank", не забываем, что значения # у атрибута src быть не должно.
Всегда задаем цвет, шрифт, размер шрифта,
line-height, -webkit-text-size-adjust:none(это свойство запрещает увеличивать размер шрифта айфонам и айпадам).
Про "Якоря" забываем.
Тестируем рассылку:
На данный момент, нормальных инструментов для простого тестирования рассылок нет
А может и есть, но все платное и лично я с этим не разобралась.
Примеры можно посмотреть здесь:
www.cossa.ru/digdog/48567
Самое простое и правильное решение - находим сервис бесплатной отправки сообщений, создаем себе аккаунты на как можно большем кол-ве почтовиков, и шлем себе любимому рассылку на все адреса. Потом смотрим, тестим, наслаждаемся.
И пытаемся сами понять где же мы накосячили, и просматриваем статьи из-за чего такой косяк может всплыть.
Я выбрала для себя
https://sendpulse.com/ru/
Вот рассылка которая там лежит
archive.sendpulse.com/bd6092af/?_ga=1.158251578.12...
После регистрации сначала надо зайти в раздел Адресные книги, добавить все свои адреса.
Потом нажать "создать рассылку" и выбрать "импортировать шаблон". Можно просто импортировать сразу файл html, либо вставить шаблон кодом (только таблицу рассылки). Либо, что круче всего, можно импортировать прямо архив, прямо с картинками и наслаждаться.
Это вот примерное резюме из всех прочитанных мною статей и моего личного опыта.
