Шапка письма: все, что нужно знать

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

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

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

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

Header как элемент письма

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

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

Стандарты оформления хедера

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

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

Ссылка на веб-версию письма

Не во всех почтовых клиентах письмо отображается одинаково хорошо. Да, нужно тестировать и добиваться того, чтобы на всех устройствах, во всех браузерах и почтовиках верстка выглядела корректной, но на практике этого достичь непросто. Могут не отображаться картинки, шрифты и другие элементы. Ссылка “Посмотреть в браузере” позволяет всем подписчикам увидеть письмо в том виде, в котором его задумал дизайнер.

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

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

Ссылка “Посмотреть в браузере” – это своего рода страховка на случай, если что-то пойдет не так. Но не стоит считать ее панацеей от всех проблем – пусть она будет и выполняет свою функцию при необходимости, однако не заставляйте получателя выполнять еще одно дополнительное действие - тестируйте каждое письмо перед отправкой. Но вернемся к веб-версии. расположена она может быть по-разному: справа, слева или по центру.

Иногда ссылку на веб-версию размещают в футере. Это допустимо, но тогда она не выполнит основную функцию: вряд ли до нее доскроллят, если письмо не отобразилось.

Логотип

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

Ниже в примере – просто лого и ничего лишнего в рассылках The Strategist.

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

Логотип и меню

Еще один популярный пример того, как оформляется шапка письма, – это компоновка логотипа и меню с наиболее популярными категориями товаров или разделами сайта. Используют такой вариант большинство представителей ecommerce. Вариации могут быть разные:

лого сверху, меню внизу;

лого слева, меню справа.

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

Ниже – несколько примеров шапки, сверстанной не по традиционной схеме. Эта подборка поможет найти идеи и вдохновение.

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

Кнопка СТА добавляют в хедер с той же целью – захватить внимание при первом взгляде на письмо:

Сразу два варианта меню добавляет в хедер компания DzagiGrow: справа от лого и внизу отдельным дополнительным блоком:

Вместо меню под лого могут разместиться иконки соцсетей – так подписчики с большей вероятностью присоединяться к комьюнити:

Лого на основном баннере может заменить собой хедер:

Логотип, соцсети и телефоны колл-центра:

Как сверстать шапку email-сообщения в редакторе eSputnik

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

По умолчанию всем полосам в базовых шаблонах системы предустановлена область “Контент”. Первое, что вам нужно сделать, – поменять область верхней полосы с “Контент” на “Хедер”:

Задайте параметры этой части письма во вкладке “Оформление”:

• размер текста;

• цвет фона;

• цвет фона контента;

• цвет текста;

• цвет ссылок;

• картинку в фоне (если это необходимо, и здесь речь идет не о логотипе, а о подложке с тематическим рисунком, поверх которой может располагаться лого или другая информация).

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

Далее подумайте, какие элементы и в каком расположении необходимы в шапке вашего письма, а затем создайте структуру с такими блоками в полосе “Хедер”.

Самый простой вариант – это просто заменить лого в базовом шаблоне системы.

В примере ниже были выполнены следующие действия: структура с баннером перенесена из полосы “Хедер” в полосу “Контент”, так как баннер в письме пригодится. В оставшейся структуре заменили изображение на нужный логотип, откорректировали его размеры (в данном случае увеличили), а затем удалили блок с декоративным разделителем:

Ниже – еще один пример. Давайте сделаем шапку с логотипом и иконками соцсетей. Добавляем в полосу “Хедер” пустую структуру с двумя контейнерами, в одном из них выбираем блок с изображением, куда и вставляем логотип, в другой – блок с иконками соцсетей:

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

Вывод

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

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

Не забудьте добавить в header одну немаловажную деталь – ссылку “Посмотреть в браузере”. Нужно дать подписчикам возможность посмотреть письмо в первозданном виде, если у кого-то из них не все блоки отобразились корректно. Но не вынуждайте подписчиков делать это – тестируйте письмо перед отправкой.

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

• логотип;

• меню;

• кнопка CTA;

• иконки соцсетей;

• телефоны компании;

• другое.

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

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