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

> Письмо собирается неделю, а в Outlook кнопка все равно съезжает? Считаем, сколько стоит одна рассылка и как модульная система снижает эту цену втрое.

**Рубрика:** Статьи  
**Автор:** Василина Бреусенко, CRM-маркетолог, ClientCore  
**Дата:** 2026-11-14

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

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

> **Читайте также:** [Массовые рассылки под ключ: как превратить регулярные кампании в управляемый источник выручки](https://clientcore.ru/blog/articles/massovye-rassylki-pod-klyuch-kak-prevratit-regulyarnye-kampanii-v-upravlyaemyy-istochnik-vyruchki)

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

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

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

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

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

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

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

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

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

**Норма**

- у каждого модуля есть описание: для чего он, какие у него варианты, какие ограничения по тексту и картинкам
- новые блоки добавляются в библиотеку через ревью и тестирование
- 80–90% писем собираются из существующих модулей без верстки с нуля

**Red flag**

- «шаблон» — это последнее удачное письмо, которое копируют и правят руками
- дизайнер не знает, какие блоки уже есть в ESP, и рисует похожие
- в библиотеке лежат пять почти одинаковых баннеров, и никто не помнит, какой из них рабочий

Мы проверяли эту схему на практике. В FINNTRAIL каждое письмо готовили около полутора недель. После того как собрали новый шаблон на модулях, письмо стало собираться за 2 часа, а выручка email-канала выросла на 15% — команда смогла чаще отправлять сегментированные рассылки ([кейс](https://clientcore.ru/blog/articles/keis-finntrail-rost-vyruchki-email)).

## 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 и обновили шаблоны, чтобы проблема не возвращалась с каждым новым письмом ([кейс](https://clientcore.ru/blog/articles/funsun-ispravlenie-otobrazheniya-email-rassylok-v-outlook)).

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

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

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

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

**Норма**

- есть матрица тестирования: Outlook 2016–2021 и новый Outlook, Gmail веб и мобильный, Apple Mail, Mail.ru, Яндекс Почта, в светлом и темном режиме
- каждый модуль проходит матрицу до того, как попадает в библиотеку
- финальная проверка письма укладывается в 30–40 минут по чек-листу

**Red flag**

- тестирование — это «отправили себе и коллеге, на айфоне норм»
- о проблемах в Outlook узнают из ответов клиентов или от отдела продаж
- вес письма никто не контролирует, а в отчетах подозрительно низкий open rate у части базы

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

Посчитаем на условном примере. Возьмем среднюю ставку в 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, например, переходит на веб-движок, и часть старых хаков со временем станет лишней.

> **Читайте также:** [Ведение SMS-рассылок под ключ: что входит в услугу и как не сжечь самый дорогой канал](https://clientcore.ru/blog/articles/vedenie-sms-rassylok-pod-klyuch-chto-vhodit-v-uslugu-i-kak-ne-szhech-samyy-dorogoy-kanal)

---

[Открыть статью на сайте](https://clientcore.ru/blog/articles/dizayn-i-verstka-pisem-pod-klyuch-kak-dizayn-sistema-uskoryaet-proizvodstvo-v-3-raza-i-derzhitsya-v-outlook)