Правила дизайна и вёрстки email рассылок
Этот материал давно не обновлялся. Зато у нас есть статья, где информация точно актуальна. Почитайте лучше её:
Читайте также
Дизайн email-рассылок: полная инструкция
Также у нас есть материал про html-вёрстку писем:
Читайте также
HTML-вёрстка email: полная инструкция
Ширина общего макета, включая рамки, отступы и тени не должна превышать 660px. И, конечно, ширина большого баннера не должна превышать ширины письма.
Шрифты нужно использовать только стандартные, которые отображаются на всех устройствах: Arial, Verdana, Trebuchet, Courier, Courier New, Tahoma, Georgia, Times, Times New Roman.
Корпоративные шрифты можно использовать для надписей на баннерах и статическом тексте, который будет в верстке картинкой. В верстке писем не используется:
- Flash-анимация
- Java Script
- Формы
- Эффекты наведения (:hover)
Используются: gif-изображения.
Блоки не должны мешать друг другу при вёрстке, слои не накладываются друг на друга, это относится как к разным блокам, так и к однотипным. Блок при блочной адаптации не должен превышать 320px по ширине (вместе с отступами).
Дополнительно
Хранение файлов
Для каждого нового проекта на сервере создаётся новая папка, в которую загружаются картинки. Пути к картинкам указываются абсолютными.
Экраны Retina
Для этих экранов размер иконок .png должен быть в 2 раза большим, чем на самом деле будет отображаться. Т.е. если нам надо вывести иконку размером 70×20, на сервер надо загрузить ее в размере 140×40. И уменьшить ее, указав в коде атрибут width=»70«.
Вёрстка
Подробная статья о вёрстке email рассылок в нашем блоге: HTML вёрстка писем — полная инструкция
Используется DOCTYPE HTML 4.01 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Что касается кодировки, это utf-8:
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” >Всё письмо целиком оборачивается в table с шириной в 100%, минимальной шириной и каким-либо фоном (белый, если не нужен другой):
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background: #ffffff; min-width: 320px;">Далее идёт таблица с шириной макета письма в 660 пикселей (может быть от 600 до 700px):
<table cellpadding="0" cellspacing="0" border="0" width="660" class="table660" style="max-width: 660px; min-width: 320px; background: #ffffff;">Для такой таблицы задают фиксированную ширину и определяют ей класс, чтобы при помощи медиа-запросов придать ей адаптивности. Делается это таким образом:
@media only screen and (min-device-width: 660px) {
.table660 {width: 660px !important;}
}
@media only screen and (max-device-width: 660px), only screen and (max-width: 660px){
table[class=“table660"] {width: 100% !important;}
}При ширине экрана больше 660 пикселей, ширина таблицы фиксирована. А если ширина экрана или окна меньше 660 пикселей, ширина таблицы равна 100% и адаптируется под экран.
Значение атрибутов CELLPADDING и CELLSPACING следует установить как «0», и не используйте никаких значений атрибута BORDER, кроме «0» у table, так как не все почтовые клиенты корректно интерпретируют другие значения.
Вертикальные и горизонтальные отступы
Для создания вертикальных отступов используют такой блок:
<div style="height: 9px; line-height: 9px; font-size: 7px;"> </div>По сути это пустой блок с заданной высотой, и другими свойствами для своеобразных почтовиков. Значение свойства font-size меньше height на 2px.
Для создания горизонтальных отступов можно использовать столбцы таблицы с заданной шириной:
<td width=”20”> </td>Текст и ссылки
Для вставки текста используют такую конструкцию:
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; color: #242424;">Текст</span>По тому же принципу вставляем ссылку:
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; color: #242424;">Текст</span>Некоторые веб-интерфейсы и почтовые клиенты (особенно мобильные), если находят нечто похожее на номер телефона, заменяют его ссылкой, при этом используют цвета по умолчанию. Чтобы этого избежать, есть два варианта: либо сделать так, чтобы номер не распознавался как номер телефона, либо сразу сделать его ссылкой. В первом случае разделяем отдельные части, используя span. Во втором — прописать ссылку вида:
href="tel:+79876543210"Изображения и фон
Изображение вставляем так:
<img src="img/logo.png" alt="img" width="130" border="0" style="display: block; width: 130px; max-width: 100%;" />Изображение помещаем в блочный элемент с заданным свойством line-height, которое равно высоте изображения. В теге img задаём высоту, ширину, нулевую рамку и стиль (display: block;).
Если изображение должно подстраиваться под ширину письма, то пишем так:
<a href=”” target=”_blank”><img src="..." width="100%" border="0" alt="" style="display: block" /></a>Фоновых изображений лучше избегать. Но если прижало, делаем так:
<tr>
<td background=“http://img.emailsoldiers.ru/ya/wheels/bg-2.png” style=“background-image: url(http://img.emailsoldiers.ru/ya/wheels/bg-2/png); background-position: center top; height: 340px;” height=“340” align=“center”> </td>
</tr>Обратите внимание — фон задаём именно для td и сразу двумя способами.
Адаптация (перемещение) блоков
Пример:
Для этого используем такую конструкцию:
<table>
<tr>
<td align="center" valign="top">
<div style="display: inline-block; vertical-align: top; width: 315px;">
</div>
<div style="display: inline-block; vertical-align: top; width: 290px;">
</div>
</td>
</tr>
</table>Всё дело в блоках со свойством inline-block. В момент, когда блокам не хватает ширины, правый переносится вниз.
Вёрстка под MS Outlook
Если вы хотите добавить что-то, что будет понимать только Outlook, используйте комментарии вида:
В наших письмах они используются для организации таблицы у плавающих блоков (т.к. Outlook не понимает display: inline-block). А так же для фиксации общей ширины письма.
Популярное в базе знаний:
Редполитика Email Soldiers — это свод правил, которыми мы пользуемся, когда пишем статью в наш блог, пост в соцсети, рабочее письмо или любой другой материал от лица компании.
Через наш сервис можно подписаться на уведомления из постмастера Mail.ru. ...
Основные требования к дизайну и вёрстке email, чтобы письмо корректно отображалось в почтовых клиентах.
Простая, понятная и иллюстрированная инструкция по использованию utm-меток в ссылках. Зачем нужны, как проставлять, как пользоваться, какие лучшие практики
Из чего же сделан наш емейл-маркетинг.
Описание методологии, применяемой в рабочих процессах нашей команды.
Пошаговая инструкция по подготовке технического задания на интеграцию сайта или CRM с системой рассылок.
Опираясь на данную схему, вы сможете разработать собственную стратегию емейл-коммуникаций для любого проекта.
Презентация с Emailshow 2017 Ильин Иван и Александр Лебединский
Как удалиться из самого популярного чёрного списка — Spamhouse.
В доках должен быть порядок и единое оформление
С 1 июля 2017 года вступают в силу поправки к закону ...
Если задачу поставить некорректно, то в хорошем случае исполнитель начнёт задавать вопросы и попросит добавить всю нужную информацию в формулировку задачи. В плохом случае исполнитель сделает, как сам понял, потом окажется, что это неправильно, и придётся переделывать.
Какие команды, чем полезен, как пользоваться