24.12.2021
7 минут

Как правильно оформить шапку письма для email-рассылки

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

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

Из чего состоит шапка письма и какие задачи решает

Шапка рассылки или хедер — это самый верхний блок письма, расположенный над основным контентом.

Грамотно оформленный хедер помогает:

  • повысить узнаваемость бренда
  • привлечь внимание к акциям и УТП
  • направить трафик из письма в нужные разделы сайта
  • повысить дочитываемость письма, количество целевых действий, продажи

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

Выглядеть это может, например, так
Выглядеть это может, например, так

В зависимости от типа рассылки и целей, в шапке размещают:

  • название и/или логотип компании
  • заголовок рассылки
  • иконки и ссылки на соцсети
  • меню со ссылками на разделы сайта
  • контакты — телефон, адрес электронной почты, мессенджеры
  • призывы к действию и кнопки
  • УТП, слоганы, преимущества
  • информацию об акциях и скидках

Это лишь несколько вариантов. Список не исчерпан — в верхний блок можно поместить то, что вы хотите обязательно показать всем адресатам, которые откроют рассылку. Главное, чтобы шапка получилась функциональной и информативной.

Что учесть при оформлении шапки письма

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

Используйте логотип и фирменный стиль

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

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

В примере — логотип и фирменные желтый и зеленый цвета в шапке рассылки «Утконоса»
В примере — логотип и фирменные желтый и зеленый цвета в шапке рассылки «Утконоса»

Поработайте с фоном

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

Чтобы логотип, кнопки и тексты было легко читать, используйте контрастные цвета
Чтобы логотип, кнопки и тексты было легко читать, используйте контрастные цвета

Больше об оформлении писем с примерами мы рассказывали в статье «Подробный гид по дизайну в электронной рассылке».

Разместите ссылку на веб-версию

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

Обычно ссылка на веб-версию оформляется мелким шрифтом и не занимает много места
Обычно ссылка на веб-версию оформляется мелким шрифтом и не занимает много места

Дайте возможность отписаться

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

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

Часто ссылка отписки размещается даже не в шапке, а еще выше — в строке с именем отправителя и датой
Часто ссылка отписки размещается даже не в шапке, а еще выше — в строке с именем отправителя и датой

Прописывайте тег Alt

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

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

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

Картинки отключены, но на месте лого в шапке информативная подпись
Картинки отключены, но на месте лого в шапке информативная подпись

Alt прописывается в коде письма с помощью html. Но в современных конструкторах email-рассылок его добавление обычно предусмотрено. Так, в блочном редакторе Sendsay для добавления тега в настройках картинки есть поле «Альтернативный текст».

Пишем тег Alt в специальном поле в конструкторе платформы Sendsay
Пишем тег Alt в специальном поле в конструкторе платформы Sendsay

Не перегружайте шапку

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

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

В канун нового года гипермаркет разместил в меню ссылку на раздел праздничных товаров. А еще можно стилизовать шапку по сезону елочками и снежинками ;-)
В канун нового года гипермаркет разместил в меню ссылку на раздел праздничных товаров. А еще можно стилизовать шапку по сезону елочками и снежинками ;-)

Не забывайте о том, что после шапки

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

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

Добавьте анимацию и GIF. Стильной и качественно отрисованной, но статичной графикой в рассылках уже никого не удивишь. А вот анимация и GIF на первом экране пока встречаются не так часто. Добавив движения в верхний блок письма, мы сходу привлечем внимание и не дадим пользователю сразу закрыть письмо. Как он только что сделал это с десятком других маркетинговых рассылок.

На примере не видно, но в рассылке на этой шапке двигаются персонажи, слово «start» меняет цвет, вспыхивают звезды
На примере не видно, но в рассылке на этой шапке двигаются персонажи, слово «start» меняет цвет, вспыхивают звезды

Однако использовать анимацию стоит осторожно. Она не будет воспроизводиться, пока не загрузиться полностью. Поэтому GIF не должны быть слишком тяжелыми — до 500–800 кб. Так же как и для статичных картинок, оптимальная ширина — 600 пикселей. Больше про размеры элементов и всего письма читайте в другой нашей статье.

Используйте инструмент «Текст» в редакторе рассылок. Часто для экономии времени, создавая баннер для шапки рассылки в графическом редакторе, на него сразу накладывают текст. Это удобно — можно детально настроить стиль и применить эффекты. Однако из-за спамеров, которые использовали письма, сверстанные одной картинкой, на изображения с большим количеством текста стали реагировать спам-фильтры.

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

Образец информативного и лаконичного баннера: даты, скидка, повод — ничего лишнего

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

Любой из них можно использовать как образец или отредактировать в блочном редакторе для своих рассылок
Любой из них можно использовать как образец или отредактировать в блочном редакторе для своих рассылок
Присоединяйтесь к нам в соцсетях