Правила дизайна и вёрстки 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;">&nbsp;</div>

По сути это пустой блок с заданной высотой, и другими свойствами для своеобразных почтовиков. Значение свойства font-size меньше height на 2px.

Для создания горизонтальных отступов можно использовать столбцы таблицы с заданной шириной:

<td width=”20”>&nbsp;</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”>&nbsp;</td>
</tr>

Обратите внимание — фон задаём именно для td и сразу двумя способами.

Адаптация (перемещение) блоков

Пример:

дизайн и вёрстка email рассылок — инструкция

Для этого используем такую конструкцию:

<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 рассылок

Основные требования к дизайну и вёрстке email, чтобы письмо корректно отображалось в почтовых клиентах.

Что такое utm-метки и зачем они нужны

Простая, понятная и иллюстрированная инструкция по использованию utm-меток в ссылках. Зачем нужны, как проставлять, как пользоваться, какие лучшие практики

Анатомия емейл-маркетинга

Из чего же сделан наш емейл-маркетинг.

Подход Agile Results

Описание методологии, применяемой в рабочих процессах нашей команды.

Как составить техническое задание на интеграцию

Пошаговая инструкция по подготовке технического задания на интеграцию сайта или CRM с системой рассылок.

Базовая схема рассылок

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