Простой дизайн email-рассылки: как оформить письмо без дизайнера

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

Привет! Это Лера, редактор в агентстве ollo. Хочу рассказать про базовые правила оформления писем. В статье разберем особенности оформления писем — шрифты, цвета, элементы и контент. Потом посмотрим на 3 платформы email-рассылок, где есть возможность собрать красивое и простое письмо без дизайнера.

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

Нужно держать в голове, что:

Пользователи открывают письма на разных почтовиках

А почтовики по разному отображают внешний вид писем. Это значит, что в Mail.ru и Outlook одно и то же письмо будет выглядеть по разному — скругление углов, шрифт, вертикальное выравнивание элементов, ссылки, поддерживаемые теги и стили.

Не всегда можно добавить анимацию или вставить коллаж

Например, в почтовике Outlook не проигрывается гиф-анимация.

Пользователи открывают письма на разных устройствах

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

4 пункта, которые нужно знать для оформления письма.

1. Размер письма и элементы

Стандартный размер письма — 600 пикселей. Если письмо будет шире, то на некоторых устройствах появится горизонтальная полоса прокрутки. Длина письма и размер фона можно выбрать любые.

Элементы — прехедер (короткое сообщение под темой, которое отражает суть письма), шапка, тело и футер.

2. Шрифты

Используйте бесплатные шрифты, которые отображаются во всех браузерах.

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

3. Контент

Изображения в email-рассылке дополняют и усиливают основную идею письма.

Количество картинок следует подбирать исходя из задачи рассылки. Например, если это подборка товаров — хватит баннера с оффером, а тело письма может состоять из блоков рекомендаций с кнопками.

Изображения стоит делать в фирменном стиле — включайте в них узнаваемые элементы или графику. Например, как Еаптека.

4. Цвета и стиль

Письмо — продолжение сайта. Это значит, что рассылка должна повторять фирменный стиль — цвета, шрифты и логотип. Так охраняется консистентность для пользователя. Он узнает в письме сайт, с которого подписался на рассылку.

Оптимальный вес картинок в письме — 200 кб. Так они будут загружаться за секунду. А вес самого письма без учета картинок должен быть не больше 100 кб.

— Не оставляйте висячие предлоги в письме;

— Пишите без ошибок в словах. Если видите слово первый раз, проверьте его правописание, потому что даже мелочи бросаются в глаза, когда читаешь письмо;

— Выделяйте жирным только важную информацию, например, заголовок;

— Не используйте КАПСЛОК;

— Общайтесь с пользователем на привычном языке. Если на сайте обращались с клиентами на «вы», продолжайте делать так в рассылке.

— Картинку без текста;

— JavaScript;

— Flash-анимацию и CSS-анимацию;

— Сокращенные ссылки;

— Формы в виде попапа или опроса.

Какие-то из этих элементов не будут отображаться в рассылке. Например, Flash-анимация и JavaScript. Другие могут отображаться, но при этом могут попасть в спам — сокращенные ссылки, письмо из одной картинки.

— Безопасные шрифты, про которые я рассказала выше;

— Картинки формата PNG, JPEG, BMP;

— Гиф-анимацию;

— Вшитые ссылки (в текст, кнопку или картинку).

Вручную

Чтобы сверстать письмо вручную, нужно знать HTML и CSS. Если вы маркетолог, которому нужно сверстать письмо самому — этот вариант не для вас. Но с разработчиком в команде будет проще.

Блочный редактор

В блочном редакторе все просто — можно сверстать письмо с помощью шаблона и готовых модулей. Знание HTML и ESS не требуется.

Где есть блочные редакторы: Unisender, Tilda, enKod.

Аутсорс

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

Если хотите делегировать дизайн, мы в ollo.agency можем помочь. У нас есть услуги дизайна рассылки — проведем аудит сайта, прикинем дизайн на макете в фигме и подключим сервис, чтобы без проблем верстать письма. Пишите нам сюда, чтобы создать красивую рассылку.

— Письмо состоит из прехедера, шапки, тела и подвала;

— Размер письма — 600 пикселей, а длина на ваш вкус и цвет;

— Лучше использовать бесплатные и безопасные шрифты;

— Не получится вставить в письмо Гиф-анимацию, сокращенные ссылки, JavaScript и CSS-анимацию;

— Задизайнить и сверстать письмо может любой маркетолог. Важно знать основные правила дизайна и верстки;

— Блочные редакторы рулят!

Пишем про рассылки тут: телеграм канал

Маркетологи признавайтесь, как оформляете рассылки без дизайнера?)