Дизайн Шаблоны How-to
~ 16 мин читать
2 комментарии
54807 просмотры
оценить
09 октября 2020

Дизайн хедера в письме: 16 лучших рекомендаций

Stripo / Blog / Дизайн хедера в письме: 16 лучших рекомендаций

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

Итак, полный хедер письма состоит из трех основных частей:

  • информация об отправителе;

  • тема письма и прехедер;

  • непосредственно хедер письма.

В этом посте мы покажем, как настроить тему и прехедер. И поделимся 16-тью идеями, как сделать хедеры рассылок эффективнее и информативнее.

Stripo_Хедер Письма

(Источник: шаблон Stripo)

Информация об отправителе

В данной части хедера обычно располагается:

  • имя отправителя;

  • имя получателя;

  • адрес «от»;

  • адрес «кому»;

  • дата;

  • логотип бренда (если нужно).

Email Header Best Practices_RU

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

Тема письма и прехедер

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

Тема письма

Тема, наряду с именем бренда играет, как правило, решающую роль, откроет ли ваше письмо получатель. А именно: 47% пользователей судят именно по теме, стоит ли открывать письмо. И еще 69% по этой же причине отправляют письмо в спам, даже не открывая. Мы не будем сейчас останавливаться на вопросе «как написать эффективную тему», ибо статья не об этом. Но напомним, что у нас есть подборка «лучших писем».

Subject Lines_Examples in Inboxes

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

Как правило, вы ее создаете в своем ESP, но можно это сделать и в Stripo:

Setting Subject Line_Ru

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

Предзаголовок

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

Каждый раз, когда я получаю письмо от Mailchimp, SimilarWeb или Netflix, я знаю, не открывая его, о чем оно будет.

Тема и Хедер Письма на Мобильных

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

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

Chubbies: «Я изменился — я был очень скуп, но теперь я изменился из-за праздничной распродажи».

Brighton: «Она любит КРАСНОЕ на праздники — И Вы Тоже».

D’Artagnan: «Отправьте Им Стейк! СКИДКА 15% на Все Стейки и Отбивные — Распродажа Заканчивается в Воскресенье».

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

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

  • введите тему письма и текст прехедера.

Setting Preheaders for Emails in Stripo_RU

Важно отметить:

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

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

В Stripo вам просто нужно включить опцию «Дополнить пустотой».

Enabling the Fill In with Whitespaces Option_RU

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

Примеры писем со включенной опцией "Дополнить Пустотой Вместо Прехедера"

Установите тему и текст для предпросмотра писем

Используйте промо-аннотации Google

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

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

Пример аннотации писем в папке Промо в Гугл

(Источник: Рассылка от Rozetka)

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

Посмотрите наше короткое видео, чтобы узнать, как создавать промо-аннотации для ваших рассылок с помощью Stripo.

Выделяйтесь во входящих пользователей с помощью аннотаций

Чтобы узнать о требованиях к значкам аннотаций, обратитесь к нашему «Руководству по обновленной вкладке промоакций в Gmail».

Хедер

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

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

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

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

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

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

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

Stripo-Header-with-company-name

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

Stripo-logo-with-no-company-name

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

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

Меню

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

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

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

Stripo-Header-Menu

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

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

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

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

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

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

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

Stripo-StoreFinder-in-menu

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

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

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

Stripo-Special-offer-in-Header

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

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

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

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

Stripo-Informative-Preheader

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

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

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

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

Stripo-Header-ED-GIF

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

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

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

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

Stripo-CTA-button-in-header

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

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

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

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

Stripo-Social-Media-Links

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

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

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

Stripo-Header-GIF-in-Header

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

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

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

Stripo-Header-Ferrari

Stripo-Header-Merry-Christmas-Design

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

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

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

Email Header Image_Animations

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

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

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

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

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

Stripo-Header-Custom-Fonts-in-Menu

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

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

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

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

Отправитель: Apple News

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

Email Header_Putting Data in Email Headers

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

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

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

Stripo-Frame-in-Header

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

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

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

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

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

Stripo-Header-with-Logo

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

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

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

Stripo-Header-Update-Preferences

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

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

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

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

Stripo_Email Header Design_Membership ID

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

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

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

Stripo-Header-Best-Example

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

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

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

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

Все шаблоны Stripo уже содержат хедер. Мы предлагаем 350+ шаблонов. 

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

Среди предложенных шаблонов несомненно есть тот, который соответствует требованиям вашей нынешней кампании
Перейти

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

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

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

Stripo-Header-Adding-a-New-Structure

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

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

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

Stripo-Header-Inserting-Logo

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

Stripo-Header-Setting-Logo-Size

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

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

Stripo-Header-Dragging-Menu-Block

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

Stripo-Header-Email-Menu

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

Stripo-Header-Menu-Apppearance

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

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

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

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

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

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

Stripo-Header-Adaptive-Menu

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

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

Stripo-Header-My-Header

Важно отметить:

Хедер создается всего раз и используется во многих кампаниях в течение длительного времени. Мы предлагаем сохранить только что созданный вами хедер в библиотеку Модулей. При создании новых каманий, вам нужно всего лишь перетащить свой хедер их библиотеки — и шапка вашего письма готова!

Сохраняем хедер в библиотеку модулей

В завершение

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

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

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

Используйте Stripo для создания информативных и более эффективных шапок письма

Дмитрий Головцов 3 недели назад

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

Анна Кузнецова прокомментировал Дмитрий Головцов 3 недели назад

Дмитрий, Добрый день. Спасибо большое, что обратили наше внимание на это. Мы в рассылку по ошибке вставили неверную ссылку. Приносим свои извинения за это. Статья про геймификацию у нас есть. Ее писал наш СЕО. Вот ссылка: https://stripo.email/blog/gamification-in-email-marketing/ И именно этой статьей мы хотели поделиться в письме. В следующий раз будем тщательнее проверять все ссылки, которыми делимся в письмах.

Вас также может заинтересовать

← Предыдущие статьи Следующие статьи →
Mothers-Day-Best-Practices-Featured-Image
2 дня назад · 10 мин читать
Email-маркетинг ко Дню матери: полное руководство

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

Дизайн Маркетинг Шаблоны
Earth Day Email Examples_Cover Image
6 дней назад · 13 мин читать
Примеры писем ко Дню Земли

За последние годы интерес общественности к проблемам экологии только вырос и мы не можем не поговорить с вами про наступающий День Земли. А точнее про email рассылку к этой дате. Что неуместно в таких письмах, а что все-такие стоит включить, как сделать письмо оригинальным — мы разберем на 15 примерах известных компаний.  С этим шаблоном вы создадите рассылку ко Дню Земли в считанные минуты Использовать Подготовка дизайна писем ко дню Земли Создавая email-рассылку, нужно учитывать множество факторов. Они вам известны:...

Дизайн Маркетинг Шаблоны How-to
Будьте всегда в курсе последних новостей в области email-маркетинга!