Оглавление
  1. Ключевые моменты
  2. Что такое email-дизайн и почему он важен
  3. Основы email-дизайна: разметка и визуальная иерархия
  4. Тема письма и прехедер: первое дизайнерское решение
  5. Email-дизайн с подходом mobile-first
  6. Дизайн СТА: как стимулировать целевые клики
  7. Персонализация и динамический контент в email-дизайне
  8. Целостность бренда во всех email-кампаниях
  9. Система шаблонов писем: создание с расчетом на масштабируемость
  10. Типографика в письмах: шрифты, размеры и читаемость
  11. Доступность писем: дизайн для каждого подписчика
  12. Изображения, GIF-ки и интерактивные визуальные элементы
  13. Типы писем и когда использовать тот или иной формат
  14. Геймификация и интерактивные элементы
  15. А/Б-тестирование решений по email-дизайну
  16. Аннотации в Gmail и стратегия превью в почте
  17. В завершение
  18. FAQ по email-дизайну
Лучшие практики
11 дней назад

Лучшие практики email-дизайна: полный гайд (2026)

Автор
Алина Самульская-Холина
Алина Самульская-Холина Copywriter и content writer в Stripo
Подвести итог
Email design best practices _ The complete guide
Оглавление
1.
Ключевые моменты

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

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

Ключевые моменты

  1. Email-дизайн не ограничивается созданием привлекательных писем — он влияет на весь процесс коммуникации: дойдет ли письмо до адресата, откроет ли он его и приведет ли это к желаемому действию.
  2. Тема письма и прехедер определяют, откроет ли адресат письмо и увидит ли ваше предложение.
  3. Использование одного основного CTA в письме позволяет адресату сосредоточиться на одном конкретном действии, ведущем к конверсии.
  4. Мастер-шаблон и библиотека модульных блоков являются основой для обеспечения целостности бренда, сокращения времени на создание писем и недопущения отклонений от общего стиля.
  5. Очень важно, чтобы email-дизайн был mobile-friendly; это обеспечивает более высокую кликабельность и лучший пользовательский опыт для подписчиков, так как более половины писем сейчас открывают на телефонах.
  6. Персонализация в email-маркетинге должна не ограничиваться именами, а включать сегментацию на основе поведения и динамические блоки контента.
  7. Комплаенс по стандартам доступности, таких как WCAG AA (про коэффициент контрастности), описательный alt-текст и логичная структура заголовков, приносит пользу всем получателям, а не только тем, кто использует ассистивные технологии.

Что такое email-дизайн и почему он важен

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

Экономическая обоснованность в цифрах

Письма по-прежнему занимают первое место в рейтинге ROI. Согласно сравнительному анализу Omnisend за 2026 год, email-маркетинг приносит от $36 до $42 на каждый вложенный доллар во всех отраслях, причем наибольшую доходность он демонстрирует в ритейле и eCommerce. Отчет Litmus «State of Email 2025», опубликованный компанией Validity в июне 2025 года, добавляет аспект бюджета: компании, которые выделяют более 15% своего маркетингового бюджета на электронную почту, в 2 раза чаще достигают показателя открываемости выше 40%, чем отправители в среднем.

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

  • средний показатель открываемости писем по всем отраслям достиг 43,46% в 2025 году, что выше показателя 2024 года (42,35%). Средний CR составляет 2,09%, а CTR — 6,81%. Функция Mail Privacy Protection от Apple завышает показатели открываемости, поэтому при оценке реального уровня вовлеченности следует сопоставлять их с данными о кликах и конверсии;
  • в сфере eCommerce 93% заказов связаны с рассылками в рамках рекламных кампаний, а не с автоматизированными сценариями, хотя автоматические письма демонстрируют средний показатель открываемости на уровне 47,82% и показатель кликабельности — 16,88%, что делает автоматизацию эффективным каналом взаимодействия с клиентами наряду с массовыми рассылками;
  • адаптивный дизайн обеспечивает на 15% более высокий CR по сравнению с неоптимизированными шаблонами писем. Учитывая, что 55% писем в настоящее время открываются на мобильных устройствах, адаптивный дизайн превратился из конкурентного преимущества в базовое требование;
  • динамический контент писем может увеличить доход на 22%, а таргетированные письма в сфере eCommerce демонстрируют на 267,21% более высокий CR по сравнению с нетаргетированными email-кампаниями;
  • персонализированные письма обеспечивают 6-кратное увеличение количества совершаемых покупок, а бренды, достигшие высоких результатов в области персонализации, получают на 17% больше дохода от рассылок, чем маркетологи в среднем.

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

Чем email-дизайн отличается от вебдизайна

Вебдизайнеры ориентируются на современные браузеры, JavaScript и CSS Grid. Email-дизайнеры работают с почтовиками, большинство из которых по-прежнему отключают JavaScript, игнорируют современные CSS и отображают один и тот же код по-разному в Gmail, Outlook и Apple Mail.

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

О чем идет речь в данном гайде

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

Основы email-дизайна: разметка и визуальная иерархия

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

Три варианта разметки и когда их использовать

В зависимости от особенностей структуры письма можно разделить на три типа:

  1. Разметка с одной колонкой является стандартной для большинства маркетинговых писем. Она без проблем отображается на мобильных устройствах и выглядит одинаково в разных почтовых клиентах. Используйте ее для новостных рассылок, приветственных писем, промоакций и большинства транзакционных писем.
  2. Гибридная разметка (с одной колонкой на мобильных устройствах и несколькими колонками на десктопах), реализованная с помощью медиазапросов, которые сворачивают колонки при достижении пороговых значений ширины экрана. Используйте такую разметку, если у вас есть элементы, расположенные рядом (характеристики продукта, тарифные планы), которые должны оставаться читаемыми на небольших экранах.
  3. Модульная разметка представляет собой набор независимых блоков контента, расположение которых можно изменять для каждого письма. Используйте ее для новостных рассылок, в которых разным сегментам отправляется разный контент.

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

Пример готовых модулей в Stripo

Оформление порядка чтения: схема «F», схема «Z», перевернутый треугольник

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

Исследования с использованием технологии отслеживания взгляда выделяют три паттерна чтения:

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

    Пример email-дизайна с использованием F-образного паттерна


    (Источник: Email Love)

  2. Z-образный: расположение текста по диагонали от левого верхнего угла к правому верхнему, затем вниз к левому нижнему углу, а затем по горизонтали к правому нижнему углу. Подходит для коротких промописем, содержащих один главный блок, один вспомогательный блок и один призыв к действию.

    Пример email-дизайна с использованием Z-образного паттерна


    (Источник: Email Love)

  3. Перевернутый треугольник: внимание привлекает верхняя часть страницы (заголовок, главная картинка), в середине текст (описание преимуществ), а внизу — единственный акцент (призыв к действию). Используйте этот вариант, если хотите, чтобы все действия пользователя сводились к одному клику.

    Пример email-дизайна в виде перевернутого треугольника


    (Источник: Email Love)

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

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

Свободное пространство как инструмент дизайна, а не пустота

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

В качестве отправной точки для определения размеров свободного пространства рекомендуется оставлять 20-30 пикселей между блоками контента, 12-16 пикселей между абзацами и не менее 24 пикселей вокруг кнопок. 

Когнитивная нагрузка: как снизить ее в каждом письме

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

  • одно задание на одно письмо. Рекламируйте одну вещь. Рекомендуйте одно действие. Если необходимо рассказать о пяти вещах, отправьте пять писем;
  • предсказуемая структура. Используйте один и тот же шаблон разметки для писем одного типа, чтобы подписчикам не приходилось заново привыкать к его структуре в каждой рассылке;
  • визуальная группировка. Объединяйте связанную между собой информацию с помощью общего фона, границ или интервалов. Не заставляйте читателей самостоятельно группировать информацию.

Создание хедера письма

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

Используйте в хедере:

  • название и логотип компании: помогите подписчикам с первого взгляда распознать отправителя и отличить ваши рассылки от рассылок конкурентов;
  • меню навигации: ссылки на основные разделы сайта, текущие распродажи или поиск магазинов. Ограничьтесь 3-5 пунктами, чтобы не перегружать разметку;
  • ссылку «Просмотреть в браузере»: не все почтовики корректно отображают интерактивные элементы или GIF-ки, поэтому предоставьте подписчикам возможность просмотреть полную версию онлайн;
  • ссылку для отписки: обычно она находится в футере, но некоторые бренды размещают ее и в хедере. Любое из этих мест подойдет, главное, чтобы она была хорошо видна и доступна в один клик.

Пример хедера в письме с логотипом

(Источник: письмо от Pandora)

Футер письма: структура и комплаенс

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

В целях соблюдения требований закона CAN-SPAM в США и регламента GDPR в ЕС в футере должны быть указаны:

  • ссылка или кнопка для отписки, которая срабатывает в один клик;
  • причина, по которой адресат получил письмо (например: «Вы зарегистрировались на сайте example.com»);
  • физический адрес компании-отправителя.

Футер письма с иконками соцсетей, контактными данными и ссылкой для отписки

(Источник: письмо от Stripo)

Тема письма и прехедер: первое дизайнерское решение

В большинстве статей тема письма рассматривается как элемент копирайтинга. Однако она также является дизайнерским решением, поскольку от нее зависит, увидят ли читатели остальную часть задумки вашего email-маркетинга. Исследования показывают, что 47% получателей решают, открывать ли письмо, исходя исключительно из его темы. Более того, 69% получателей сразу перемещают предложения в папку «Спам», если тема письма выглядит коммерческой.

Ограничения по количеству символов в разных почтовиках (Gmail, Apple Mail, Outlook)

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

Клиент

Тема письма (отображаемые символы)

Прехедер (видимые символы)

Мобильная версия Gmail

~30-40

~40-80

Десктопная версия Gmail

~70-80

~80-100

Мобильная версия Apple Mail

~35-40

~85-90

Десктопная версия Apple Mail

~90-100

~130

Десктопная версия Outlook

~55-70

~50-70

 

Разрабатывайте тексты с учетом ограничений самых маленьких экранов (Gmail для мобильных устройств, ~30-40 символов), а более длинные версии пусть отображаются в полном виде. Наиболее эффективные темы писем содержат в среднем 43,85 символа.

Формулы темы письма для повышения открываемости

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

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

  1. Информационный пробел: «Что мы узнали, разослав 1,8 млн писем в IV квартале».
  2. Конкретная выгода: «Сократите время на подготовку писем в 3,7 раза».
  3. Вопрос: «У вас возникают проблемы с отображением в темном режиме в Outlook?».
  4. Числовой контекст: «12 примеров email-дизайна, которые стоит позаимствовать».
  5. Персонализация: «{First name}, ваш ежемесячный отчет готов».

Примеры тем писем в разных форматах

Написание прехедера в качестве второй темы письма

Привлекательный прехедер — это тот самый фактор, который решает, откроют ли письмо или проигнорируют. Прехедеры обычно являются продолжением темы письма, то есть еще одним шансом пробудить любопытство целевой аудитории или вызвать эмоции. Почему? Индивидуальные прехедеры повышают показатель открываемости до 44,67%, тогда как без них он составляет 39,28%.

Несколько правил:

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

    Пример прехедера для промокампании
  • не допускайте, чтобы прехедер по умолчанию отображал первую строку письма («Просмотреть в браузере…»);
  • используйте скрытый прехедер, если хотите, чтобы подписчики видели одно в почте, а другое — при чтении письма.

Как использовать скрытый прехедер в Stripo

Важное примечание: в Stripo можно улучшить тексты тем писем и скрытых прехедеров с помощью AI. Чтобы включить эту функцию, перейдите в «Настройки» > «Рабочая среда» > «Проекты и группы», выберите свой проект и убедитесь, что включен «AI-помощник для темы письма и скрытого прехедера». Также можно добавить краткое описание сферы деятельности компании, чтобы помочь AI лучше понять контекст и провести генерирование оптимальных текстов для вас.

Как использовать AI для улучшения тем писем и скрытых прехедеров в Stripo

Динамические темы писем: масштабирование персонализации

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

Три примера, которые действительно работают:

  • персонализация по гео: «Бесплатная доставка в день заказа в {city}»;
  • поведение: «Вы оставили {product} в корзине»;
  • жизненный цикл: «{First name}, первый год использования {brand} — за наш счет».

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

Email-дизайн с подходом mobile-first

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

Почему mobile-first, а не mobile-friendly?

Mobile-friendly подход предполагает разработку дизайна для десктопных компьютеров с последующей проверкой на корректную работу на мобильных устройствах. При подходе mobile-first email-дизайн разрабатывается в первую очередь для мобильных экранов, а версия для десктопных компьютеров создается на его основе.

Разница прослеживается в трех аспектах:

  • иерархия: в mobile-first письмах самый важный блок размещается вверху, поскольку здесь нет сайдбара, на который можно было бы опираться;
  • точки касания: кнопки изначально рассчитаны на размер пальцев (не менее 44 × 44 пикселей), а не уменьшаются при наведении курсора, как на десктопе;
  • количество слов: mobile-first письма более короткие, поскольку читать 500 слов на телефоне — это утомительно.

Пример email-дизайна с mobile-first подходом

(Источник: письмо от Gucci)

Даже если вы выбираете адаптивный дизайн вместо подхода mobile-first, следуйте этим рекомендациям:

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

Как скрыть блок письма на мобильных устройствах

Разметка с одной и несколькими колонками: правила для каждого брейкпоинта

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

Вот три основные группы размеров разметки писем:

  • менее 480 пикселей (большинство телефонов): с одной колонкой, изображениями во всю ширину и расположенными друг над другом кнопками призыва к действию. Такие разметки на мобильных устройствах неизменно превосходят варианты с несколькими колонками, поскольку позволяют избежать горизонтального скроллинга и зума, которые снижают конверсию;
  • 481-768 пикселей (большие смартфоны, небольшие планшеты): все еще лучше использовать одну колонку. Увеличьте размер шрифта как минимум до 16 пикселей;
  • 769 пикселей и более (планшеты, десктопы): разметка с двумя колонками подходит для сетки товаров, сравнения характеристик и контентных модулей, где параллельное прочтение дает дополнительную ценность.

Оптимизация размера элементов управления и удобство касания по CTA

В руководстве HIG от Apple рекомендуется минимальный размер элемента касания 44 × 44 пикселей. В рекомендациях Material от Google указано 48 × 48 точек. Возьмите большее из этих двух значений и добавьте вокруг него отступы. Кроме того, вокруг любой кнопки должно быть не менее 8-12 пикселей свободного пространства со всех сторон, чтобы подписчики не касались ее случайно. 

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

А теперь давайте сравним email-дизайн для десктопных компьютеров:

Пример шаблона письма для десктопа

(Источник: письмо от Ryanair)

Вот как выглядит тот же шаблон письма на мобильном устройстве:

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

(Источник: письмо от Ryanair)

Тестирование на разных устройствах: инструменты и рабочий процесс

Базовое тестирование охватывает приложения Apple Mail для iOS (светлый и темный режимы), Gmail для Android (светлый и темный режимы), вебверсию Gmail (в браузерах Chrome и Firefox), десктопную версию Outlook (для Windows) и вебверсию Outlook. Составьте на этой основе матрицу минимального охвата.

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

Как протестировать письма в разных почтовиках в Stripo

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

Как шаблон письма отображается в разных почтовиках

Дизайн СТА: как стимулировать целевые клики

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

Как сделать кнопки в email-кампаниях более заметными? 

Давайте посмотрим:

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

Пример кнопки с призывом к действию

(Источник: письмо от Baublebar)

Текстовые призывы к действию и визуальные: в чем разница

CTA, представленные исключительно в виде изображений, исчезают, когда подписчики блокируют изображения. Outlook для Windows по-прежнему блокирует картинки по умолчанию, а многие корпоративные брандмауэры вообще не пропускают удаленные изображения. Если ваш единственный призыв к действию находится в файле PNG, значительная часть аудитории не увидит ничего.

Текстовые CTA (HTML-кнопки с фоновым цветом, задаваемым с помощью CSS) рендерятся каждый раз, выглядят корректно в темном режиме и остаются активными даже при сбое загрузки изображений. Используйте их в качестве варианта по умолчанию. Оставьте CTA на основе изображений для стилизованных разовых кампаний, в которых визуальный элемент является основным сообщением.

Первичная и вторичная иерархия CTA

Каждое письмо должно иметь одну цель, то есть один основной CTA. Если требуется вторичное действие («Узнать больше», «Просмотреть коллекцию»), оформляйте его в виде текстовой ссылки или «прозрачной» кнопки, чтобы визуально подчеркнуть приоритет основного действия.

Логика иерархии:

  • основной CTA: однотонный фон, фирменный цвет, текст размером 16-18 пикселей, на всю ширину экрана на мобильных устройствах;
  • вторичный CTA: с контуром или только текст, меньшего размера, расположенный внизу или сбоку;
  • остальные действия: встроенные текстовые ссылки в основном тексте.

Если ваша основная и дополнительная кнопки выглядят одинаково, ни одна из них не является основной.

Пример письма с несколькими CTA

(Источник: письмо от Stripo)

Текст кнопки: правило 6 слов

Лучшие CTA состоят из 1-4 слов. Все, что превышает 6 слов, — это фраза, притворяющаяся кнопкой. 

Сравните:

  • ❌ «Кликните здесь и получите бесплатную пробную версию уже сегодня» (9 слов, общий текст);
  • ✅ «Воспользоваться пробной версией» (3 слова, конкретный глагол).

Глагол в начале предложения лучше, чем существительное. Конкретное лучше общего. «Получить отчет» лучше, чем «Кликните здесь». «Активируйте скидку» лучше, чем «Отправить».

Размещение CTA: в верхней части и внизу экрана

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

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

Расположение кнопки CTA в мобильной версии

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

Персонализация и динамический контент в email-дизайне

Стандартные массовые рассылки с каждым кварталом теряют позиции. В 2025 году 97% маркетологов добавили в свои маркетинговые письма хотя бы один интерактивный элемент, а 49% использовали генеративный AI для создания статичного текста.

Уровни персонализации: от имени до поведенческих блоков

Персонализация — это не просто функция, которую можно включить или выключить, а целый спектр возможностей:

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

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

Разработка динамических блоков контента с адаптацией по сегментам

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

В Stripo можно создавать динамические блоки с условиями отображения: установите правила для любой структуры или контейнера, чтобы они отображались или скрывались в зависимости от данных подписчиков, переданных из вашего ESP. Пример: скрыть блок «Приветствие нового клиента» для всех, кто является клиентом более 30 дней.

Как создавать динамические блоки контента в Stripo

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

Три места для персонализации, которые стабильно влияют на показатели:

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

Smart-элементы в Stripo загружают актуальные данные о товаре (цену, наличие на складе, изображение) в тот момент, когда подписчик открывает письмо, поэтому в промописьме никогда не отображаются товары, которые уже распроданы.

Как использовать smart-контейнеры в конструкторе Stripo

Как создать персонализированный шаблон письма в Stripo

Краткое описание сегментированной промоакции:

  1. Создайте основную разметку с двумя или тремя блоками контента, отмеченными для сегментации.
  2. Добавьте smart-элемент «Карточка товара», связанный с вашим источником данных.
  3. Установите условия отображения для каждого блока (например, «показывать только если segment = returning_customer»).
  4. Вставьте merge-теги ({first_name}, {city}, {last_product}) в тему письма и текст письма.
  5. Перед отправкой протестируйте письмо в режиме превью, используя примерные профили подписчиков.

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

Целостность бренда во всех email-кампаниях

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

Мастер-шаблон: единственный достоверный источник информации о бренде

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

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

Правила использования цветовой палитры, шрифтов и логотипа в письмах

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

Зафиксируйте следующие элементы:

  • палитра бренда, состоящая из 2-3 цветов с шестнадцатеричными кодами, а также светлые / темные варианты каждого цвета;
  • шрифтовая сетка с фолбэками для вебдизайна (подробнее об этом в разделе о типографике);
  • оформление логотипа для светлого и темного фона: один файл PNG с прозрачным фоном и контуром толщиной 1-2 пикселя подходит для обоих режимов.

Как использовать палитру бренда в конструкторе Stripo

Использование набора brand guidelines от Stripo

Stripo предлагает набор «Brand Guidelines» — инструмент, который интегрирует правила брендинга непосредственно в рабочие процессы по созданию писем, чтобы упростить создание и использование рекомендаций по брендингу, специально предназначенных для писем. С помощью этого набора можно создать руководство по брендингу на основе шаблонов писем, встроенных прямо в конструктор Stripo. Система автоматически формирует руководство по брендингу, включающее все необходимые элементы, которое можно экспортировать в формат PDF или сохранить в редакторе. Это означает, что вся ваша команда может получить к нему доступ в любое время, не покидая платформу.

Генерирование набора brand guidelines в Stripo

Целостность во всех каналах: электронная почта, сайт, соцсети

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

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

Система шаблонов писем: создание с расчетом на масштабируемость

Когда вы запускаете более 4-5 email-кампаний в месяц, подход к email-дизайну «по мере необходимости» перестает работать. Вам нужна система email-дизайна, которая позволит стандартизировать и ускорить процесс разработки писем.

Мастер-шаблоны и библиотеки модульных блоков

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

Вот как можно распределить задачи:

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

Разработка многоразовых блоков контента

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

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

Как сохранить сквозные модули в Stripo

Правила именования шаблонов и управление командой

Правила именования, необходимые каждой команде:

{campaign type}_{audience}_{variant}_{date}

Примеры:

  • promo_returning-customer_summer-sale-A_2026-05
  • newsletter_all-subscribers_weekly_2026-05-12
  • transactional_all_password-reset_master

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

Как каталог шаблонов в Stripo ускоряет разработку

1650+ готовых шаблонов охватывают большинство типов рассылок: приветственные письма, напоминания о брошенных корзинах, новостные и праздничные рассылки, анонсы новых продуктов и письма для повторного привлечения клиентов. Использование проверенного шаблона и его адаптация сокращают время на подготовку примерно в 3,7 раза по сравнению с созданием рассылки с нуля.

Готовые шаблоны писем в Stripo

Типографика в письмах: шрифты, размеры и читаемость

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

Веббезопасные и кастомные шрифты: компромиссы и фолбэки

Веббезопасные шрифты (Arial, Tahoma, Verdana, Trebuchet, Georgia, Times New Roman, Helvetica, Courier) отображаются в любом почтовике. Они не выглядят эффектно, но всегда доступны.

Кастомные шрифты (Inter, Roboto, Poppins, Open Sans и любые другие из Google Fonts) отображаются в Apple Mail, iOS Mail, вебверсии Gmail и некоторых версиях Outlook. В десктопной версии Outlook и ряде других почтовиков вместо них используется шрифт по умолчанию.

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

Как добавить кастомные шрифты

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

Как добавить кастомные шрифты в Stripo

Иерархия размеров шрифта: хедеры, основной текст, подписи

Практичная шкала шрифтов для маркетинговых писем:

  • главный / H1: 28-36 пикселей;
  • секция / H2: 22-26 пикселей;
  • подсекция / H3: 18-20 пикселей;
  • основной текст: минимум 16 пикселей на мобильных устройствах (14 пикселей — только для юридической информации / футера);
  • подпись / мелкий шрифт: 12-13 пикселей.

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

Высота строки, межбуквенный интервал и ширина абзаца

Оптимизация типографики в письмах имеет огромное значение для удобства чтения. 

Эти стандарты помогут разработать письма, избегая риска наложения текста:

  • высота строки: в 1,4-1,6 раза больше размера шрифта основного текста. Более плотное расположение утомляет глаза; более редкое — создает эффект воздушности;
  • межбуквенный интервал: оставьте значение по умолчанию, если только вы не оформляете заголовки, написанные заглавными буквами (в этом случае поможет увеличение на 0,5-1 пиксель);
  • ширина абзаца: оптимальная длина строки составляет 50-75 символов. На мобильных устройствах это происходит автоматически. На десктопах ширина секций контента должна не превышать ~600 пикселей.

Типографика и доступность: чего следует избегать

Лучшие практики в области типографики и доступности писем:

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

Доступность писем: дизайн для каждого подписчика

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

Чеклист от WCAG для email-дизайнеров

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

WCAG 2.2 AA, сокращенная версия для писем:

  • контрастность: не менее 4,5:1 для основного текста, 3:1 для крупного текста (18 пикселей и более) и элементов интерфейса;
  • изменение размера текста: контент остается разборчивым, когда подписчики увеличивают масштаб до 200%;
  • alt-текст: каждое значимое изображение имеет описательный alt-текст; для декоративных изображений используется пустой атрибут alt (alt="");
  • семантическая структура: используйте реальные теги заголовков (H1, H2, H3) в правильном порядке, а не стилизованный текст;
  • навигация с помощью клавиатуры: до всех интерактивных элементов можно добраться и управлять ими без использования мыши;
  • независимость от цвета: никогда не используйте цвет в качестве единственного средства передачи смысла (добавляйте иконки, метки или текст).

Коэффициенты контрастности: инструменты и минимальные стандарты

Согласно требованиям WCAG Level AA, минимальный коэффициент контрастности должен составлять 4,5:1 для обычного текста и 3:1 для текста с увеличенным размером шрифта. 

Инструменты для проверки этого:

  • WebAIM Contrast Checker (бесплатный вебсервис);
  • Stark (плагин для Figma);
  • Adobe Color Contrast Analyzer (встроенный в Adobe XD).

Перед финальной доработкой дизайна проверьте все цветовые комбинации в своем мастер-шаблоне с помощью одного из этих инструментов. Цветовая контрастность — это основная проблема, связанная с нарушением доступности в интернете, которая затрагивает 79,1% всех главных страниц.

Совместимость со скринридерами: семантическая структура

Скринридеры анализируют структуру HTML, а не визуальную разметку. Это означает:

  • используйте <h1>, <h2>, <h3> для фактических заголовков в указанном порядке. Не пропускайте уровни ради стилизации;
  • используйте тег <table role="presentation"> для таблиц, служащих для разметки, чтобы скринридеры игнорировали их как структурные элементы;
  • укажите lang="en" (или язык отправки) в теге <html>;
  • добавьте в письмо понятный <title>, чтобы скринридеры озвучивали его назначение.

Рекомендации по заполнению alt-текста для изображений и GIF-ок

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

Вот как рекомендуется составлять alt-тексты:

  • декоративные изображения: alt="" (пустой, а не отсутствующий);
  • иллюстративные изображения: опишите, что передает изображение, а не как оно выглядит («Весенняя коллекция: легкие дождевики и водонепроницаемые сапоги», а не «Фотография желтого пальто»);
  • изображения CTA: опишите действие («Приобретите весеннюю коллекцию»);
  • GIF-ки: опишите, что происходит; если GIF-ка не загрузится, первый кадр и alt-текст должны все равно передать смысл.

Средство проверки доступности писем в Stripo анализирует контент и дизайн писем, выявляет такие проблемы, как отсутствие alt-текста или низкая контрастность цветов, и помогает исправить их прямо в редакторе.

Результаты тестирования писем в инструменте проверки доступности в Stripo

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

Лучшие практики в области доступности писем: полный гайд на 2026 годЛучшие практики в области доступности писем: полный гайд на 2026 год

Изображения, GIF-ки и интерактивные визуальные элементы

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

Размер изображений и параметры оптимизации в зависимости от устройства

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

Общие рекомендации по размерам изображений:

  • ширина: 600-640 пикселей для основного текста письма, 1200-1280 пикселей для Retina (используйте как атрибут width, так и CSS);
  • формат файла: JPG для фото, PNG для логотипов и графики с прозрачным фоном, GIF для анимации, WebP — только если вы убедились, что он корректно отображается в почтовиках вашей аудитории;
  • размер файла: общий размер письма не должен превышать 100 КБ, а размер каждого отдельного изображения — 50 КБ;
  • сжатие: TinyPNG или Squoosh удаляют метаданные и сжимают файлы без заметной потери качества.

Баннеры или главные изображения: лучшие практики для писем

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

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

Рекомендации по созданию баннеров:

  • хотя большинство пользователей десктопов выбирают изображения стандартного размера 600-700 пикселей, вы можете попробовать и другие размеры. Просто не забывайте об адаптивности для мобильных устройств;
  • попробуйте использовать карусели, видео и GIF-ки;
  • добавьте прозрачные кастомные картинки или коллажи, чтобы освежить шаблон письма.

Пример баннера в рекламной email-кампании

(Источник: письмо от Chanel)

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

Идеальный размер баннера для шаблонов писемИдеальный размер баннера для шаблонов писем

Правила использования GIF-ок: время загрузки, ограничения по миганию, фолбэк для первого кадра

GIF-ки могут сделать письма более динамичными и привлекательными, но использовать их нужно с осторожностью. Чтобы избежать медленной загрузки и проблем с отображением, размер GIF-ки не должен превышать 1 МБ, так как более крупные файлы могут быть урезаны или не загрузиться в некоторых почтовиках. Также важно размещать самый важный кадр первым, поскольку некоторые версии Outlook на Windows отображают только первый кадр, а не полную анимацию. А если GIF-км не загружается, четкий alt-текст все равно должен передавать основную идею или призыв к действию.

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

(Источник: письмо от Tiffany)

Когда использовать карусели, видео и интерактивные модули

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

Вот лучшие рекомендации для этого типа контента: 

  1. Используйте карусели (AMP), если хотите продемонстрировать 4 и более товаров, а письмо отправляется аудитории, в основном использующей Gmail. Для клиентов, не поддерживающих AMP, используйте статичную сетку.
  2. Встраивайте видео в качестве постера с наложенной кнопкой воспроизведения, ведущей на размещенное видео. По-настоящему встроенное воспроизведение видео работает в некоторых браузерах, но нестабильно.
  3. Используйте интерактивные модули вроде опросов, квизов и интерактивных элементов на изображениях, чтобы собирать данные о вовлеченности, не отправляя подписчиков на лендинг.

(Источник: письмо от Stripo)

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

Работа с изображениями в темном режиме: прозрачные PNG-файлы и сплошной фон

Около 35% писем открываются в темном режиме, а примерно у 82% пользователей смартфонов включен темный режим. 

Большинство ошибок при рендеринге в темном режиме связано с изображениями:

  1. Логотип с темным текстом на белом фоне исчезает или меняет цвет на противоположный в темном режиме.
    Как исправить: экспортируйте логотипы в формате PNG с прозрачным фоном и тонким светлым контуром, чтобы они были хорошо видны на светлом и темном фоне.
  2. Вокруг фотографий с белыми краями появляется заметная белая рамка.
    Как исправить: обрежьте белые края изображения или настройте цвет фона письма так, чтобы он совпадал с фоном картинки.

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

Как использовать превью в темном режиме в Stripo

Типы писем и когда использовать тот или иной формат

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

Письма в виде простого текста: когда простота превосходит дизайн

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

Текстовое письмо (или оформленное в таком виде) выигрывает в трех случаях:

  1. От живого человека к живому человеку: follow-up в сфере продаж, проверка состояния счетов, сообщения от учредителя.
  2. Доставляемость с высокими требованиями: если у вас возникли проблемы со спамом и требуется восстановить репутацию отправителя.
  3. Понятные тексты: рассылки, которые читаются как письма, а не как брошюры.

Письма с множеством HMTL-кода: подход с использованием минилендингов

Большинство маркетинговых писем создается именно так. Главное изображение, текст, CTA, вспомогательные блоки, футер. Используйте расширенный HTML, когда нужен брендинг, иерархия и визуальный сторителлинг — то есть в большинстве промописем, новостных рассылок и анонсов продуктов.

AMP / интерактивные письма: возможности и компромиссы

AMP for Email позволяет получателям взаимодействовать, не выходя из своей почты: заполнять формы, просматривать карусели, подтверждать участие в мероприятиях и просматривать актуальные предложения. В ходе собственного А/Б-тестирования Stripo выяснилось, что интерактивные формы обратной связи на базе AMP принесли на 520% больше ответов, чем внешние формы.

Компромиссы:

  • поддержка: Gmail и Yahoo полностью поддерживают AMP; Apple Mail и Outlook не поддерживают эту технологию;
  • фолбэк: всегда предоставляйте HTML-фолбэк для несовместимых клиентов. AMP не заменяет HTML, а лишь расширяет его возможности;
  • настройка: чтобы AMP-письма отображались в Gmail, необходимо добавить вашего отправителя в белый список Google.

Транзакционные и маркетинговые письма: разные правила дизайна

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

 

Транзакционные

Маркетинговые

Цель

Подтвердить действие

Стимулировать к новому действию

Дизайн

Лаконичный, быстрый, удобный для просмотра

Визуальный, брендированный, многослойный

Частота

Триггер (на каждое событие)

По графику (по кампаниям)

Персонализация

Обязательные поля (номер заказа, данные аккаунта)

Стратегическая (сегмент, поведение)

CTA

Один, контекстный («Просмотреть заказ»)

Один основной, один дополнительный

 

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

Геймификация и интерактивные элементы

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

Встроенные в письма опросы, анкеты и квизы

Опросы в один клик (на базе AMP) лучше всего подходят для получения обратной связи без лишних сложностей («Насколько вам понравилось? 👍/👎»). Квизы эффективны для рекомендаций товаров и сегментации портретов. Опросы с тремя и более открытыми вопросами лучше размещать на лендинге, а не в письме.

Пример письма с опросом клиентов

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

Игры и скретч-карты: данные о конверсии

Геймифицированные письма повышают конверсию в среднем на 2,5%, а интерактивный контент может увеличить средний чек на 15%. По прогнозам, к 2025 году объем мирового рынка геймификации достигнет $30,7 млрд.

Механизмы, обеспечивающие целостность работы:

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

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

AMP и интерактивность с помощью CSS: таблица совместимости

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

Техника

Gmail / Yahoo

Apple Mail

Outlook

AMP-карусель

AMP-форма

Состояние при наведении курсора в CSS

Частично

Аккордеон, созданный с помощью CSS

GIF-анимация

Только первый кадр

 

Используйте AMP, если аудитория предпочитает Gmail. Используйте CSS, если требуется поддержка Apple Mail. Всегда предусматривайте фолбэк на HTML.

Ebook
Ultimate Guide to Email Gamification
 
Ultimate Guide to Email Gamification

А/Б-тестирование решений по email-дизайну

Большинство «лучших практик» — это средние показатели. Лучший дизайн для вашей аудитории — это тот, который вы действительно протестировали.

Что тестировать: приоритезированный список переменных дизайна

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

  1. Тема письма (главный фактор, влияющий на открываемость).
  2. Главная картинка / баннер (создает первое впечатление).
  3. Текст призыва к действию (одно изменение глагола может повлиять на CR на 10-30%).
  4. Цвет CTA (только после того, как все остальное настроено; рост меньше ожидаемого).
  5. Имя отправителя (большее влияние, чем многие думают).
  6. Паттерн разметки (одна колонка или гибридный вариант).
  7. Степень персонализации (токены или поведение).

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

Три правила, позволяющие выявить большинство ошибок при тестировании:

  • по одной переменной на тест: если вы одновременно изменяете тему письма и главную картинку, то не сможете определить, что именно повлияло на показатели;
  • размер выборки важен: для построения доверительного интервала с вероятностью 95% при небольшом увеличении показателей (5-10%) обычно требуется более 1000 участников для каждого варианта. Тесты с меньшим количеством участников не дадут достоверных результатов;
  • длительность должна полностью покрывать окно просмотров: большинство просмотров происходит в течение 24 часов, однако B2B-аудитория открывает письма в течение 48-72 часов. Если завершить тестирование слишком рано, вы будете анализировать не ту группу.

Анализ результатов: на какие показатели следует ориентироваться при принятии решений по дизайну

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

OR по-прежнему полезен для выявления общих тенденций, однако функция Mail Privacy Protection от Apple снизила его точность, поэтому к нему следует относиться как к примерному, а не к абсолютному показателю. CR является более надежным критерием для оценки эффективности CTA и верстки, а CTOR помогает определить, насколько эффективно работали контент и дизайн рассылки независимо от темы письма. 

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

Открываемость стала менее достоверной, поскольку функция Mail Privacy Protection в Apple теперь влияет примерно на 50-60% зарегистрированных просмотров писем. Умные маркетологи уделяют основное внимание показателям кликабельности, конверсии и дохода на одно письмо в качестве основных KPI.

Аннотации в Gmail и стратегия превью в почте

Хотя многие email-маркетологи стремятся, чтобы их email-кампании попадали во вкладку «Входящие», вкладка «Промоакции» — это не враг.

Как работают аннотации на вкладке промоакций в Gmail

Аннотации в Gmail представляют собой структурированные данные (JSON-LD или микроданные), которые добавляются в тег <head> письма и используются Gmail для отображения карточки превью над темой письма на мобильных устройствах, а также в виде карусели в верхней части вкладки «Промоакции».

Пример аннотаций на вкладке промоакций в Gmail

Важны три типа аннотаций:

  • промокод, отображает код скидки в превью письма;
  • значок акции, добавляет надпись с предложением («Скидка 20%», «Бесплатная доставка»);
  • срок действия указывает, когда заканчивается предложение, что создает ощущение срочности уже в самом превью.

Добавление значков акций, сроков действия и рекламных изображений

Минимальная аннотация в Gmail включает в себя рекламное изображение (580×400 пикселей), метку со скидкой, отметку о сроке действия и логотип. Создайте ее один раз, сохраните в виде модуля и используйте в каждой проморассылке.

В Stripo есть конструктор аннотаций для промоакций в Gmail, поэтому нет необходимости писать JSON вручную.

Оценка эффективности аннотаций

Gmail не предоставляет данных о кликах по конкретным аннотациям, поэтому отслеживание осуществляется с помощью UTM-параметров:

  • добавьте уникальный UTM-источник / канал для отправки аннотированных писем (например: utm_source=gmail&utm_medium=annotation);
  • сравните CTR в кампаниях с аннотациями и без них;
  • обратите внимание на рост показателей кликабельности на мобильных устройствах, где аннотации отображаются в первую очередь.

В завершение

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

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

FAQ по email-дизайну

1. Какова идеальная ширина письма?

Стандартная ширина тела письма для десктопных компьютеров составляет 600 пикселей, а для мобильных устройств — 320-480 пикселей. В большинстве шаблонов писем используется контейнер шириной 600 пикселей с внутренними секциями контента, которые на мобильных устройствах сворачиваются. В шаблонах Stripo по умолчанию используется именно такая ширина.

2. Сколько изображений должно быть в письме?

Четких правил нет, но оптимальным соотношением текста и изображений считается 60 / 40. Слишком много изображений — спам-фильтры начнут подозревать рассылку, а в браузерах с отключенной поддержкой изображений письмо не отобразится. Слишком мало — письмо будет выглядеть скучно. Для большинства маркетинговых писем достаточно от трех до пяти удачно подобранных изображений.

3. Мне лучше воспользоваться no-code конструктором писем или верстать самостоятельно с нуля?

No-code конструктор — идеальный вариант, если вы отправляете более двух писем в месяц и нуждаетесь в надежном рендеринге для разных платформ. Ручное верстание подходит для разовых индивидуальных кампаний или разработчиков, которые уже ведут базу кода для рассылок. Для всех остальных создание рассылок в no-code редакторе сокращает время на подготовку примерно в 3,7 раза без ущерба для качества рендеринга.

4. Что делает письмо mobile-friendly?

Разметка с одной колонкой шириной менее 480 пикселей, размер основного текста не менее 16 пикселей, площадь касания не менее 44×44 пикселей, CTA на всю ширину, настройка ширины изображений в процентах или с помощью свойства max-width: 100%, а также тестирование отображения как минимум в Gmail для Android и Apple Mail для iOS. Полная информация приведена в разделе о приоритете мобильных устройств выше.

5. Как проверить отображение писем в разных почтовиках?

Три опции, в порядке возрастания охвата: отправка на собственные тестовые аккаунты (бесплатно, с ограничениями), использование бесплатного инструмента, такого как PutsMail (базовое превью), или использование платной тестовой платформы, такой как Litmus, Email on Acid или встроенный в Stripo инструмент для тестирования почтовиков (90+ почтовиков в одной итерации).

6. В чем разница между email-дизайном и email-маркетингом?

Email-маркетинг — это стратегия: кому вы отправляете письма, когда, зачем и что вы измеряете. Email-дизайн — это то, как построено сообщение, чтобы стратегия действительно достигла своей цели и попала в папку «Входящие». Может быть отличная стратегия с плохим email-дизайном (высокая открываемость, низкая кликабельность). Может быть отличный email-дизайн с плохой стратегией (выглядит красиво, но никто не открывает). Это разные навыки, и в лучших кампаниях вкладываются в то и другое.

Воспользуйтесь всеми лучшими практиками email-дизайна с помощью Stripo
Была ли статья полезна?
Tell us your thoughts
Спасибо за ваш отзыв!
0 комментариев
Редактор Stripo
Упростите процесс создания писем.
Плагин Stripo
Интегрируйте Drag-n-Drop редактор Stripo в свое веб-приложение.
Заказать шаблон
Наша команда может разработать и сверстать его для вас. Просто заполните бриф, и мы свяжемся с вами в ближайшее время.

Редактор Stripo

Для команд специалистов по email-маркетингу и индивидуальных разработчиков писем.

Плагин Stripo

Для продуктов, которые могут эффективно использовать интегрированный white label конструктор писем.