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

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

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

Из чего состоит письмо

Содержимое электронного письма подчинено определенной логике: сначала идет прехедер, потом шапка, тело и подвал.

Логика email-письма
Логика email-письма

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

  • Кто будет получать письмо. Например, клиенты банка
  • Зачем отправляем письмо. Например, для оформления заявок на открытие счета в банке


Выбранная аудитория и сформированная цель сообщения – это фундамент макета email-рассылки, от которого будет зависеть внутренняя логика и оффер письма. Об этом мы рассказывали в статье про то, как сделать сделать рассылку по email с нуля.

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

Как правильно сделать прехедер

Прехедер это текстовое уточнение темы письма, которое попадает в превью.

Например, вот письмо блога про инвестиции с анонсом новой статьи. В прехедере написано: «Истории провалов инвесторов» – этот текст пойдет в превью и отобразится первым после темы.

Где находится прехедер
Где находится прехедер

Зачем нужен прехедер: с ним можно дополнить тему, чтобы повысить открываемость письма.

Прописанный прехедер помогает раскрыть тему письма: получатель лучше поймет содержимое до его открытия
Прописанный прехедер помогает раскрыть тему письма: получатель лучше поймет содержимое до его открытия


Как сделать прехедер в макете рассылки: прописывайте в прехедере текст в зависимости от темы письма. Например, тема рекламной рассылки «Запускаем продажу новых наушников». В прехедере можно указать:

  • Скидка 25 % для самых быстрых
  • Не боятся воды и влаги
  • Активное шумоподавление
  • Красный, черный, белый цвета

Примеры хороших превью у Яндекс.Музыки, Яндекс.Плюса и М.Видео
Примеры хороших превью у Яндекс.Музыки, Яндекс.Плюса и М.Видео

Если прехедер выглядит некрасиво, то его можно спрятать так, чтобы он не отображался в почтовом ящике получателя:

  • Если верстаете макет email-письма в редакторе – окрасьте текст прехедера в цвет фона
  • Если верстаете макет email-письма в HTML – используйте CSS-команду «display:none». На всякий случай можно дополнить команду: указать размер прехедера в один пиксель и использовать в шрифте цвет фона

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

Шапка письма – это место для размещения логотипа, заголовка, меню и другой дополнительной информации. Шапку письма еще называют «хедером».

Где находится шапка письма
Где находится шапка письма

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

Как использовать шапку в макете email-рассылки: можно использовать для разграничения ссылок. Например, шапка выступает логотипом компании и ссылка ведет на главную страницу сайта.

У Premier в шапке используется логотип сервиса и ссылка ведет на сайт, а вот следующий баннер – уже на сам сериал
У Premier в шапке используется логотип сервиса и ссылка ведет на сайт, а вот следующий баннер – уже на сам сериал


Шапка пригодится для визуализации основного оффера.

В письмах Домклик шапка – это объединенный общий баннер с иллюстрацией, заголовком и названием компании
В письмах Домклик шапка – это объединенный общий баннер с иллюстрацией, заголовком и названием компании

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

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

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


Как правильно наполнить письмо

После прехедера и шапки идет «тело письма». Это основная часть email-рассылки, в которой содержится оффер, подборка товаров или полезная информация.

Баннер: как выбрать и расположить

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

Зачем нужен: для привлечения внимания, создания тональности сообщения и призыва к действию. К баннеру обычно прикреплена ссылка, которая ведет на страницу предложения или сайт компании.

Как использовать в макете email-рассылки: зависит от формата письма. Для рекламной рассылки в баннер выносят главную мысль, слоган, цепляющие слова, оффер, размер скидки, условия спецпредложения. В баннере можно использовать яркие иллюстрации, которые привлекают внимание.

В рассылке LiveDune баннер построен по принципу AIDA
В рассылке LiveDune баннер построен по принципу AIDA

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

В рекламной рассылке Burger King баннер кратко сообщает оффер, а далее в тексте раскрывает предложение
В рекламной рассылке Burger King баннер кратко сообщает оффер, а далее в тексте раскрывает предложение

В письме может быть несколько баннеров. Действует правило: один баннер – один оффер – одно действие.

Рассылки Lamoda часто состоят из одних баннеров, которые выделяют цветом, размером и разными предложениями
Рассылки Lamoda часто состоят из одних баннеров, которые выделяют цветом, размером и разными предложениями

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

В рассылке Сбербанка персонажи на обложке транслируют положительные эмоции
В рассылке Сбербанка персонажи на обложке транслируют положительные эмоции

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

В рассылке SMMplanner иллюстрация на баннере показывает пример отчета, а текст в заголовке сообщает выгоду
В рассылке SMMplanner иллюстрация на баннере показывает пример отчета, а текст в заголовке сообщает выгоду

Разные оформления баннеров позволяют создавать рубрики рассылок или визуально объединять письма для спецпроектов. Когда люди открывают письмо и видят непривычное оформление, то это задает особое настроение и тон рассылке.

Новогодняя рассылка от МИФа отличается от еженедельной новостной подборки
Новогодняя рассылка от МИФа отличается от еженедельной новостной подборки

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

Текст – это основная информация, которая идет после баннера.

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

Как использовать в макете email-рассылки: четких правил нет, но есть рекомендации, которые помогут сделать текст лучше и понятней.

Пишите про людей, а не про компанию. Текст хорошо срабатывает, когда решает проблемы аудитории или предлагает решение. Мало кому интересны новости компании формата «мы лучшие на рынке». Что от этого меняется в жизни клиента? Если ничего – значит сообщение пройдет мимо. Такую новость лучше использовать в качестве подводки: «Мы лучшие на рынке и все благодаря вам. Вот, что вы покупали в этом году».

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

Также избегайте воды и штампов. Вместо:

  • «Лидеры рынка» – «Лидеры рынка в 2021 году по версии Форбс»
  • «Лучший продукт» – «По исследованию компании N наш товар выбирают чаще, чем товары конкурента»
  • «Качественные материалы» – «Используем итальянскую кожу, а у мастеров подтвержденные профессиональные сертификаты»

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

Вот как можно использовать одну или две колонки в зависимости от содержания письма.

Одностолбцовая система в рассылке Яндекс.Практикума
Одностолбцовая система в рассылке Яндекс.Практикума

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

Двухстолбцовая верстка в рассылке Burger King
Двухстолбцовая верстка в рассылке Burger King

Подробнее про текст в рассылках ― в статье, как за 17 шагов сделать качественный текст.

Иллюстрации и фон рассылки: на что обратить внимание

Чтобы оформить макет письма, нужно помнить про визуал рассылки – это не только картинки для товаров или иллюстрации для текста, но и фоновый цвет, подложки и графические элементы. У нас есть большая статья на эту тему – «Подбираем картинки для письма и оформляем email-рассылку с помощью изображений».

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

Как использовать в макете письма для рассылки: здесь потребуется помощь дизайнера, но вы можете использовать готовые красивые иллюстрации из сервисов-конструкторов (например, Canva) или брать фотографии с фотостока (например, Unsplash).

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

Далее – несколько подходов к оформлению в качестве примеров:

  • Графика позволяет дополнительно разделить смысловые блоки письма

В письме YouDo используют не только эмодзи, но и уникальные иллюстрации для каждого смыслового блока
В письме YouDo используют не только эмодзи, но и уникальные иллюстрации для каждого смыслового блока

  • С помощью фона и цвета можно создать в письме настроение. А еще, это выглядит красиво и стильно

Новогодняя рассылка от Kari оформлена в классических рождественских цветах: красный и белый
Новогодняя рассылка от Kari оформлена в классических рождественских цветах: красный и белый

  • Графика позволяет заменить текст там, где он не нужен или дополнить его

В рассылке Honor разделы товаров обозначены иконками и вместо текстовых ссылок получились крупные кнопки
В рассылке Honor разделы товаров обозначены иконками и вместо текстовых ссылок получились крупные кнопки

Карточки товаров: как расположить и привлечь внимание

Если вы создаете макет электронного письма для магазина, то ваши рекламные рассылки могут содержать готовые карточки товаров. Покупку можно совершить как прямо внутри письма (используется AMP-технология), так и при переходе по ссылке на сайт.

Карточка обычно устроена так: изображение + текстовое описание + цена. Карточки могут быть как в один, так и несколько столбцов.

Зачем нужны: предоставить клиенту в письме предложение товаров, которые можно купить прямо сейчас. Используется для реакционных, рекламных и триггерных рассылок.

Как использовать в макете email-рассылки: карточки товаров располагаются в теле письма, их можно отделять тематически. Например, первая линия – скидки на кроссовки, вторая линия – новое поступление, третья – товары для ухода за обувью.

В редакторе Sendsay есть бесплатный конструктор шаблонов под каталоги товаров или письма в стиле «брошенная корзина».

Готовые шаблоны макетов для верстки
Готовые шаблоны макетов для верстки

В карточке главное – фотография товара, цена и кнопка для покупки. Подобрали удачные примеры карточек товаров:

  • Карточки товаров в ряд – когда товара много и при его выборе клиент опирается на визуал

Карточки товаров Lamoda расположены таблицей
Карточки товаров Lamoda расположены таблицей

  • Карточки товаров столбцом – когда товара немного, а визуал не играет особой роли

В рассылке МИФа карточки товаров сопровождает большой блок текста
В рассылке МИФа карточки товаров сопровождает большой блок текста

Ссылки: как правильно добавлять в текст и баннеры

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

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

Как использовать в макете email-рассылки: ссылки можно ставить на любый элемент письма, но соблюдайте логику. Если на баннере указана скидка, то при переходе по ссылке человек должен попасть на специальную страницу с акционным товаров, а не на главную страницу сайта.

Примеры, как еще используют ссылки:

  • Для увеличения кликабельности и переходов на сайт – любой элемент в письме ведет на товар

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

  • Для разграничения переходов на сайт. Каждая ссылка ведет на свою страницу сайта. Подойдет для дайджестов и подборок

В рассылках статей от Т—Ж используются не заголовки, а не предложения, которые кратко сообщают основную мысль материала.
В рассылках статей от Т—Ж используются не заголовки, а не предложения, которые кратко сообщают основную мысль материала.

Кнопки: как расположить и что написать

Кнопки обычно ведут на сайт компании или в приложение. Их можно оформить картинкой со ссылкой или с помощью HTML-кода.

Зачем нужны кнопки: они помогают привлечь внимание читателя и призывают совершить действие.

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

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

Типовые кнопки делают письмо слишком шаблонным
Типовые кнопки делают письмо слишком шаблонным

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

Кнопки становятся больше, но если вокруг текста немного, то они не будет выглядеть тяжело
Кнопки становятся больше, но если вокруг текста немного, то они не будет выглядеть тяжело

Другой вариант – добавить новый смысловой контекст, который пересекается с темой. Например, пойти от вопросов которые волнуют читателей.

Такой текст более эмпатичен, но может не совпадать с тональностью бренда
Такой текст более эмпатичен, но может не совпадать с тональностью бренда

Иногда кнопки позволяют пробить «баннерную слепоту». Хороший пример – рассылка Т—Ж.

Куда ведет кнопка – не понятно, но короткий текст выше поможет разобраться
Куда ведет кнопка – не понятно, но короткий текст выше поможет разобраться

Что разместить  в подвале

Подвал письма еще называют футером. Это обязательный элемент, где по закону «О рекламе» нужно указать ссылку на отписку. В Sendsay ссылка  для отписки формируется автоматически. Кроме того, в подвал обычно добавляют юридическую и контактную информацию: телефон, сайт, соцсети, адрес.

Зачем нужен: для соблюдения закона «О рекламе» и справочной информации.

Как использовать в рассылке:

  • Оставить в подвале ссылки на приложения, соцсети, службу поддержки и другие дополнительные опции

В рассылке Premier добавлены все дополнительные ссылки: приложения, соцсети, служба поддержки и полная веб-версия письма
В рассылке Premier добавлены все дополнительные ссылки: приложения, соцсети, служба поддержки и полная веб-версия письма

  • Разместить меню со ссылками на сайт, чтобы не нагружать шапку

 У Burger King подвал письма короткий и содержит логотип, форму обратной связи, ссылки на соцсети и меню
У Burger King подвал письма короткий и содержит логотип, форму обратной связи, ссылки на соцсети и меню

  • Разместить юридическую информацию – часто это касается банковского, медицинского, табачного, алкогольного и финансового сектора бизнеса

Рассылка с предложением банковской карты Тинькофф снабжена большим блоком информации об условиях обслуживания
Рассылка с предложением банковской карты Тинькофф снабжена большим блоком информации об условиях обслуживания

Чек-лист разработки макета

Чтобы ничего не забыть при составлении макета:

  • Определена целевая аудитория рассылки и желаемое действие
  • Ширина макета – 600 пикселей
  • Прехедер дополняет тему письма
  • В шапке расположен логотип, заголовок, иллюстрация или меню сайта
  • Баннер привлекает внимание и призывает совершить действие
  • Текст понятен, разбит на абзацы, его можно считать глазами
  • Иллюстрации дополняют повествование или задают тон сообщению
  • Карточки товаров оформлены в ряд или по порядку
  • Ссылки оформлены гипертекстом или добавлены на картинки, баннеры, логотипы
  • Кнопки призывают совершить действие или дополняют контекст
  • В подвале письма стоит ссылка на отписку от рассылки и есть контактная информация.
Email *