Как принять дизайн и вёрстку email-рассылки:
чек-лист для заказчика

В макете всё прекрасно: баннер, аккуратные карточки товаров, кнопка нужного оттенка. Открываем тестовое письмо на телефоне — название товара уехало, цена прилипла к фотографии, а по кнопке «Купить» мы попадаем на главную. Ну, зато оттенок согласовали.

Принимать дизайн и вёрстку email-рассылки я бы советовала в два этапа. Сначала — содержание и внешний вид. Потом — готовое письмо, отправленное из вашего сервиса рассылок. Именно с ним будет взаимодействовать клиент.

Ниже — чек-лист для заказчика. Чтобы пользоваться им, не нужно разбираться в HTML. Нужно пройти путь получателя: открыть письмо, понять предложение, нажать на кнопку и проверить, что произошло дальше.

1. Договоритесь, что именно вам передают

«Сделать письмо» — удивительно вместительная формулировка. Заказчик может ждать готовую рассылку в своём кабинете, дизайнер — закончить работу на макете, а верстальщик — передать HTML-файл. И каждый будет считать, что всё сделал.

До начала работы зафиксируйте:

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

Список почтовых приложений лучше составить по вашей аудитории, если такие данные доступны. Gmail на Android и Gmail в браузере — разные варианты проверки. Так же, как Outlook на компьютере и его веб-версия. Просто «проверить в почте» здесь маловато.

Если пока выбираете формат задачи, посмотрите, что входит в дизайн и вёрстку email-рассылок: отдельное письмо, шаблон для команды или регулярную подготовку рассылок.

2. Проверьте, понятно ли предложение в макете

Начните с простого: что человек должен понять и сделать после открытия? Если в письме одновременно предлагают купить новинку, прочитать интервью, пройти опрос и подписаться на пять соцсетей, главная задача легко теряется.

Откройте макет без пояснений дизайнера. Видно, кто пишет? Понятно, что предлагают? Находится ли нужная кнопка? Согласованы ли между собой баннер, текст и условия акции?

• Заголовок сообщает суть предложения. Ради него не нужно читать мелкий текст в подвале.
• Главное действие выделено. Надпись на кнопке объясняет следующий шаг: «Выбрать воду», «Посмотреть коллекцию», «Проверить рейс».
• Цены, сроки и ограничения читаются и не противоречат друг другу.
• Карточки товаров позволяют сравнить предложения: видно название, изображение, цену и действие.
• Фирменные цвета, логотип и тон текста узнаваемы. При этом текст не приходится разглядывать на слишком пёстром фоне.

По шрифтам тоже договоритесь заранее. Если фирменный шрифт не отобразится в конкретном почтовом приложении, чем его заменят? Хорошая запасная гарнитура сохраняет читаемость и композицию. Требование «везде точно как в Figma» само по себе этого не обеспечивает.

3. Откройте письмо на телефоне

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

• Текст читается без зума, строки не уходят за экран.
• По кнопке удобно попасть пальцем, соседние ссылки не нажимаются вместо неё.
• Товары перестраиваются в понятном порядке. Название одного товара не оказывается рядом с ценой другого.
• Длинные названия, старые и новые цены помещаются в своих блоках.
• На баннере читается само предложение, а не только крупная цифра скидки.
• До основного действия можно добраться без бесконечной прокрутки через декоративные блоки.

Заодно откройте письмо в тёмной теме. Логотип не должен исчезать, а текст — сливаться с фоном. Не обязательно добиваться одного оттенка фона во всех приложениях. Важно, чтобы предложение оставалось читаемым, а кнопка — заметной.

4. Проверьте вёрстку после отправки из сервиса

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

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

Отдельная проверка — письмо без картинок. Если изображения не загрузились, человек всё ещё понимает, кто ему пишет и что предлагает? Основной текст, условия и кнопки лучше сохранять текстовыми элементами, а не упаковывать всё письмо в один длинный баннер. Для содержательных изображений нужны понятные альтернативные описания — alt-тексты.

Проверьте и загрузку изображений с телефона. Если фотография товара долго появляется, попросите оптимизировать файл. Универсальное требование «каждая картинка строго до такого-то веса» не заменяет проверку качества и скорости конкретного письма.

5. Нажмите на каждую ссылку

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

• Ссылка открывает нужную страницу, а не просто работающий сайт.
• На странице совпадают товар, цена, язык и условия предложения.
• Промокод действует в заявленных условиях. Это можно проверить на тестовой корзине без оплаты заказа.
• В ссылках есть согласованные UTM-метки — параметры для аналитики. Они помогают отличить переходы из этого письма от других источников.
• Нет ссылок на черновики, закрытые макеты и тестовые адреса.

Автоматическая проверка ссылок полезна, но не умеет оценивать смысл. Страница может успешно открываться и при этом показывать совершенно другой товар. Тут всё ещё нужен человек.

6. Проверьте персонализацию и переменные блоки

Письмо с обращением по имени нужно увидеть как минимум с именем и без него. «Здравствуйте, !» — не тот уровень персонального подхода, к которому мы стремимся.

Подготовьте тестовые контакты и несколько вариантов данных:

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

В каждом случае должен быть понятный запасной вариант. Например, нейтральное приветствие без имени или скрытие пустого товарного блока. В письме не должно оставаться технических обозначений переменных.

Уточните, как ваш сервис проверяет подстановки. Например, Mailchimp предупреждает, что данные конкретного контакта и динамический контент не подставляются в обычной тестовой отправке. Для них нужен соответствующий предпросмотр или отправка на отдельный тестовый сегмент. Поэтому неработающая подстановка в тесте — повод разобраться в режиме проверки, а не сразу объявлять вёрстку сломанной.

7. Посмотрите на письмо во входящих и в подвале

До баннера человек видит имя отправителя, тему и короткий текст рядом с ней — прехедер. Если там вместо продолжения предложения торчит «Открыть в браузере», стоит вернуться к настройкам письма.

Проверьте тему и прехедер на телефоне: важная мысль должна быть понятна даже при сокращённом отображении. Тема не должна обещать то, чего нет внутри. Адрес для ответов должен вести туда, где сообщения действительно прочитают.

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

8. Передавайте правки так, чтобы их можно было исправить

«Что-то криво» и «не нравится кнопка» оставляют слишком много места для догадок. Полезная правка отвечает на четыре вопроса: где смотрим, что видим, что ожидали и чем это мешает.

Собирайте комментарии команды в один список. Иначе утром дизайнер делает кнопку синей, днём — розовой, а вечером узнаёт, что её вообще надо убрать. После правок проверьте изменённые блоки и основные действия ещё раз: новая ссылка или замена товара тоже могут принести ошибку.

9. Заберите шаблон, с которым сможете работать

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

По итогам работы у команды должны быть согласованные исходники макета, HTML или шаблон в вашем сервисе, изображения и короткая инструкция по редактированию — в том составе, о котором договорились на старте. Уточните, где размещены картинки и останутся ли они доступными после завершения проекта.

Зафиксируйте финальную версию и то, кто её согласовал. «Берём файл final_final_3, но с кнопкой из вчерашнего» — слишком ненадёжная система для регулярных рассылок.

Короткий чек-лист приёмки email-рассылки

Сохраните этот список для следующего согласования. Если пункт не входит в работу подрядчика, он всё равно должен получить своего ответственного до отправки письма.

• Понятны цель письма, предложение и главное действие.
• Тексты, товары, цены и условия акции проверены.
• Макет соответствует фирменному стилю; запасные шрифты согласованы.
• На телефоне всё читается без увеличения и прокрутки вбок.
• Кнопки удобно нажимать, товарные блоки не смешиваются.
• Готовое письмо проверено после отправки из рабочего сервиса рассылок.
• Есть результаты проверки в согласованных почтовых приложениях.
• В тёмной теме и без изображений сохраняется смысл письма.
• Все ссылки ведут в нужное место; UTM-метки проверены.
• Персонализация работает, для пустых данных предусмотрена замена.
• Имя отправителя, адрес для ответов, тема и прехедер настроены.
• Контакты и отписка проверены на тестовом адресе.
• Критичные ошибки исправлены, итоговая версия повторно проверена.
• Исходники, шаблон и инструкция переданы в согласованном составе.

Хорошо свёрстанное письмо ещё не гарантирует продажи. После запуска нужно смотреть, кому его отправили, сколько людей перешли на сайт и что сделали дальше. Но принимать работу стоит в состоянии, когда клиенту хотя бы ничто не мешает прочитать предложение и воспользоваться им.

Нужно письмо, которое удобно читать и редактировать?

Разработаем дизайн и адаптивную вёрстку, подготовим шаблон под ваш сервис рассылок. Обсудим задачу, состав работы и проверку до старта.

Дизайн и вёрстка email-рассылок →

Если письма уже выходят, но результат не устраивает, начните с аудита email-рассылок: проблема может быть в базе, предложении или логике отправок. А стратегию, регулярные письма и аналитику можно объединить в сопровождении email-маркетинга.