И почему больше не надо «точно как в Figma»
Помните работу верстальщика 5 лет назад? В Outlook вечно все разваливалось. Gmail «откусывал» часть макета. Мы тестировали письма в «Рамблер-почте»! И бегали к соседу за айфоном, чтобы посмотреть: а что там, на айфоне великом? Ну и как же не забыть об обязательной отрисовке мобильной версии…
Реальность подкинула новую задачу: письмо должно не только прилично выглядеть, но и в принципе показаться у российского пользователя.
Ведь теперь мы столкнулись с новыми вызовами: картинки могут лежать на домене, который у части базы не загружается. Сервис, в котором несколько лет собирали письма, может стать недоступным или неудобным для оплаты. Большая часть российской аудитории читает рассылки в Яндексе и Mail, но Gmail при этом никуда не делся. Сегодня недостаточно сверстать письмо «точно как в Figma». Нужно заранее понимать, что в нем может сломаться и что останется после этого.
В этой статье вместе с экспертами конструктора рассылок EmailMaker рассказываем, что повлияло на вёрстку email за последние пять лет, куда это нас привело и приведет в будущем.
Основа была примерно та же: контейнер шириной около 600 пикселей, логотип сверху, большой баннер, несколько текстовых блоков, карточки товаров и футер. Сам код собирали на таблицах, а стили по возможности встраивали внутрь элементов.
Первый экран часто представлял собой одну большую картинку. В ней уже были заголовок, цена, скидка, промокод, дата окончания акции и нарисованная кнопка. Дизайнеру удобно: ничего не переносится, фирменный шрифт остается на месте, композиция выглядит ровно как в макете:
На мобильном баннер уменьшался вместе с текстом. У пользователя с отключенными изображениями вместо него появлялся пустой прямоугольник. Чтобы исправить одну цифру, приходилось снова идти к дизайнеру. Но выглядело красиво.
Да и вообще, письмо старались сделать похожим на маленький сайт. На деле же пользователь видел множество равноправных блоков и не факт, что всегда понимал, чего от него хотят — купить? Пройти опрос? Перейти на сайт?
В email все всегда шло немного не так. Письмо могло отлично выглядеть в Gmail и развалиться в Outlook. Один мобильный клиент понимал медиазапросы, другой делал вид, что их не существует. И мы старались исправить каждый случай и добиться одного и того же результата вообще везде. Но, честно говоря, это не очень-то реалистично.
Почтовые клиенты все еще используют разные механизмы обработки HTML. Они могут вырезать часть стилей, менять цвета, кешировать изображения, добавлять собственную разметку и по-разному перестраивать письмо на мобильном экране. К этому добавляются системные настройки пользователя, корпоративные фильтры и нюансы с доступом в интернет и качеством этого самого доступа.
В хорошем случае во входящих мы увидим весь дизайн. При этом в какой-нибудь корпоративной почте слетят тени, круглые углы станут прямыми, красивый шрифт заменится на системный, а товары рассыпятся по всему телу письма. И да, это надо учитывать — как тогда, так и сейчас.
Но наша новая задача — сделать так, чтобы пользователь понял базовый минимум: кто ему пишет, зачем пишет и куда надо нажать. Это называется предсказуемой деградацией. Мы больше не пытаемся заставить каждый почтовик вести себя одинаково, а заранее решаем, чем можно пренебречь.
Тенью — можно.
Декоративным фоном — можно.
Ценой и кнопкой — ну уж нет.
В России за последние пять лет произошли и инфраструктурные, и рыночные изменения — конечно, они не могли обойти стороной и email-маркетинг. Вот, что стало иначе к 2026-му.
8 главных трендов email-маркетинга в 2026 году: что важно прямо сейчас
Приоритетные для российского рынка Яндекс Почту и Почту Mail теперь нужно учитывать не после верстки, а во время проектирования шаблона — и при этом смотреть не только веб-версии. Одно и то же письмо может по-разному вести себя в браузере и мобильном приложении.
Gmail при этом из России не ушел. У людей остались адреса, международные аккаунты и привычные приложения. Кто-то в целом предпочитает именно этот сервис, несмотря на все преграды вроде запрета регистрации с иностранными почтами в российском сегменте интернета.
В B2B к почтовикам, поведение которых надо особенно учитывать при верстке, добавляются Outlook и корпоративные почтовые системы, которых у нас в России теперь много — новых и разных.
В результате потерялась универсальная тестовая матрица. Было очень удобно работать с сервисами вроде Email On Acid, но теперь за них попробуй заплати. Физическое лицо еще может извернуться, но когда ты — большая организация, выхода нет: строй свою тестовую среду.
Что делаем? Смотрим на собственную базу: какие домены в ней преобладают, откуда происходят открытия и где чаще появляются жалобы. Даже для B2B следуем правилу: не проверили Яндекс Почту и Почту Mail — значит, рассылку не проверили. Потому что и там, и там у нас живет в том числе и корпоративная почта.
Представим обычную ситуацию: компания несколько лет собирала рассылки в одном и том же редакторе. Изображения автоматически загружались на сервер, ссылки проходили через его домен, шаблоны хранились там же. Потом понадобилось сменить платформу.
И тут — привет! Часть шаблонов нельзя нормально выгрузить, изображения привязаны к старому аккаунту, исходников у команды нет, а доступ оформлен на сотрудника, который давно уволился. А ведь смена сервиса рассылок не всегда происходит по собственной инициативе — мы больше не можем считать гарантированным постоянный доступ к любой зарубежной платформе.
Отдельная история — персональные данные, которые могут использоваться в рассылках. Например, картинка товара сама по себе может не содержать никаких персональных данных. А вот уникальная ссылка, в которую зашит идентификатор пользователя, — уже другой разговор.
Что нужно знать о штрафах за обработку данных, если занимаетесь email- и CRM-маркетингом
Что делаем? Вопросы вроде «Где будут лежать картинки?» или «Откуда мы берем и где храним данные пользователей?» теперь придется задавать до начала верстки. Команда должна хотя бы знать, от каких внешних систем зависит письмо и что делать, если одна из них отвалится.
Нет.
По факту, это сервис электронных заказных писем. Он используется для юридически значимых сообщений: например, судебных извещений, постановлений и других официальных документов. Электронное письмо в таком сервисе имеет юридическую значимость. Если электронная доставка невозможна, письмо могут распечатать и доставить обычным способом.
Это не обычный почтовый ящик и не дополнительный канал для акции «Только три дня скидка 20%».
Что делаем? Маркетинговая рассылка, письмо о заказе и юридически значимое отправление — разные виды коммуникации. У них разные задачи и требования к доставке. Поэтому верстать промо-письмо под Госпочту не нужно. Но знать о ней полезно: все чаще компаниям приходится сначала определить тип сообщения и только потом выбирать, куда и как его отправлять.
Изменения на рынке и в инфраструктуре несомненно ведут к изменениям в процессах. Вот самые значимые из них.
С запросом «нужно как в Figma» мы часто сталкиваемся при работе с клиентами. Вот только реальное письмо может открыться на экране шириной 320 пикселей. Потом пользователь увеличит системный шрифт — и все развалится.
Так что мы просто вынуждены в макете письма описывать не только внешний вид, но и поведение. Например, как будет выглядеть hero-баннер без фоновой картинки (я в таких случаях подкладываю фон).
Максимальное совпадение с макетом по-прежнему нужно, но над ним точно не требуется сидеть больше суток, если это не мастер-шаблон. А то так вся рассылка потеряет актуальность.
Проверка письма в почтовиках может радикально повлиять на сам дизайн.
Допустим, макет построен на карточках с очень светлым фоном. В Gmail они выглядят хорошо, потому что отделяются от белого полотна легкой тенью. Почта Mail тень не показывает — и карточки сливаются в один длинный блок. Значит, еще на этапе дизайна нужна более надежная граница между блоками: расстояние, рамка или контрастный фон.
Кстати, у Mail.ru есть отдельная документация по поддерживаемым CSS-свойствам, техническим требованиям и темной теме.
Ну и тестировать абсолютно каждый раз нужно полностью: отправить письмо, посмотреть его на реальном устройстве и пройти основной сценарий: прочитать, нажать, открыть целевую страницу.
У меня недавно был случай: месяц я отправляла один и тот же макет на базу клиента (по кусочкам) в рамках работы по реактивации. И вот перед очередной отправкой делаю тест — а у меня табличка в мобильном приложении развалилась и выехала за рамки рассылки. Пришлось лезть в код и переписывать. Если бы я дотошно не тестировала все-все перед отправкой, никогда бы этого не узнала.
Вообще довольно тревожная штука. Тебе ДО верстки рассылки надо убедиться, что каждое изображение на прозрачном фоне смотрится хорошо. А если вдруг ты используешь не прозрачный фон — обязательно проверить, что твои товары с твоей цветной подложкой в этой темной теме нормально сочетаются.
Почта Mail автоматически перекрашивает письма в темной теме и позволяет частично управлять цветами с помощью prefers-color-scheme. Но абсолютного контроля это не дает. Как быть-то?
Белому логотипу может понадобиться подложка или контур. Важный текст не стоит помещать внутрь картинки. Изображение лучше не соединять с HTML-фоном.
Подробнее о работе с тёмной темой (с примерами кода) — читайте в нашем совместном гайде с EmailMaker.
Большой баннер все еще очень любят заказчики — и часто он правда нужен. Но он точно не должен выполнять работу всего письма.
У изображения остается своя нормальная работа: показать продукт, задать настроение, поддержать идею. Потом текст объясняет предложение. Кнопка ведет дальше.
Очень простой тест: отключите картинки и откройте письмо еще раз. Если там остались только «Здравствуйте» и «Отписаться», лучше с письмом еще повозиться.
Однажды становится понятно, что ты уже несколько месяцев заново собираешь одну и ту же кнопку, только иногда меняешь в ней цвет. И так постепенно отдельные шаблоны уступают место системам блоков.
Это правда удобно: каждый раз не нужно заново решать, какого размера должна быть эта кнопка, как карточка перестраивается на мобильном и что случится с заголовком в четыре строки.
Мастер-шаблон нужен, потому что работающий блок выгоднее использовать повторно, чем каждый раз тратить время на его пересборку.
Яндекс Рассылки, кстати, позволяют сохранять готовые письма как шаблоны и брать их за основу новых отправок. Правда, внутри одной организации действует ограничение на количество сохраненных шаблонов, поэтому полноценную библиотеку компонентов компаниям все равно придется продумывать отдельно. Но это можно сделать в нашем редакторе EmailMaker — и вся система блоков поместится, и простор для креатива останется, и сервис для тестирования в почтовиках уже включен в тариф.
Все проблемы начинаются, когда нужно переехать. Например, блоки работают только внутри редактора (это вообще классика). В новом редакторе таскать блоки мышкой не получится — надо писать код. И опять сидишь, переделываешь все блоки.
Шаблон реально принадлежит компании, когда его можно забрать, сохранить, открыть, изменить и отправить через другую систему. Получается, у нас в руках должен быть контроль буквально над всем: HTML, картинками, доменами, ссылками, доступами, библиотекой блоков и так далее.
Давайте пофантазируем. Уже сейчас у нас появилось много шикарных новых инструментов — те же блочные редакторы и нейросети. Но работа письма зависит от почтового клиента. Это третья сторона, мы не можем сказать Outlook: «Работай вот так». Поэтому в первую очередь я жду, что мы продолжим использовать таблицы, проверять письма на всех ящиках и объяснять, почему скругленные углы у кнопки стали прямыми в корпоративной почте.
В то же время мне кажется, что дизайнеры будут реже рисовать один идеальный кадр и чаще показывать, как блок ведет себя на мобильном, без изображения и в темной теме. Или это будут не дизайнеры, а сразу CRM-маркетологи — потому что в блочном редакторе можно собрать действительно очень красивый макет, специально рисовать его для этого не обязательно.
Компании начнут внимательнее относиться к исходникам, доменам и внешним сервисам.
Мастер-шаблоны, думаю, станут важнее отдельных красивых макетов. Регулярные рассылки будут собираться из проверенных компонентов, а уникальная верстка останется для тех случаев, где она необходима.
Что точно останется неизменным — код все равно придется отправлять в реальные почтовики.
Есть надежда, что мы будем меньше времени тратить на ручную сборку одинаковых карточек и больше — на архитектуру шаблона, тесты и запасные сценарии. Но поживем — увидим.
При покупке или продлении тарифа «Стандарт» в Unisender добавляем крутые бонусы:
Как сделать дизайн-проект квартиры самому: с чего начать и что учесть
Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.
