На 54% ускорили дизайн и вёрстку писем для банка с помощью мастер-шаблона
В этом кейсе я расскажу, как мы оптимизировали продакшен рассылки для крупного российского банка. Будет полезно компаниям, которые отправляют больше 10 писем в месяц или работают одновременно с несколькими дизайнерами.
Из-за NDA мы не можем показать реальные материалы, поэтому в статье будут их выдуманные аналоги
Задача
Клиент хотел решить две связанные проблемы:
- Неоднородный дизайн
- Письма делали несколько подрядчиков, поэтому внешний вид различался — как у разных подразделений, так и в рамках одной серии. Даже у сообщений одного типа могло быть несколько вариантов дизайна. Это снижало узнаваемость бренда в рассылке, что, в свою очередь, вредило конверсии.
- Затратный продакшен
- Каждое письмо делалось с нуля, к тому же приходилось сверяться со множеством разных образцов. Выходило долго и дорого.
Стандартизация
Мы изучили письма бренда, нашли ключевые недостатки и шаг за шагом исправили их.
В первую очередь ввели единые стандарты — в частности, для модульной сетки. Отныне все размеры блоков, текстов и отступов кратны четырём. Благодаря этому уменьшилось количество возможных размеров, что удобно для вёрстки. В то же время сетка с размером модуля 4 px достаточно гибкая — она не ограничивает создание новых блоков.
Ещё одно наше решение — оптимизировать палитру. В письмах банка использовалось по меньшей мере 28 цветов. Среди них встречались необязательные оттенки — вариации фирменных цветов. Мы убрали дубли, и палитра сократилась до 14 цветов. Это положительно повлияло не только на единство дизайна, но и на скорость работы: уменьшилось количество правок.
Дизайн-система
На основе стандартов мы разработали дизайн-систему рассылки. Она содержит цветовые решения, размеры и текстовые стили для всех типовых элементов писем.
Отдельно выделю подготовку шрифтов. В качестве основного я предложил Arial. Мы в EMAILMATRIX всегда стремимся использовать в рассылках системные гарнитуры, так как они корректно отображаются на всех видах устройств.
В отличие от сайтов, к письму нельзя подключить любой желаемый шрифт: нужно, чтобы он был на устройстве у пользователя. Вашего фирменного шрифта у подписчика, скорее всего, не окажется. А в таком случае вместо него отобразится какой-нибудь стандартный — с другой шириной и высотой букв.
Из-за этих различий может поехать вёрстка — особенно если в письме есть блоки с перестроениями или фиксированными шириной и высотой.
Елена Сеченых
руководитель отдела разработки EMAILMATRIX
Однако клиент попросил сохранить для заголовков фирменную гарнитуру. Это допустимо: набранный несистемным шрифтом заголовок можно сверстать картинкой — тогда его отображение сохранится. Однако на мобильных такой заголовок-картинка будет масштабироваться, а не перестраиваться.
Мы нашли способ сохранить перестроение для заголовков в фирменной гарнитуре: каждое слово делаем отдельной картинкой.
Мастер-шаблон
Финальным этапом стало создание мастер-шаблона рассылки. Это набор всех блоков, которые могут быть в письмах.
Каждый блок выполняется в нескольких вариантах — с разными размерами составляющих и разными вариантами адаптации. Например, в контентных блоках благодаря этому получается равномерно заполнить письмо любым объёмом информации и избежать пробелов или перегруженности.
С помощью мастер-шаблона емейлы можно быстро собирать как конструктор:
1. Выбрать нужные блоки.
2. Взять подходящие варианты блоков.
3. Вставить в блоки контент — текст и изображения.
В этом мастер-шаблоне мы сделали в едином стиле 193 варианта семи блоков:
- хедеры,
- баннеры,
- текстовые блоки,
- карточки,
- списки,
- таблицы,
- футеры.
Мастер-шаблон закрывает весь спектр форматов, которые есть в рассылке банка. Благодаря обилию вариантов каждого блока письма получаются узнаваемыми, но не однообразными. А чтобы сделать емейл для другого направления, достаточно сменить цветовую палитру — все нужные заложены в дизайн-систему.
Вёрстка
Как правило, мастер-шаблоны нашего агентства включают не только макет в Figma, но и документ с кодом. Этот проект — не исключение.
На вёрстке мы учли ограничения почтовых клиентов. К примеру, «Яндекс Почта» не поддерживает медиазапросы — инструмент вёрстки для гибкой адаптации. Поэтому мы сделали блоки такими, чтобы они корректно отображались и с медиазапросами, и без них, насколько это было технически возможно.
Также мы адаптировали дизайн для тёмной темы. Почтовики не позволяют делать отдельные версии для неё и инвертируют письма самостоятельно, поэтому важно подготовить к этому все компоненты. В частности, мы добавили подложку или обводку элементам, которые верстаются как изображения. Так тёмные кнопки или иконки останутся читабельными при инверсии светлого фона в тёмный.
Результаты
Благодаря стандартизации продающие, контентные и триггерные письма банка получили общее оформление независимо от подразделения-отправителя. Все правила закреплены в дизайн-системе, которая доступна любому подрядчику и внутреннему специалисту.
После внедрения мастер-шаблона время дизайна и вёрстки писем уменьшилось в среднем на 54%.
За счёт продуманной адаптации собранные по нему письма корректно отображаются во всех почтовых клиентах.
КОМАНДА
ПРОЕКТА
