letehaha
@letehaha
Вникаю вo front-end

Как верстать письма для самых распространенных почтовых сервисов?

Гуглил, везде написано что нужно верстать таблицами. Но везде упоминаетя фраза *чтоб работало везде*. А если нужно только для самых распространенных, можно ли верстать блоками? Какие материалы на эту тему лучше почитать и где?
  • Вопрос задан
  • 495 просмотров
Решения вопроса 3
DjailinVasu
@DjailinVasu
Верстальщик, подрастающий фронтендер
Я не очень давно писала такое мини-руководство для верстки рассылок.

Рассылку лучше всего сначала верстать ручками в файлике .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, либо вставить шаблон кодом (только таблицу рассылки). Либо, что круче всего, можно импортировать прямо архив, прямо с картинками и наслаждаться.

Это вот примерное резюме из всех прочитанных мною статей и моего личного опыта.
Ответ написан
Комментировать
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Когда пишут *чтоб работало везде* подразумевают самые распространенные.

можно ли верстать блоками?
можно (я лично не против) но работать будет не везде
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
только тестировать самому на "самых распространенных"
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы