Дизайн и вёрстка email-рассылок: как оформление влияет на клики и продажи

Знакомая ситуация: дизайнер рисует письмо уровня лендинга — градиенты, фирменная типографика, баннер во весь экран. В Figma все в восторге. Письмо уходит базе, и начинается: Gmail обрезает его на середине оффера, Outlook разваливает сетку, а у части подписчиков картинки отключены по умолчанию — они видят серые прямоугольники и кнопку «показать изображения». CTR ниже обычного, продажи не сдвинулись, команда ищет виноватых.

Причина почти всегда в среде. Дизайн email рассылок имеет жесткую валюту: клики, конверсия, выручка на отправку. Почтовые клиенты живут по собственным законам — десктопный Outlook рендерит письма движком Word, Gmail режет HTML тяжелее 102 КБ, а больше половины открытий случается на телефоне, где письму дают секунды три. Как работать с этими ограничениями и превращать оформление в деньги, рассказывает Егор Череватенко, CRM-маркетолог ClientCore: он пересобирает шаблоны и триггерные цепочки для ритейла и e-commerce.

Когда дизайн письма мешает продажам

Дизайнер без email-бэкграунда мыслит постером. Весь смысл запекается в красивую картинку: оффер, условия, даже кнопка — нарисованные. Такое письмо проигрывает по всем фронтам. У части подписчиков изображения отключены, и человек видит пустой экран. Текст на баннере мельчает на мобильном до нечитаемого. А спам-фильтры относятся к письмам-однокартинкам настороженно: именно так спамеры прячут текст от фильтров.

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

Трижды за последний год мы пересобирали шаблоны, где весь оффер был запечен в картинку. У таких писем кликабельность стабильно проседала: у части базы почтовик отключает изображения, и человек видит пустоту. Меняли баннер на живой текст с нормальной кнопкой — CTR рос без единой правки контента. Люди кликают то, что реально видят на экране».

Егор Череватенко

CRM-маркетолог, ClientCore

Первый экран: три секунды на решение

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

После открытия у письма есть 300–350 пикселей первого экрана. Именно здесь подписчик решает, тратить ли время дальше. На этом экране должны помещаться понятный оффер живым текстом и одна кнопка. Одна — потому что каждый дополнительный вариант снижает вероятность клика по любому из них.

Отдельно про текст на кнопке. «Подробнее» и «Перейти» — пустые слова. Работает конкретика: «Забрать промокод», «Выбрать размер», «Вернуться в корзину». Кнопка — это обещание того, что случится после клика.

Вёрстка, от которой зависят доставляемость и клики

Gmail обрезает письма, чей HTML-код тяжелее примерно 102 КБ. Ссылка «показать полностью» выглядит мелочью, пока не посчитаешь последствия. Под нож обычно уходят футер со ссылкой отписки и трекинг-пиксель. Первое приводит к росту жалоб на спам: человек, который не может отписаться, жмет «Это спам». Второе делает аналитику слепой — открытия части базы просто не считаются.

Вторая точка боли — десктопный Outlook. Он рендерит письма движком Word, поэтому не понимает flexbox, позиционирование и половину современного CSS. Отсюда базовые правила email-вёрстки: таблицы вместо div-сеток, инлайн-стили, ширина макета 600–640 px, alt-текст у каждой картинки, сжатие изображений. Красивый код из мира лендингов здесь ломается.

Мы это чинили на практике: у турагентства Funsun письма разъезжались именно в Outlook — исправили отображение и обновили шаблоны.

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

Егор Череватенко

CRM-маркетолог, ClientCore

Мобильная версия: где письма теряют клики

По нашим e-commerce проектам на смартфоны приходится 55–70% открытий. Письмо на телефоне смотрят одной рукой, часто на ходу. Поэтому требования простые: одна колонка, базовый шрифт 14–16 px, межстрочный интервал с запасом. Кнопка — высотой 44–48 px и желательно во всю ширину колонки, чтобы попасть большим пальцем без прицеливания. Ссылки в тексте — с отступами: два кликабельных элемента вплотную превращаются в лотерею.

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

Шаблон письма в Mindbox: как модульность ускоряет сборку

В Mindbox два пути: блочный редактор и собственный HTML. Для mid-market рабочая схема — гибрид. Верстальщик один раз собирает мастер-шаблон из модулей: шапка, офферный блок, товарная сетка, текстовый блок, промокод, кнопка, подвал. Дальше маркетолог компонует письма из готовых блоков сам, без привлечения верстальщика и без риска разнобоя.

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

Пример из практики: у FINNTRAIL каждое письмо готовили по полторы недели, и получала его вся база разом, без единого сегмента. Мы собрали новый шаблон и помогли команде сделать ставку на скорость — письмо теперь собирается за 2 часа, а выручка email-канала выросла на 15%.

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

Егор Череватенко

CRM-маркетолог, ClientCore

Триггерные email рассылки: лаконичный дизайн возвращает больше заказов

Триггерные email рассылки читают в другом режиме. Человек только что был на сайте: смотрел товар, добавлял в корзину, оформлял заказ. Письмо ловит его в теплом состоянии, и задача оформления — вернуть на сайт за пару секунд. Продажа уже почти случилась, убеждать с нуля не нужно.

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

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

Как измерить вклад дизайна в выручку

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

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