13 сентября 2021

15 лучших рекомендаций по дизайну email-рассылок

Создать профессиональные письма
Оглавление
  1. 1. Напишите убедительную тему письма
  2. 2. Сделайте цепляющий прехедер
  3. 3. Придерживайтесь корпоративного стиля
  4. 4. Создайте собственный хедер
  5. 5. Добавляйте в письма аннотации для вкладки промо в Gmail
  6. 6. Используйте читабельные шрифты
  7. 7. Создавайте смысловые баннеры
  8. 8. Добавляйте подходящие GIF-анимации
  9. 9. Делайте кнопки призыва к действию хорошо заметными
  10. 10. Придерживайтесь адаптивного email-дизайна для мобильных
  11. 11. Будьте лаконичны
  12. 12. Смелее используйте интерактивность и AMP
  13. 13. Применяйте геймификацию писем
  14. 14. Уделите внимание доступности писем
  15. 15. Добавляйте подпись или футер
  16. И общие правила по созданию эффективных писем
  17. В завершение
1.
1. Напишите убедительную тему письма

Создать профессиональную конкурентоспособную рассылку не так-то просто. Но все лучшие практики email-дизайна 2021 года, представленные в этой статье, значительно облегчат эту задачу.

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

1. Напишите убедительную тему письма

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

Рекомендации по дизайну почты_Работа со строками темы

(Десктопное устройство)

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

Рекомендации по дизайну почты_Subject Lines на мобильных устройствах

(Мобильное устройство)

2. Сделайте цепляющий прехедер

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

Рекомендации по дизайну почты_Preheader

Обратите внимание:

  • у вас есть всего 100 символов на мобильных устройствах и 30 на десктопе, чтобы убедить читателя открыть ваше письмо;

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

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

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

Пробелы в предварительных заголовках_Рекомендации по дизайну почты

Вы можете заполнить прехедер пробелами после короткого текста, как это сделали Gap Flash Sale.

Рекомендации по дизайну почты_Настройка строки темы в Stripo

Или оставить его совершенно пустым, как в письме от Banana Republic.

Добавление пробелов в предыдущие заголовки_Stripo_Наилучшие практики дизайна почты

Добавляйте темы и прехедеры писем в Stripo
Присоединиться

3. Придерживайтесь корпоративного стиля

Исключительно важное условие. Причем это нужно делать везде: на сайте, в email-рассылках, соцсетях и т.д. Бренд должен использовать одни и те же фирменные шрифты, тон текста и цветовую схему.

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

В Stripo вы можете создать файл «Brand Guidelines». В нем содержатся стили дизайна письма и брендовая айдентика (лого, контактная информация и т.д.), взятые на ваш выбор из любого письма вашей компании.

Как получить brand guidelines и бренд-киты за одну минуту в Stripo

Создайте «Brand Guidelines» файл для своего бренда
Начать

4. Создайте собственный хедер

О хедерах писем уже написаны сотни тысяч слов.

Поэтому ограничусь несколькими важными советами по теме:

  • название и логотип вашей компании — две неотъемлемые части хедера. Сам факт присутствия этих двух элементов повышает узнаваемость вашего бренда среди тысяч других писем;

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

Заголовок-Ручная работа-Заголовок-Stripo

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

5. Добавляйте в письма аннотации для вкладки промо в Gmail

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

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

Промо-Вкладка-Gmail_Аннотация

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

В Stripo вы можете использовать этот инструмент, а также многие другие — все собрано в одном месте. Хотите попробовать?

Как использовать конструктор промо-аннотаций для Gmail?

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

6. Используйте читабельные шрифты

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

  • не используйте декоративные шрифты;

  • избегайте курсива, так как он не допускается правилами доступности писем;

  • лучше не использовать более 3 типов шрифтов, иначе письмо может выглядеть неряшливо;

  • убедитесь, что выбранный шрифт хорошо читается.

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

7. Создавайте смысловые баннеры

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

Баннер всегда находится на первом экране вашего письма и содержит основной месседж всей кампании.

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

Существует 9 основных типов баннеров, которые мы описали в блоговой статье «Виды баннеров: как создать баннер в Stripo Email Builder за считанные минуты». В ней вы найдете еще и мануалы по созданию баннеров.

8. Добавляйте подходящие GIF-анимации

Зачем использовать гифки в письмах? Для того, чтобы:

  • завладеть вниманием читателя;

  • разместить несколько баннеров на одном скролле экрана;

  • сфокусировать внимание пользователя на определенном элементе письма;

  • продемонстрировать широкий ассортимент вашей продукции или разные цветовые варианты определенного товара.

(Источник: рассылка от Victoria’s Secret)

Но будьте осторожны с гифками.

Правила, которые нужно соблюдать, добавляя в письма GIF-анимированные изображения:

  • добавляйте только одну гифку на один скролл экрана во избежание приступов фотосенситивной эпилепсии у читателей;

  • по этой же причине не используйте анимации с частотой более 2 кадров в секунду;

  • добавляйте к GIF альтернативные тексты с коротким описанием того, что на них показано. Таким образом вы предоставляете клиентам информацию на тот случай, если GIF-файлы не загрузятся;

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

9. Делайте кнопки призыва к действию хорошо заметными

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

Рекомендации по дизайну почты_Призыв к действию

(Источник: рассылка от Brighton)

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

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

К сожалению, некоторые кнопки в Outlook теряют свои стили оформления. Но мы знаем, как решить эту проблему!

Просто активируйте опцию «Поддержка Outlook» — и ваша кнопка будет отображаться так, как вы хотите. Причем во всех версиях Outlook.

Поддержка-для-Outlook_Control

Make Outlook-compatible buttons with just one click in Strip
Join Stripo

10. Придерживайтесь адаптивного email-дизайна для мобильных

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

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

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

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

  • отключение определенных элементов писем на смартфонах. Вы можете даже скрыть некоторые изображения в мобильном режиме;

Почта-Заголовок-Рекомендации_Отключение-определенных-вкладок-меню-на-мобильных-устройствах

  • инверсию элементов при необходимости;

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

Рекомендации по дизайну почты_Мобильный дизайн

(Футер письма, размер шрифта 12 пикселей, декстоп)

(Футер письма, размер шрифта 16 пикселей, мобильный девайс)Рекомендации по дизайну почты_Мобильный дизайн_Шрифты

Дополнительную информацию о настройке стилей дизайна для мобильной версии письма вы найдете у нас в блоге, в статье «Как сделать письмо адаптивным».

11. Будьте лаконичны

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

12. Смелее используйте интерактивность и AMP

Просто несколько фактов и цифр:

  • интерактивные рассылки, в которых клиенты могли оценить компанию прямо в письме, приносили в 8,33 раза больше оценок, чем обычные HTML-рассылки;

  • интерактивная открытая форма Stripo, которая позволяет оставлять комментарии непосредственно в письме, генерирует в 5,2 раза больше отзывов, чем форма на внешнем ресурсе;

  • предоставив покупателям опцию увидеть подробные описания товаров, оставленных в корзине, Ecwid повысили продажи на 82% — все это благодаря технологии AMP.

(Источник: Mailmodo)

Больше впечатляющей статистики вы найдете здесь.

13. Применяйте геймификацию писем

Геймификация позволяет создавать для писем что-то в духе встроенных игр. Давайте рассмотрим некоторые её преимущества:

  • геймификация писем повышает конверсию;

  • вы развлекаете клиентов своими письмами — вы помогаете клиентам немного расслабиться и повеселиться;

  • геймификация увеличивает открываемость — пользователи ждут от вас новых писем;

  • ROI (окупаемость инвестиций) возрастает в 3 раза;

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

В нашем блоге есть статья «Геймификация в email-маркетинге», в которой мы делимся советами по быстрому созданию игр и предлагаем несколько готовых механик.

Время делать рассылки фановыми!

14. Уделите внимание доступности писем

Этот пункт — одновременно и рекомендация, и правило.

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

Вот основные рекомендации по дизайну доступных писем:

  • используйте контрастные цвета разных оттенков;

  • всегда! Слышите, ВСЕГДА! добавляйте альтернативный текст ко всем изображениям и GIF-анимациям;

  • если GIF-файл выполняет обучающую миссию, обязательно добавьте к нему детальное текстовое описание;

  • избегайте двух и более GIF-анимаций на одном экране;

  • проставляйте знаки пунктуации в конце каждого предложения или пункта маркированного списка;

  • укажите тип контента <charset=”utf-8″> в хеде кода письма, чтобы все символы, используемые в сообщении, были хорошо читаемыми;

  • установите язык в хеде кода;

  • выравнивайте тексты по левому краю — и ни в коем случае не по центру.

15. Добавляйте подпись или футер

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

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

Если же от своего имени — обязательно добавьте свое фото, контактную информацию и «До свидания, до скорой встречи».

Подпись-Дизайн-для-Почта-Дайджесты

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

И общие правила по созданию эффективных писем

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

  • не забывайте о сжатии картинок, чтобы сократить время загрузки;

  • делайте контент актуальным для клиентов. Иными словами, персонализируйте предложения и контент рассылок;

  • добавляйте ссылку для отписки!

Рекомендации по дизайну почты_Кнопка отказа от подписки

(Источник: рассылка от Gap Flash Sale)

В завершение

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

Создавайте эффективные письма — со Stripo навыки программирования не понадобятся
Была ли статья полезна?
Tell us your thoughts
Спасибо за ваш отзыв!
2 комментариев
Mathieu Gagnon 2 года назад
Excellent!
Анна Кузнецова 2 года назад
Mathieu Gagnon, We're happy you liked it. Thank you for your supportive feedback.
Тип
Индустрия
Сезоны
Интеграции
Редактор Stripo
Упростите процесс создания писем.
Плагин Stripo
Интегрируйте Drag-n-Drop редактор Stripo в свое веб-приложение.
Заказать шаблон
Наша команда может разработать и сверстать его для вас. Просто заполните бриф, и мы свяжемся с вами в ближайшее время.