Дизайн хедера электронного письма: 15 лучших рекомендаций

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

В полный комплект хедера рассылки входят имя отправителя, заголовок, прехедер, адрес в поле “ответить” и логотип.

Если вы используете для отправки рассылок ESP-сервис, то имя и обратный адрес отправителя будут указаны правильно, так как они остаются неизменными от кампании к кампании. Поэтому давайте поговорим о дизайне хедера HTML-емейла.

Хедер письма HTML состоит из двух полос: собственно хедер (в него входят меню и логотип) и прехедер.

Прехедер

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

Информативный прехедер сообщает получателям о цели письма. На десктопных устройствах он идет после дефиса “-” в заголовке, на мобильных — в строке ниже заголовка. Согласно исследованию, проведенному Litmus, 24% получателей решают, открывать ли входящее сообщение, исходя именно из прехедера.

Каждый раз, когда я получаю емейл от Campaign Monitor или Quora Team, я знаю, о чем он, даже не открывая его.

“Гостевой пост от Zembula” — звучит отлично.

Некоторые компании добавляют в прехедер объявления о скидках и акциях, что приносит им дополнительные клики.

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

Chubbies: “Я изменился — Да, я был скупым, но теперь исправился благодаря праздничной распродаже”.

Brighton: “Она любит КРАСНОЕ на праздники – И вы тоже”.

D’Artagnan: “Отправь им стейк! Скидка 15% на все стейки и котлеты — распродажа заканчивается в воскресенье”.

Примечание: если в вашем сообщении нет прехедера, получатели увидят после заголовка начало текста емейла.

Как добавить текст прехедера с помощью Stripo:

• нажмите кнопку “Настройки” над шаблоном;

• введите текст заголовка и прехедера.

Хедер

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

Как должен выглядеть профессиональный хедер емейла? Здесь нет каких-то универсальных правил, все зависит от множества факторов и нюансов. Но мы приведем ряд идей и примеров.

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

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

Название компании и логотип

Как правило, в логотипе компании содержится ее название.

Если ваша компания является новичком на рынке, и люди еще только знакомятся с вашим брендом и продукцией, не забудьте указать название компании. Потому что название — это «визитная карточка» компании, по которой клиенты будут вас узнавать. Добавляйте название во все емейлы независимо от того, триггерные ли это сообщения или промо-рассылки.

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

Примечание: фон логотипа должен быть прозрачным, чтобы он гармонично сочетался с цветовой схемой сообщения.

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

Меню

Меню — еще один традиционный элемент емейла, так как помогает вам сориентировать клиентов и ​​привести их на ваш сайт. Меню должно быть действующим.

Вы можете выбрать обычное или интерактивное меню.

Все обычные меню, которые вы добавляете с помощью Stripo, полностью адаптивны.

Но если вы решили добавить интерактивное меню, не забудьте о запасном варианте.

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

Лучшие рекомендации по дизайну хедера емейла

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

1. Добавьте поиск магазинов

Отправитель: Adidas

Помимо логотипа и меню, Adidas также добавили в хедер Store Finder — поиск магазинов. Гениальная идея. Я выбираю туфли, которые мне нужны, прямо в емейле, а затем Store Finder находит адрес ближайшего офлайн-магазина, чтобы примерить туфли. Отличный сервис. Спасибо!

2. Добавьте информацию о скидке

Отправитель: Anabel

Это один из лучших примеров хедера письма: косметическая компания Anabel добавила в хедер свое предложение. Интересное решение. Я не могла пропустить его. А за более подробной информацией мне пришлось перейти по ссылке.

3. Раскручивайте продукцию

Отправитель: Filmmaker

Компания Filmmaker рекламирует платную подписку на живой журнал прямо в хедере.

Хороший способ рекламы продукции, если рассылка имеет чисто информативный характер.

4. Делайте подарки получателям

Отправитель: EnglishDom

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

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

Великолепный пример хедера.

4. Позвольте читателям войти в аккаунт прямо из хедера

Отправитель: Grammarly

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

Закончив читать весь отчет Grammarly, я нажала “Посетить мой редактор”, чтобы продолжить работу с Grammarly.

5. Иконки соцсетей

Отправитель: The Emy Blog

Почему бы не пойти против системы? Если вы хотите выделиться — поместите в хедер ссылки на ваши аккаунты в соцсетях. Это довольно необычно, но примечательно. Особенно если ваша основная цель — собрать подписчиков.

6. Используйте GIF или анимированные логотипы

Отправитель: Banana Republic

Хотите сделать свой хедер анимированным? Сделайте. Только убедитесь, что размер файла изображения не превышает 2 Мб, потому что большинство ваших клиентов будут читать емейл на мобильных экранах. Если загрузка сообщения занимает много времени, люди просто закрывают емейл.
Замечательный пример от Banana Republic — заметно, оригинально, но при этом не слишком ярко.

7. Поработайте над фоном хедера

Отправитель: Ferrari

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

8. Украшайте хедеры по праздникам

Отправитель: Chubbies

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

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

9. Применяйте пользовательские шрифты для пунктов меню

Отправитель: Sunrise

Хороший декоративный шрифт дополнит дизайн вашего хедера. Используйте все свое воображение — будьте креативными!

Важно, чтобы все шрифты были читабельными — поэтому курсивные шрифты требуют большего размера.

Напомним, что в Stripo вы можете добавлять кастомные шрифты.

Примечание: если почтовик не поддерживает выбранный шрифт, он заменит его дефолтным.

К сведению: скриншот нестандартного шрифта меню сделан в Gmail, ОС — Windows 10.

10. Указывайте дату отправки

Отправитель: Dictionary

Взглянув на емейл от Dictionary, легко определить, в какой день он получен. Как? Эта компания добавляет в хедер дату отправки. На мой взгляд, это одна из лучших идей для дизайна хедера.

11. Используйте рамки

Отправитель: Hummingbird

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

Примечание: Stripo.email предлагает широкий выбор различных рамок, которые находятся в блоке “Дополнительные изображения”.

12. Не использовать хедер. От слова “совсем”

Отправитель: Nike

У всех известных брендов есть что-то общее — они имеют свой стиль. Например, емейлы от Nike всегда “бесшовные”. Вы никак не заметите, где заканчивается хедер и начинается баннер.

Но на самом деле Nike вообще не используют никаких хедеров ? Они просто помещают логотип поверх баннера. Неплохой трюк. Иногда так делают и Airbnb.

13. Добавляйте ссылку “Обновить предпочтения”

Отправитель: D’Artagnan

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

Ресторан D’Artagnan размещает кнопку “Обновить предпочтения” прямо в хедер.

14. Указывайте ID участника

Отправитель: Decathlon

Если вы предлагаете своим клиентам членство/клубную карту, их личный ID должен быть всегда под рукой. Конечно, можно разместить эту информацию где-то в настройках их аккаунтов. Но Decathlon указывают номер ID непосредственно в хедере. Довольно броско. Таким образом, получатели всегда будут знать, где найти членский номер.

15. Добавляйте фото

Отправитель: Брайан Стелтер, CNN

Вот один из самых информативных хедеров. В нем есть кнопки “Поделиться”, иконки соцсетей, даты, имя автора и его фото.

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

Как создать крутой хедер емейла в Stripo – инструкция

В нашем редакторе есть два способа создания хедеров:

1. Настройка существующего хедера

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

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

2. Создание хедера с нуля

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

• перетащить в шаблон новую структуру;

Если вы хотите, чтобы ваш логотип и меню находились в одном ряду, перетащите новую структуру в шаблон, с которым вы собираетесь работать, будь то новый или уже используемый вами шаблон. Сколько блоков добавить в структуру? Сколько пожелаете. Редактор Stripo предлагает структуры с 1-4 структурами;

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

• чтобы добавить логотип, я нажимаю на иконку “изображение”;

• задаю размер логотипа;

Не забудьте включить кнопку “Адаптивное изображение” для мобильных устройств;

• теперь просто перетаскиваю блок меню в первую колонку структуры шаблона;

• убираю третий пункт меню, так как мне нужно только два в каждой колонке (по умолчанию блок меню имеет три пункта);
• даю им имена — “templates” и “release notes”;
• выбираю цвет шрифта – это “цвет ссылок”;

• делаю то же самое с третьей колонкой;
• задаю цвет фона (белый) для всей строки;

• выравниваю контейнеры — в моем случае 250/250, а контейнер с логотипом — всего 30;

Если вы хотите добавить фоновое изображение, вам нужно нажать кнопку “Фоновое изображение”;

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

Я установила Tahoma, 18.

Примечание: напоминаем, что в Stripo можно добавлять пользовательские шрифты и применять их к меню и всем другим текстам в шаблонах;

• нажмите кнопку “Адаптивная структура” — настройте правильное отображение вашего меню на мобильных устройствах;

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

Вот что получилось:

Вывод

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

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

Искренне желаю удачи во всех ваших будущих начинаниях!