Дизайн и верстка писем под ключ: как дизайн-система ускоряет производство в 3 раза и держится в Outlook

Типичная картина в компании с живой CRM: в Mindbox настроены сегменты, триггеры работают, контент-план расписан на месяц вперед. При этом каждая массовая рассылка проходит один и тот же путь: бриф, макет с нуля, три круга правок, верстка, тест, «а почему в Outlook так». В итоге на одно письмо уходит 5–10 рабочих дней. Канал отправляет меньше, чем мог бы, и реагирует на акции с опозданием.

Чаще всего проблема сидит в производстве. Дизайнер каждый раз заново рисует шапку и карточку товара, верстальщик заново чинит одни и те же баги, маркетолог ждет. Как устроена дизайн-система рассылок, где она экономит деньги и почему без нее письма продолжают ломаться, рассказывает Василина Бреусенко, CRM-маркетолог ClientCore. Отдельно она объясняет, что входит в дизайн и верстку писем под ключ.

Куда уходит неделя на одно письмо

Если разложить производство обычной рассылки по часам, картина почти везде одинаковая. Дизайн занимает 8–12 часов, из них половина уходит на элементы, которые уже рисовали в прошлом месяце. Верстка email-писем — еще 6–10 часов, потому что каждый макет немного отличается от предыдущего: другой отступ, нестандартная кнопка, текст поверх картинки. Сверху добавляются тестирование, правки и согласование.

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

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

Когда мы впервые смотрим на процесс клиента, я прошу показать последние десять писем. Почти всегда в них шесть-семь вариантов одной и той же кнопки и четыре версии шапки. Каждая из них когда-то верстальщику стоила пару часов, и каждая по-своему ломается в Outlook».

Василина Бреусенко

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

Из чего состоит модульная система писем

Дизайн-система рассылок — это набор готовых блоков и правил, по которым из них собирается любое письмо. Обычно в нее входят 20–35 модулей: шапка, баннер, сетки товаров на 1, 2 и 3 колонки, блок промокода, текстовый блок, отзыв, блок с таймером, подвал. Каждый модуль сверстан один раз, протестирован во всех клиентах и лежит в библиотеке в Mindbox или другом ESP.

Вторая часть — гайдлайн. Это документ, который отвечает на вопросы до того, как их задали: какая ширина у письма, какие шрифты и fallback-шрифты, какие отступы между блоками, как выглядит кнопка в обычном и в темном режиме, сколько символов влезает в заголовок баннера на мобильном. Хороший гайдлайн умещается в 10–15 страниц, и дизайнер реально им пользуется.

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

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

Outlook и темная тема: где ломается верстка email-писем

Десктопный Outlook для Windows до сих пор рендерит письма движком Word. Он не понимает часть CSS, игнорирует max-width, по-своему считает line-height, не умеет фоновые изображения без VML и превращает скругленные кнопки в прямоугольники. При масштабе экрана 120 dpi он еще и растягивает картинки без явно прописанных атрибутов width. В B2B-сегменте и у аудитории с корпоративной почтой доля Outlook легко доходит до 15–30%, поэтому на такую долю читателей закрыть глаза не получится.

Темная тема добавляет свой слой проблем. Apple Mail честно читает prefers-color-scheme и показывает ту палитру, которую вы задали. Gmail в мобильном приложении частично или полностью инвертирует цвета сам, не спрашивая верстальщика. Outlook.com управляется через отдельные селекторы. Mail.ru и Яндекс Почта тоже ведут себя по-разному, а для российской аудитории это основные клиенты. Классический результат: черный логотип на прозрачном PNG исчезает на темном фоне, белая подложка баннера превращается в серую плашку, а текст кнопки сливается с ее фоном.

Решается это на уровне модулей. Логотип получает светлую обводку или версию для темного режима, кнопки верстаются с VML-fallback для Outlook, цвета подбираются так, чтобы пережить автоматическую инверсию. Сделав это один раз в библиотеке, вы закрываете проблему для всех будущих писем.

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

Василина Бреусенко

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

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

Адаптив и тестирование: как убедиться, что письмо дойдет целым

Мобильные клиенты открывают 60–75% писем, и адаптив здесь давно перестал быть опцией. Остается выбрать, как его делать. Подход через media queries работает в Apple Mail и большинстве мобильных приложений, но Gmail в некоторых сценариях их игнорирует, особенно с неподдерживаемыми аккаунтами. Надежнее гибридная верстка: колонки сами перестраиваются за счет ширины и inline-block, а media queries только докручивают детали.

Отдельная тема — вес письма. Gmail обрезает сообщения тяжелее 102 КБ кода и прячет остаток под ссылкой «Показать полностью». Вместе с остатком прячется и пиксель открытия, поэтому статистика начинает врать. Модули в дизайн-системе изначально пишутся компактно, без дублирующих стилей, чтобы даже длинное письмо на 15 блоков укладывалось в лимит.

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

Экономика: сколько стоит одно письмо до и после

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

До внедрения системы:

• дизайн с нуля — 10 часов
• верстка — 8 часов
• тестирование и исправление багов — 4 часа
• правки после согласования — 3 часа

Итого около 25 часов, то есть примерно 62 500 рублей на одно письмо. При восьми массовых рассылках в месяц это 500 тысяч рублей только на производство, без учета триггеров и сегментированных версий.

После внедрения дизайн-системы:

• сборка макета из модулей и адаптация баннера — 3 часа
• сборка в ESP из готовых блоков — 2 часа
• проверка по чек-листу — 1 час
• правки — 1 час

Около 7–8 часов, или 17 500–20 000 рублей. Разница в 3–3,5 раза. Внедрение системы стоит денег и времени: аудит, проектирование модулей, верстка, тестирование, гайдлайн. Обычно это 4–8 недель работы. Но при объеме от шести-восьми писем в месяц вложения окупаются за 2–4 месяца только на экономии часов.

Освободившиеся часы почти никто не забирает в экономию бюджета. Их тратят на то, что раньше было некогда делать: две-три версии письма под разные сегменты, A/B-тесты баннеров, отдельные рассылки для спящих. Именно отсюда потом приходит рост выручки, а сокращение затрат на производство идет приятным бонусом».

Василина Бреусенко

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

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

Как устроена работа под ключ

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

Первый этап — аудит. Берем 20–30 последних писем, разбираем, какие блоки повторяются, где ломается отображение, сколько времени уходит на каждое письмо. На выходе получается карта: какие модули нужны, какие можно объединить, какие вообще не используются.

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

Третий этап — верстка и тестирование модулей, загрузка в ESP. Если вы работаете в Mindbox, модули настраиваются как блоки конструктора с редактируемыми полями: маркетолог меняет текст, картинку и ссылку, не трогая код.

Четвертый этап — перенос действующих писем, включая триггерные цепочки, на новые модули и обучение команды. Перенос — тонкое место: в триггерах живет персонализация, динамические товарные блоки, условия показа. При переезде все это должно продолжать работать. Для Movavi мы перенесли на новый шаблон 28 писем без потери логики — такой объем обычно и приходится на зрелую CRM-программу.

Дальше система развивается вместе с почтовыми клиентами. Раз в квартал стоит пересматривать библиотеку: какие модули не используются, каких не хватает, не появились ли новые особенности рендеринга. Новый Outlook для Windows, например, переходит на веб-движок, и часть старых хаков со временем станет лишней.