Маркетолог собирает письмо двадцать минут: шапка, баннер, три товарные карточки, кнопка. Открывает на телефоне: текст наезжает на кнопку, баннер обрезан, кнопка проваливается под картинку. Конструктор писем для рассылки обещал готовую вёрстку без кода, а на деле вёрстка держится только в браузере редактора.
Так выглядит типичная причина, по которой компании держат в штате верстальщика или платят агентству за каждое письмо. Блочный drag-n-drop редактор снимает часть работы, но не всю работу целиком: разница между сильным и слабым конструктором видна в деталях, как он держит адаптивность, что происходит с кодом при экспорте, насколько гибко можно менять готовый блок без разрушения сетки. Ошибка в вёрстке письма стоит дороже, чем кажется: письмо с разваленной кнопкой на телефоне теряет клики ещё до того, как кто-то заметит проблему и внесёт правку.
Что такое конструктор писем для рассылки и чем он отличается от сервиса рассылок
Сервис рассылок отвечает за отправку: базу подписчиков, тарифы, статистику открытий, настройки SPF и DKIM. Конструктор писем, модуль внутри сервиса или отдельный инструмент, собирает само письмо: шапку, баннер, текстовые блоки, кнопку, подвал. Раньше это делал верстальщик вручную в HTML-таблицах, теперь блочный редактор собирает тот же код из готовых модулей через drag-n-drop.
Логика простая: вы тащите блок (текст, картинка, кнопка, разделитель, соцсети) на холст, меняете текст и цвет через панель справа, а редактор сам генерирует HTML-код с таблицами и инлайн-стилями. Таблицы нужны потому, что почтовые клиенты до сих пор по-разному понимают современный CSS: табличная вёрстка держит структуру письма там, где флексбокс или грид работают нестабильно.
Платформы для рассылок обычно сравнивают по тарифам, лимитам подписчиков и соответствию закону о персональных данных: этому посвящена статья о том, как выбрать платформу для email-рассылок по функциям и закону. Конструктор письма решает другую задачу: собрать письмо, которое одинаково открывается в Gmail, Outlook и на экране смартфона.
Блочный редактор против HTML-шаблона: когда что нужно
Блочный редактор, конструктор внутри сервиса рассылок или отдельный веб-инструмент, встроен в десятки платформ. Вы работаете с готовыми модулями без кода, а на выходе получаете HTML-файл, который можно перенести в любой сервис, поддерживающий загрузку собственной вёрстки.
HTML-шаблон, готовый файл, который верстальщик или агентство собрали один раз под бренд: фирменные отступы, шрифты, сетка блоков под конкретные типы писем (промо, дайджест, транзакционное). Такой шаблон загружается в сервис рассылок как есть, а маркетолог меняет только текст и картинки в заранее заданных зонах через редактор сервиса.
Для небольшой команды без отдельного маркетолога блочный конструктор снимает зависимость от подрядчика: собрать и отправить письмо может любой сотрудник за один рабочий день. В компании с большим объёмом рассылок такая гибкость оборачивается риском: без единого шаблона каждое письмо выглядит немного иначе, и бренд теряет узнаваемость из письма в письмо.
Разница ощущается на объёме задач. Если писем мало и они разные по структуре, блочный конструктор быстрее: собрали, отправили. Если писем много и структура повторяется (еженедельный дайджест, карточки товаров, транзакционные письма), готовый HTML-шаблон с фиксированными зонами редактирования экономит больше времени и держит бренд стабильнее, чем письмо, пересобранное с нуля каждый раз.
Промежуточный вариант: собрать каркас письма один раз в блочном редакторе, сохранить как шаблон внутри сервиса и дальше клонировать под каждую рассылку. Так получают скорость конструктора и повторяемость шаблона одновременно.
Адаптивная вёрстка без кода: как конструкторы подстраивают письмо под телефон
Большинство подписчиков открывают письма с телефона, и адаптивность конструктора решает, развалится вёрстка или нет. В блочном редакторе за это отвечают два механизма: гибкая ширина блоков, когда колонки сжимаются и складываются друг под друга на узком экране, и медиа-запросы, которые редактор прописывает в коде автоматически, без участия пользователя.
Стандартная ширина письма, на которую ориентируется большинство конструкторов, 600 пикселей. Такой размер укладывается в окно предпросмотра почти любого клиента без горизонтального скролла, а на мобильном экране колонки под эту ширину складываются в одну без искажения пропорций.
Проверить адаптивность по картинке в редакторе недостаточно: часть почтовых клиентов, особенно Outlook на десктопе, рендерит письмо собственным движком и игнорирует часть CSS, который хорошо выглядит в превью конструктора. Поэтому вторая проверка, помимо встроенного предпросмотра, отправка тестового письма на реальные почтовые ящики (Gmail, Mail.ru, Яндекс, Outlook) перед запуском на всю базу.
Что сравнивать при выборе конструктора: таблица критериев
Сравнение удобно делать не по маркетинговым описаниям на сайте конструктора, а по тестовому письму: собрать одно и то же письмо в двух-трёх инструментах и сверить результат по списку ниже.
| Критерий | На что обратить внимание |
|---|---|
| Экспорт кода | Можно ли скачать чистый HTML и перенести письмо в другой сервис рассылок без привязки к одной платформе |
| Библиотека блоков | Готовые модули под карточки товаров, таймеры акций, соцсети, отзывы без написания текста с нуля |
| Вёрстка под Outlook | Автоматическая генерация условных комментариев для движка Word, на котором рендерит десктопный Outlook |
| Совместная работа | Несколько человек правят одно письмо одновременно, сохраняется история версий |
| Брендовые стили | Можно зафиксировать цвета, шрифты и отступы бренда, чтобы письмо не собиралось с нуля каждый раз |
| Предпросмотр по клиентам | Встроенная проверка, как письмо выглядит в Gmail, Outlook и на телефоне, без отправки тестового письма |
Экспорт кода, самый недооценённый пункт в этом списке. Конструктор, который держит письмо внутри закрытого формата, привязывает вас к одному сервису рассылок: при смене платформы придётся верстать заново. Открытый экспорт в HTML снимает эту зависимость.
Готовые блоки и шаблоны: экономия времени или шаблонность
Библиотека готовых блоков, товарная карточка, таймер акции, блок с отзывами, подборка статей, закрывает большинство типовых писем за несколько минут. Для интернет-магазина с еженедельной подборкой товаров это главная причина выбрать конструктор с широкой библиотекой, а не верстать карточки руками.
Минус заметен там, где письмо должно выделяться: готовые блоки у популярных конструкторов похожи друг на друга, и подписчик, который получает письма от десяти брендов, видит одну и ту же структуру с разными логотипами. Решение не в отказе от блоков, а в настройке: поменять отступы, пропорции колонок, добавить фирменный элемент, иконку или разделитель нестандартной формы, чтобы письмо не читалось как шаблон из коробки.
Проверить готовый блок стоит на реальном тексте и реальной картинке бренда, а не на демо-контенте из конструктора: пропорции и отступы, которые смотрятся аккуратно на модельном фото, часто разваливаются на длинном названии товара или вертикальном изображении.
Outlook, тёмная тема и другие ловушки вёрстки без кода
Десктопный Outlook рендерит письма движком Word, а не браузерным движком, как остальные клиенты. Отсюда ограничения, о которых блочный редактор знает, но не всегда предупреждает: фоновые изображения на всю ширину блока работают нестабильно, скруглённые углы кнопок игнорируются, отступы через margin иногда съедаются. Сильный конструктор решает это автоматически через условные комментарии для Outlook, слабый оставляет письмо ломаться молча.
Тёмная тема почты, вторая частая ловушка. Некоторые клиенты инвертируют цвета автоматически, и белый логотип на прозрачном фоне превращается в чёрный на чёрном. Проверить это можно только явным образом: переключить тёмную тему на телефоне и открыть тестовое письмо, а не полагаться на светлый предпросмотр редактора.
У конструктора отдельная роль в вопросе доставляемости: он формирует HTML-код письма, а провайдер оценивает именно этот код вместе с репутацией домена. Если письма стабильно уходят в спам, причина чаще в репутации и заголовках, чем в вёрстке, подробный разбор в статье почему письма попадают в спам и как починить доставляемость.
Соотношение текста и картинок в письме тоже стоит держать в уме: письмо, собранное целиком из изображений без текста, выглядит эффектно в редакторе, но часть клиентов блокирует загрузку картинок по умолчанию, и получатель видит пустое письмо до клика «показать изображения».
Типичные ошибки при работе в конструкторе письма
- Вставляют картинки как base64-код напрямую в письмо вместо ссылки на хостинг: несколько таких картинок раздувают HTML и провоцируют обрезку письма в Gmail, который режет письма тяжелее 102 КБ исходного кода и показывает ссылку «Посмотреть всё сообщение» вместо текста целиком.
- Не прописывают alt-текст у изображений: если картинки не загрузились, частая настройка почтовых клиентов по умолчанию, письмо превращается в пустые прямоугольники без смысла.
- Делают кнопку картинкой, а не блоком кнопки конструктора: такая кнопка пропадает вместе с остальными изображениями при отключённой загрузке картинок.
- Копируют текст из Word или Google Docs прямо в блок конструктора: вместе с текстом переносятся скрытые стили, которые ломают вёрстку в отдельных клиентах.
- Не проверяют письмо на реальных устройствах перед массовой отправкой, ограничиваясь предпросмотром внутри редактора.
Частые вопросы
Нужен ли верстальщик, если есть блочный конструктор?
Для стандартных писем, анонс, дайджест, подборка товаров, блочный конструктор закрывает задачу полностью. Верстальщик нужен точечно: сложная адаптивная сетка, нестандартная анимация, письмо под крупную акцию с высокой ценой ошибки. Большинство компаний держат конструктор для текущих писем и привлекают верстальщика или агентство под одно-два сложных письма в месяц.
Чем конструктор писем отличается от сервиса рассылок?
Сервис рассылок отправляет письма: ведёт базу подписчиков, считает статистику, настраивает домен для доставляемости. Конструктор собирает само письмо: шапку, блоки текста, кнопку. Почти все крупные сервисы рассылок включают встроенный блочный конструктор, но часть маркетологов верстает письмо в отдельном инструменте и импортирует готовый HTML.
Можно ли перенести шаблон из одного конструктора в другой?
Да, если конструктор позволяет экспортировать чистый HTML-код: такой файл загружается в любой сервис рассылок с опцией «своя вёрстка». Шаблоны, собранные в закрытом формате конструктора без экспорта кода, переносятся только вручную, блок за блоком, в новом редакторе. Перед переносом стоит сверить письмо в новом сервисе на тестовом адресе: при импорте код иногда меняется автоматически.
Почему письмо выглядит по-разному в Gmail и Outlook?
Gmail и большинство веб-клиентов рендерят письмо браузерным движком, а десктопный Outlook, собственным движком на основе Word, который по-другому обрабатывает фоновые изображения, отступы и скругления. Разница в отображении, норма для email-вёрстки, а не признак сломанного письма: проверка в нескольких клиентах перед отправкой снимает риск.
Что делать, если конструктор предупреждает о размере письма?
Проверить, не вставлены ли картинки как base64-код вместо ссылок, и убрать лишнюю вложенность блоков. Gmail обрезает письма тяжелее 102 КБ исходного HTML-кода и показывает ссылку «Посмотреть всё сообщение» вместо текста целиком, из-за чего подпись и ссылка отписки могут не показаться получателю сразу.
С чего начать
Выбор конструктора редко занимает один день, но порядок действий, если вы начинаете с нуля или меняете текущий инструмент, остаётся одинаковым.
- Посмотрите в статистике рассылок, в каких почтовых клиентах читают подписчики: это определит, на какие ограничения, Outlook, тёмная тема, мобильный экран, закладываться в первую очередь.
- Соберите одно тестовое письмо в двух-трёх конструкторах с открытым экспортом HTML и сравните результат на реальных ящиках, а не только в предпросмотре редактора.
- Зафиксируйте библиотеку брендовых блоков, шапку, кнопку, подвал с нужными ссылками, в выбранном конструкторе, чтобы следующие письма собирались из готовых частей, а не с нуля.
- Настройте регулярную проверку размера письма и отображения в Outlook перед каждой крупной рассылкой.
Если разбираться самостоятельно с вёрсткой, адаптивностью и тестированием писем в разных клиентах не хочется, настройку конструктора, шаблоны и регулярные рассылки берёт на себя агентство: услуга email-рассылок Neurounit. О том, как события и сегменты превращаются в цепочки писем после того, как шаблон готов, рассказано в статье про события, сегменты и цепочки писем.
