Создание и верстка письма для email-рассылки

Здравствуйте!

Чтобы заинтересовать пользователя, письмо для рассылки должно быть красиво оформлено. Это значит, что текст и картинки находятся на своих местах, макет не «разъехался», а шрифты отображаются корректно.

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

Технические требования и дизайн письма

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

Технические требования к письму:

• Размеры макета. Ширина для десктопной версии должна быть 600 px, для мобильной — 300–320 px. Если макет будет шире, появится горизонтальная прокрутка.
• Размер шрифта. Оптимально — 12–14 px. Если делать текст мельче, пользователю придётся напрягать зрение. Caps Lock нужно использовать умеренно: письма с большим количеством капса могут попасть в спам.
• Безопасные шрифты. Используйте шрифты, которые поддерживают все почтовые программы: Times New Roman, Arial, Verdana, Helvetica. Кастомными корпоративными шрифтами можно оформлять только заголовки, вставляя их картинками.
• Количество символов в теме письма. Желательно уместиться в 35–40 символов, тогда тема будет видна целиком даже в мобильной версии. Если коротко сформулировать не получается, вынесите основной смысл в первые 40 символов.

Слишком длинная тема письма не поместилась в строку.

• Ссылка на отписку. Если её нет, письмо попадёт в спам. Кнопку «Отписаться» размещают на видном месте в конце письма.

Рекомендации по дизайну писем

• Адаптивность. Модульная верстка позволяет элементам письма подстраиваться под ширину экрана мобильных устройств. «Плавающие» блоки перемещаются друг под друга.

Десктопная и мобильная версии макета.

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

Текстовый модуль не накладывается на картинку.

• Картинки и GIF-изображения использовать можно, а видео — нет. Вставить видеоролик в макет не получится. Можно дать ссылку, но лучше разместить её в конце, чтобы человек не ушёл из почты, не дочитав письмо.
• Кастомный дизайн. Если письма выдержаны в корпоративном стиле, это повышает узнаваемость бренда. Можно разработать несколько универсальных шаблонов под каждый тип рассылки: приветственное письмо, подтверждение заказа, промоакции, поздравления. В дальнейшем останется только менять текст и картинки товаров.
• Размер и внешний вид кнопок. Если в письме есть кнопки «Заказать», «Купить», «Зарегистрироваться» и т. п., их минимальный размер должен быть 46×46 px. Если сделать меньше, будет неудобно нажимать в мобильной версии. Кнопки нужно делать заметными и контрастными к цветовой гамме письма.

Перед отправкой проверьте, как письмо будет выглядеть в разных почтовых клиентах. Для этого используйте сервисы litmus.com или mail-tester.com.

Как сделать письмо для email-рассылки

Чётких правил, какие элементы обязательно включать в макет, нет. Исходите из задач рассылки и корпоративного стиля.

Основные блоки письма:

• тема;
• прехедер;
• дескриптор;
• заголовок;
• тело письма;
• кнопки СТА (призыв к действию);
• футер (подвал).

В некоторых видах писем отдельные элементы могут отсутствовать. Например, в информационной рассылке не будет кнопок СТА.

Тема должна анонсировать пользу для клиента и интриговать. Главное — не перестараться: кликбейт использовать не стоит. Если тема не будет соответствовать содержанию, пользователь потеряет доверие к компании и следующие письма, скорее всего, не прочитает. Не нужно ставить много восклицательных знаков. От слов типа «бесплатно», «гарантированно», «выигрыш» лучше отказаться. Сверьтесь со списком стоп-слов, из-за которых письма могут отправиться в спам.

Тема показывает пользу, цифра конкретизирует выгоду клиента.

Прехедер — это продолжение темы письма. В 100–120 символах уточните, о чём пойдёт речь, и подкрепите интерес пользователя. Прехедер влияет на открываемость рассылок так же, как и тема.

Из прехедера понятно, что письмо не просто формально приветственное, а несёт полезную информацию.

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

Варианты оформления дескриптора.

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

Заголовок дополняет тему.

Тело письма состоит из визуальной и текстовой части. Здесь располагаются главный баннер, карточки товаров, основная текстовая информация, кнопки СТА и ссылки на дополнительные материалы.

Главный баннер желательно делать высотой 300 px и шириной 600 px. Тогда он полностью поместится на экране любого устройства. В продающих письмах на баннер можно вынести не только основную информацию, но и кнопку призыва к действию.

«Горячие» клиенты смогут сразу перейти к заказу.

Текст структурируйте и оформляйте с помощью шрифтов, списков, рамок или эмодзи. Сплошное полотно букв не вызовет интереса у пользователей.

Если у вашей компании есть блог, предложите клиентам почитать статьи. Ссылки располагайте в конце письма.

Кнопки СТА сделайте в нескольких местах, чтобы заинтересованному клиенту не пришлось их искать.

Футер (подвал) — завершающий элемент письма. Здесь размещают реквизиты, контакты, ссылки на соцсети и кнопку «Отписаться». Если у компании есть мобильное приложение, можно дополнить блок ссылками на скачивание.

Как создать красивое письмо — инструкция по вёрстке

Верстать письма можно вручную в HTML-редакторе. А тем, кто не знаком с кодом, помогут онлайн-сервисы рассылок. Шаблон собирается в конструкторе из готовых блоков, заполняется текстом и изображениями. Далее загружается база email-адресов: получателей можно делить на группы и адаптировать содержание писем под аудиторию.

Разберём создание макета письма на примере сервиса NotiSend (app.notisend.ru/).

Шаг 1. Зарегистрируйтесь и нажмите «Создать рассылку». Сервис предоставляет возможность бесплатной рассылки по базе до 200 подписчиков.

Шаг 2. Заполните данные отправителя, тему письма и название рассылки.

Шаг 3. Создайте макет письма. Соберите шаблон из элементов в редакторе или выберите готовый. Если у вас уже есть свёрстанное письмо в HTML-файле, его можно загрузить на этом этапе.

Шаг 4. Выберите в конструкторе структуру письма в разделе «Колонки» и наполните её элементами из раздела «Блоки».

Шаг 5. Перетаскивайте элементы из левой части экрана и заполняйте: загружайте изображения, пишите текст, вставляйте карту проезда, добавляйте кнопки. Конструктор автоматически адаптирует макет под любые устройства.

Шаг 6. Загрузите базу получателей.

Шаг 7. Проверьте правильное отображение макета: выберите собственный email и отправьте пробное письмо. Сервис даёт возможность протестировать шаблон в разных почтовых клиентах. Можно посмотреть, как рассылка будет выглядеть в десктопной и мобильной версии.

Шаг 8. Нажмите «Запустить рассылку» после завершения тестирования.

Примеры и образцы писем

Продающая рассылка Альфа-Страхование: главная информация вынесена на баннер, здесь же находится кнопка перехода на сайт. Минимум текста, краткие описания услуг с кнопками СТА. Забота о клиенте: ссылка на статью «Как не стать жертвой мошенников». Лаконичное, но при этом содержательное продающее письмо в узнаваемом корпоративном стиле.

Рассылка PuzzleBrain: текст поделён на абзацы, основные мысли оформлены списком, поэтому письмо легко читается. Кнопки перехода на сайт и СТА контрастны фону и заметны. Перейти к подписке читатель может в нескольких местах.

Письмо-обращение издательства МИФ к читателям: такие рассылки лучше не перегружать визуальным контентом. От подписчиков требуется одно целевое действие — перейти по ссылке. Поэтому в письме нет ничего лишнего: яркий акцент на кнопке, а основная информация — безопасным шрифтом на белом фоне.

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

Рассылка промокодов от Деловых Линий: баннер в корпоративном стиле, основная информация крупным шрифтом на контрастном фоне, заметная кнопка призыва к действию. Письмо сделано так, что клиенту будет удобно воспользоваться предложением. Сразу из рассылки можно перейти к заказу, прочитав инструкцию.

Заключение

Главный принцип создания email-рассылки — удобство пользователя. Письмо должно правильно отображаться на ПК и мобильных устройствах. Для этого применяйте адаптивную верстку и соблюдайте технические требования.

Стильный дизайн помогает повысить отдачу от рассылки. Разрабатывайте шаблоны писем в корпоративном стиле, придумывайте интересные заголовки, структурируйте текст и добавляйте подходящие картинки. Не забывайте размещать яркие кнопки призыва к действию.

До новых встреч!