Правила дизайна и вёрстки 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 Soldiers

Редполитика Email Soldiers — это свод правил, которыми мы пользуемся, когда пишем статью в наш блог, пост в соцсети, рабочее письмо или любой другой материал от лица компании.

Наш робот бесплатно сообщит вам об ошибках доставки на mail.ru

Через наш сервис можно подписаться на уведомления из постмастера Mail.ru. ...

Правила дизайна и вёрстки email рассылок

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

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

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

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

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

Подход Agile Results

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