По медиане на маркетинговое письмо кликают 6.81% тех, кто его открыл (MailerLite). Из каждых 100 читателей, которым тема показалась достаточно интересной, 93 пролистывают письмо, пробегают глазами и закрывают.
Большинство таких писем похожи друг на друга: стоковый hero, кнопка «Shop now» по центру, футер из прошлой кампании. Ничего не сломано, но и нажать не на что.
Этот гайд показывает, как сделать письмо по-настоящему заметным. Разберём дизайн email-писем блок за блоком, от hero до футера, и посмотрим на практики, которые приносят клик. Особенно они пригодятся мобильным командам, которые уже работают с push и in-app и хотят, чтобы email выглядел частью того же продукта, а не отдельной рассылкой.
Почему большинство писем выглядят одинаково
Пролистайте любую подборку вдохновляющих примеров email-дизайна, и у лучших писем найдётся 1 общая черта: каждый блок спроектирован под конкретное письмо. Основной поток писем во входящих устроен наоборот, и причин 3.
- HTML для email сложно верстать. Письма до сих пор держатся на табличной вёрстке и инлайн-стилях, и дизайн, который хорошо выглядит в Gmail, может развалиться в Outlook. Поэтому всё, что выходит за рамки стандартного шаблона, требует разработчика и раунда тестов. Большинство команд берут стоковый layout, меняют логотип и отправляют.
- Стоковые визуалы. Hero-картинку подбирают так, чтобы она подходила под любую кампанию, а значит, не подходит ни под одну. Читатель видит её первой, и она ничего не говорит об оффере.
- Нет дизайн-системы. Фирменные цвета, шрифты и футер не хранятся в одном месте, и каждую кампанию оформляют вручную. Через пару месяцев не найти и 2 одинаково оформленных писем. Если вы рассылаете письма на нескольких языках, расхождения умножаются на каждую языковую версию.
Цена этих ошибок проявляется уже после открытия. Тема письма своё дело сделала, читатель письмо открыл. А потом закрыл без клика: письмо выглядело как все остальные во входящих, и взгляду не за что было зацепиться.
Как сделать письмо по-настоящему заметным?
Короткий ответ: лучший дизайн. Ответ подлиннее: настроить каждый блок письма так, чтобы оно выглядело уместным и личным для читателя и давало ему реальную причину кликнуть и сделать то, что нужно вам, будь то покупка, бронирование или возвращение в приложение.
И нет, это не значит, что разработчик или дизайнер должен переписывать HTML под каждое письмо.
Теперь пройдём по блокам: как улучшить каждую часть письма, чтобы получать больше кликов.
Лучшие практики дизайна email, блок за блоком
Вот письмо, которое мы разберём: осенняя распродажа в приложении беговой экипировки, 48 часов, скидка 25% на трейловые кроссовки, собранная в drag-and-drop редакторе Pushwoosh. Та же структура подойдёт и для Black Friday или Cyber Monday: меняются оффер и дедлайн, блоки остаются.
Письмо делится на 5 блоков. Вот что выделяет каждый из них и что он меняет для читателя.
| Блок | Как выделиться | Эффект |
|---|---|---|
| Хедер | Компактный хедер на единой бренд-системе: Brand book с Derive brand, сохранённый как синхронизируемый блок | Мгновенное узнавание, одинаковый вид в каждом письме |
| Hero | Визуал вокруг оффера через Generate with AI, заголовок остаётся живым текстом | Читатель понимает оффер с первого взгляда |
| Текст и CTA | Заголовок для 1 читателя с merge-тегами и Liquid и 1 стилизованная кнопка с живым текстом | Релевантность и 1 понятный следующий шаг |
| Контент | Товарные сетки из живого каталога, секции под аудитории с условиями показа, обратный отсчёт в Timer block | Больше кликов по товарам, нужный оффер каждому читателю, повод действовать сейчас |
| Футер | 1 футер, сохранённый как синхронизируемый блок и проверенный Smart check | Юридические данные корректны в каждом письме |
Ниже раскрываем каждый блок через его практики, сверху вниз: почему практика работает и как внедрить её в Pushwoosh.
Верх письма: хедер и hero
#1. Соберите хедер на основе бренд-системы
Почему это работает: Хедер открывает каждое письмо. Когда логотип, цвета и шрифты каждый раз одинаковые, читатель узнаёт отправителя с первого взгляда, а все блоки ниже наследуют тот же стиль.
Вместо: цветов, скопированных из прошлого письма, и нового layout хедера для каждой кампании → попробуйте: 1 бренд-систему и компактный хедер (логотип плюс 2–3 ссылки), одинаковый во всех письмах.
В Pushwoosh: Настройте Brand book (бренд-бук): логотип, цвета, шрифты, стили блоков по умолчанию и голос бренда. Заполнять его вручную не обязательно: Derive brand сканирует ваш сайт, PDF бренд-бука или логотип и предлагает палитру, шрифты и тон. Apply brand book styles перекрашивает любой шаблон, включая старые, не трогая контент.
Затем соберите хедер из логотипа и Menu block и сохраните его как переиспользуемый блок с включённой опцией Keep copies in sync: новая ссылка в меню сразу появится во всех письмах. Футер работает так же (см. практику 8).
#2. Стройте hero вокруг оффера, а не стокового фото
Почему это работает: Hero — это то, что читатель видит до того, как решит, листать ли дальше. Если на нём оффер, суть считывается за 1 взгляд.
Вместо: улыбающегося бегуна из фотостока → попробуйте: те самые трейловые кроссовки со скидкой, а поверх живым текстом «Скидка 25% на трейловые кроссовки. Только 48 часов».
В Pushwoosh: В Image block функция Generate with AI создаёт визуал по промпту («трейловые кроссовки на мокрой лесной тропе, тёплый осенний свет») в баннерном соотношении 16:9. Поставьте его фоном Card block, и заголовок с кнопкой останутся живым текстом: они видны, даже когда картинки заблокированы, и их могут прочитать скринридеры.
Тело письма: текст, CTA и контент
#3. Напишите персональный заголовок для каждого читателя
Почему это работает: Заголовок, в котором есть что-то знакомое читателю (его имя, размер, категория, которую он смотрел), воспринимается как сообщение лично ему, а не как массовая рассылка.
Вместо: «Посмотрите нашу осеннюю коллекцию» → попробуйте: «Анна, ваш размер трейловых кроссовок снова в наличии».
В Pushwoosh: Вставьте имя как merge-тег с панели Heading block и задайте значение по умолчанию, например «Бегун», для читателей без указанного имени. Если ваша база говорит на нескольких языках или живёт в разных странах, отдельную строку для каждого языка или страны задают Liquid-шаблоны: одно письмо, а заголовок у каждого читателя на его языке.
#4. Дайте каждому письму 1 CTA, который заметно выделяется
Почему это работает: Каждая лишняя кнопка распыляет внимание. 1 основной CTA контрастного цвета подсказывает читателю следующий шаг, а на телефоне ему нужна зона нажатия не меньше 44×44 pt, согласно Human Interface Guidelines Apple.
Вместо: 3 равноценных кнопок («Купить», «Подробнее», «Смотреть всё») или кнопки, вшитой в картинку → попробуйте: 1 кнопку с живым текстом «Подобрать мой размер» в акцентном цвете.
В Pushwoosh: Настройте Button block: сплошной или градиентный фон, скругление углов и отступы, а для мобильной версии задайте отступы побольше, чтобы кнопка оставалась размером под палец.
#5. Заполняйте товарные сетки живыми данными
Почему это работает: Распроданные позиции и устаревшие цены стоят кликов и доверия.
Вместо: 6 пар кроссовок, скопированных в шаблон в понедельник, 2 из которых к четвергу уже распроданы → попробуйте: сетку трейловых кроссовок на основе того, что смотрел каждый читатель, из живого каталога.
В Pushwoosh: Products block заполняет товары по правилу каталога, из брошенной корзины получателя или по стратегии рекомендаций: бестселлеры, снова в наличии, на основе просмотренного. Фид вашего Product catalog синхронизируется каждый час, поэтому цены и наличие остаются актуальными, и никому не нужно править письмо.
Для медиа и контентных приложений то же самое делает News block: он подтягивает статьи из ваших фидов и добавляет под каждым заголовком вступление, написанное AI.
#6. Дайте каждой аудитории свою секцию
Почему это работает: Лояльному участнику программы и клиенту, который не заказывал 3 месяца, нужны разные причины для клика.
Вместо: одного и того же «новая коллекция» для всех → попробуйте: 1 секцию с 3 вариантами: ранний доступ для участников программы лояльности, скидка 25% для всех, кто неактивен 90+ дней, и новинки для остальных.
В Pushwoosh: Добавьте к каждому варианту условие показа на основе Tags или Liquid-выражения и свяжите их цепочкой IF / ELSE IF / ELSE. 1 кампания на сборку и QA, 3 разных письма во входящих.
#7. Сделайте срочность конкретной с обратным отсчётом
Почему это работает: «Скоро» — понятие абстрактное. Видимый дедлайн превращает «может, потом» в решение, которое читателю нужно принять сейчас.
Вместо: «Распродажа скоро закончится!» в теме, заголовке и на кнопке → попробуйте: обратный отсчёт до реального окончания 48-часовой распродажи прямо рядом с CTA.
В Pushwoosh: Добавьте Timer block, задайте дату, время и часовой пояс окончания и оформите цифры в фирменных цветах. Если ваша аудитория разбросана по нескольким часовым поясам, отсчёт идёт до одного момента окончания: читатели в любом поясе видят одинаковый остаток времени, и дедлайн не нужно пересчитывать в тексте. Оффер погашается в офлайн-магазине? Barcode block выводит сканируемый код для каждого получателя.
Низ письма: футер
#8. Соберите футер один раз и синхронизируйте его во всех письмах
Почему это работает: В футере живут ссылка на отписку, почтовый адрес и юридический текст. Они должны быть верными в каждом письме.
Вместо: футера, который копируют из кампании в кампанию, пока не появятся 2 версии юридического текста → попробуйте: 1 футер, который обновляется в 1 месте.
В Pushwoosh: Соберите 1 футер в фирменных стилях со ссылкой на отписку, почтовым адресом и ссылками на соцсети и сохраните его как переиспользуемый блок с включённой опцией Keep copies in sync. Измените адрес 1 раз, и обновятся все письма с этим футером, включая уже запланированные к отправке.
Совет: Smart check отмечает маркетинговое письмо без почтового адреса в футере и предупреждает, когда письмо превышает лимит обрезки Gmail в ~102 KB: при обрезке футер пропадает первым.
Ускорьте дизайн писем с AI-инструментами
Заметное письмо не обязано занимать неделю. Эти AI-инструменты (доступны каждому пользователю Pushwoosh) сокращают время на производство и помогают улучшить дизайн.
AI-ассистент
Опишите письмо во вкладке AI tab, и ассистент соберёт для вас готовое письмо.
AI-картинки и alt-текст
Generate with AI создаёт визуал по текстовому промпту прямо в Image block. Generate alt with AI пишет alt-текст по самой картинке.
AI-темы и прехедеры
Когда контент собран, 1 клик готовит тему письма и прехедер на основе того, что действительно есть в письме.
Автоперевод
Недостающие языковые версии заполняет AI, и не нужно набирать каждую вручную. Для команд, которые пишут аудитории на нескольких языках сразу, это самая заметная экономия времени.
Brand book и синхронизируемые блоки
Стили, хедер и футер из практик 1 и 8 избавляют от необходимости заново собирать базу для каждой новой кампании.
Соберите своё 1-е заметное письмо
-
Начните с шаблона или промпта.
Layout из библиотеки email-шаблонов или первый черновик от AI-ассистента.
-
Примените свой бренд-бук.
Фирменные стили и синхронизируемый хедер: практика 1.
-
Пройдите письмо сверху вниз.
Hero, заголовок, CTA, товары, секции под аудитории, обратный отсчёт, футер.
-
Спроектируйте мобильную версию.
Не позволяйте десктопному layout просто сжаться на экране телефона. Переключитесь в мобильный вид, который полностью редактируется на реальной ширине телефона, и выберите Stack, Keep row или Reverse для каждого ряда Columns block. Задайте отдельные для мобильных размеры шрифтов, отступы и геометрию картинок, а для блоков, которые имеют смысл только на 1 экране, используйте Hide on mobile или Hide on desktop. Это адаптивный дизайн email без единого media query.
-
Протестируйте.
Запустите Smart check, затем отправьте тестовое письмо, максимум на 50 адресов.
-
Отправьте и изучите карту кликов.
Вкладка Click map рисует тепловую карту поверх превью письма: видно, какие элементы собрали клики и справился ли новый hero со своей задачей.
