Основные элементы дизайна для email-рассылок

Как написать рассылку, которую ваши клиенты захотят открыть и дочитать до конца?

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

 1. Шапка

Шапка (preheader/header) – это верхняя часть письма, которая, как правило, включает:

– Аннотацию к рассылке

В некоторых почтовых клиентах этот короткий текстдемонстрируется непосредственно в subject line, поэтому может дополнить и усилить тему сообщения:

– Ссылку на просмотр письма в браузере

Такая ссылка добавляется в письмо на случай, если в почтовом клиенте возникнут какие-то проблемы с отображением письма, и подписчик захочет посмотреть его в “первозданном” виде у себя в браузере.

Вряд ли эта ссылка пользуется большой популярностью, но иногда всё же она бывает удобна, чтобы быстро показать письмо кому-то другому или действительно увидеть его корректную вёрстку.

Поэтому ссылку на браузерную версию письма всё-таки лучше добавлять для “профилактики”, используя примерно такие формулировки:

• Посмотреть письмо в браузере
• Открыть браузерную версию письма
• Письмо отображается некорректно? Нажмите здесь!
• Не видно картинок? Жми тут!..

– Графическую часть

Как правило, шапка содержит логотип компании-отправителя, слоган (если есть) и другие узнаваемые элементы фирменного стиля.

Можно оформить шапку достаточно лаконично:

Или использовать заливку цветом:

Или задействовать дизайн по максимуму:

В любом случае, если подписчика привлекла тема письма, то шапка – это первое, что он увидит, когда откроет его. Поэтому главная задача шапки, ясно дать понять подписчику, что это за письмо и от кого оно.

2.Тело письма

Тело письма – непосредственно то содержание (новость, товар, сообщение), которое вы намереваетесь разослать подписчикам.

Здесь каких-то строгих требований по оформлению нет, однако стоит взять на заметку, что подписчик:

• обычно просматривает письмо слева-направо, сверху-вниз,
• больше внимания уделяет картинкам (фотографиям, иллюстрациям),
• воспринимает тёмный шрифт на светлом фоне лучше, чем светлый на тёмном,
• не готов читать большие объёмы текста, но склонен просматривать сообщение “по верхам”, читая заголовки, подзаголовки и выделенные фразы.

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

– связка “картинка-заголовок-текст” лучше всего для восприятия,

– самые главные мысли (основной посыл) нужно размещать в начале письма,

– писать стоит простыми предложениями, не перегружая их причастными и деепричастными оборотами; отдавать предпочтение “живым” глаголам,

– текст нужно структурировать, разбивая на небольшие абзацы; между абзацами вставлять пустые строки; использовать маркированные списки, перечисления, “связанные” заголовки и подзаголовки.

По компоновке удобно придерживаться также “классических” схем: в 1, 2, 3 столбца, картинка по ширине письма, слева от текста, справа от текста.

3. Футер

Футер (“подвал”) – это нижняя часть письма, в которой есть:

– Объяснение, почему пользователь получил это сообщение

Вы получили это письмо, потому что подписались на рассылку интернет-магазина shop-example.com, и мы предположили, что эта информация может быть Вам интересна. Если Вы больше не хотите получать сообщений от нас, то всегда можете отписаться от рассылки в один клик.

– Ссылка на отписку

Думаю, здесь всё понятно. Ссылка на отписку от рассылки нужна обязательно.

Можно “прятать” её за мелким шрифтом и блеклыми буквами, можно “бравировать” ею, набрав заглавными буквами, или вписать в объяснение, почему подписчик получил это письмо (например, добавить ссылку с фразы “отписаться от рассылки в 1 клик”).

– Дополнительные ссылки

В футере можно добавить также ссылки на профиль подписчика, возможность переслать письмо другу, возможность быстро перейти к форме обратной связи и прочее.

Для интернет-магазинов актуально размещение ссылок на основные разделы каталога, категории товаров, и в особенности – на скидки, акции и спецпредложения.

– Кнопки соцсетей

Если у вас есть сообщества в социальных сетях, то ссылки на них, оформленные в виде кнопок, не помешают. Как показывает практика, если база подписчиков достаточно велика, то кто-нибудь обязательно переходит с рассылки в соцсети, а кто-то может и вступить в ваши сообщества.

– Контакты компании

Текущий год, значок копирайта (с), название компании, ссылка на сайт, телефон, адрес электронной почты и прочее – то, что также удобно (и принято) размещать в футере.

+ Фон и границы

Границы (обрамление) письма для email рассылки обычно задают тонкими серыми линиями.

Можно вообще обойтись без границ, ограничившись явным контрастом между фоном тела письма и фоном вокруг него.

Для фона можно использовать также серый цвет или другие не слишком яркие цвета (лучше подобрать что-то из палитры вашего сайта, из брендбука и т.п.)

Разумеется, насыщенность фона вокруг письма – дело вкуса.

Но всё-таки фон – не та вещь, на которую хочется обращать чересчур пристальное внимание читателей, поэтому бледные оттенки предпочтительнее.

Как создать шаблон для рассылки

Разработка шаблона для email-рассылки включает следующие этапы:

1. Техническое задание дизайнеру

Набросок, текстовое описание каждого блока, пожелания к оформлению письма, примеры других рассылок “для вдохновения”.

2. Макет дизайна
В psd или любом другом удобном графическом формате
+ jpg для того, чтобы шаблон можно было быстро просматривать.
Html-файл, который готов для импорта в сервис рассылок.

3. Вёрстка

Вёрстка точно должна быть кросс-email, т.е. корректно отображаться во всех распространённых почтовых клиентах: mail, yandex, rambler, gmail, outlook.

Вёрстка может быть при необходимости адаптивной – т.е. менять свою ширину/компоновку и размер блоков в зависимости от устройства, на котором просматривается письмо – смартфон, планшет.

4. Рассылка

Это уже непосредственно письмо, подготовленное на основе шаблона, которое идёт в рассылку: с конкретной новостью, предложением, добавленными “живыми” иллюстрациями, актуальными текстами (вместо lorem ipsum dolor) и проч.

Качественный шаблон для email рассылки можно разработать примерно за 1-2 недели.

Однако если согласование каждого этапа занимает много времени (вносится много поправок “задним числом”), то процесс может и затянуться.

В целом, дизайн/оформление писем – вещь субъективная. То, что очень понравится одному, абсолютно не устроит другого. А с учётом того, что рассылка отправляется массово, среди ваших подписчиков наверняка найдутся и те и другие, а также те, кто вообще не обратит внимания на ваши графические ухищрения.

Тем не менее, наличие дизайна в письме переводит ваше общение с подписчиком на более высокий уровень. Это как бы правило хорошего тона: вы перестаёте быть тем, кто просто заваливает почтовые ящики своих клиентов “очередным спамом”, а становитесь тем, кто показывает – у меня есть, что предложить, и я могу сделать это качественно.

Об авторе

Алексей Ефимов – email-маркетолог, автор тематического блога "Практичный email маркетинг."