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

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

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

Реклама. Erid 2VtzqwDqfo2. ООО «Клик.ру», ИНН 7743771327.

Реклама. Erid 2VtzqvviSiY. ООО «Клик.ру», ИНН 7743771327.

Читайте также: ТОП-10 сервисов 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

Полезные ссылки:

• 10 лучших курсов по веб-дизайну
• Где лучше создать электронную почту?
• ТОП-10 конструкторов писем
• Как сделать массовую рассылку писем в Яндекс Почте

Реклама. Erid 2VtzqxepSUW. ООО «Клик.ру», ИНН 7743771327.

Реклама. Erid 2Vtzqw1vtxW. ООО «Клик.ру», ИНН 7743771327.