Настроили мастер-шаблон в новом конструкторе Mindbox — улучшили дизайн и ускорили продакшен
Мастер-шаблон помогает формировать общий визуальный стиль рассылки и значительно ускоряет создание писем. Не нужно создавать емейлы с нуля и каждый раз думать о дизайне: он всегда будет подходящим и узнаваемым.
Как и любой инструмент, мастер-шаблон периодически требует доработок. Именно с таким запросом к нам пришла IT-компания, которая в том числе разрабатывает антивирус. У неё был мастер-шаблон из стандартных блоков в конструкторе Mindbox. Когда там появилась возможность загружать кастомные HTML-блоки, бренд решил воспользоваться ей, чтобы создавать письма с уникальным дизайном вне прежних рамок конструктора.
Мы сделали новый расширенный мастер-шаблон, который помогает экономить время на дизайне и вёрстке. Вот как это было.
Из-за NDA мы не можем показать реальные материалы, поэтому в статье будут их выдуманные аналоги.
Задача
Клиент — поставщик IT-решений для бизнеса, госструктур и домашних пользователей. Больше 20 лет работает на международном рынке и обладает обширной экспертностью в разработке и продаже ПО.
Ранее клиент обращался к нам за стратегическим консалтингом — как раз тогда мы и порекомендовали создать мастер-шаблон, чтобы освежить визуал и привести письма к единому стилю. Команда бренда прислушалась к нам и сделала его в Mindbox. А теперь попросила нас обновить дизайн и сделать мобильную адаптацию существующих блоков, а также разработать несколько новых блоков для писем из разных пользовательских сценариев.
Обычно для мастер-шаблонов мы готовим дизайн-макет и HTML-файл с инструкцией, чтобы им можно было пользоваться без опыта в вёрстке. Но клиент сказал, что не хотел бы вообще работать с кодом и планировал собирать письма в визуальном конструкторе. Мы рассматривали вариант использовать стандартные блоки платформы, но это не позволило бы добиться уникального оформления. Поэтому нашей финальной задачей стало:
1. отрисовать нужные блоки для десктопа и мобильных устройств;
2. сверстать их;
3. загрузить в платформу.
Дизайн
На первом этапе нужно было доработать типографику, стили и компоненты существующего мастер-шаблона. Затем, ориентируясь на него для преемственности визуала, дизайнер Маша отрисовала в Фигме новые блоки:
- статичные и динамические карточки товаров;
шильдики для товаров (скидка/топ-продукт);
Шильдик — декоративный элемент, который используется в графическом дизайне, чтобы сделать акцент в каком-то определённом месте.
- блок с промокодами;
- блок продуктовых обновлений «Топ апдейтов»;
- отзывы;
- преимущества;
- оценка письма;
- футер.
Для разных цепочек могут понадобиться разные комбинации элементов, поэтому для некоторых блоков мы предусмотрели несколько вариантов. Например, в мастер-шаблоне есть текстовые блоки с заголовками, подзаголовками, с картинками и без и так далее. А оценка письма различается цветами и подачей:
Уже здесь важно было учесть ограничения конструктора, чтобы не откатываться к правкам в дизайне позже. Например, клиент хотел, чтобы динамическая товарная сетка была подвижной: если число товаров нечётное, то последняя карточка растянется на обе колонки либо рядом с ней автоматически появится промокарточка без товара. Но конструктор не может посчитать количество товаров у конкретного пользователя и вывести ту или иную HTML-разметку.
Поэтому мы оставили такие трансформации только для статичной товарной сетки в массовых письмах. Отрисовали широкую товарную карточку и промокарточку, чтобы клиент мог подставлять их в нужных случаях.
Мы оставили пояснения ко всем сложным моментам: это помогло команде клиента легче ориентироваться в подобных тонкостях.
Вёрстка
После утверждения макета мы приступили к вёрстке. Здесь требовалось в том числе проверить, как выглядят блоки с разным количеством контента. Мы проследили, чтобы независимо от содержания блок не распирало и он не ломался.
Также продумали мобильную адаптацию для всех блоков. Например, при перестроении горизонтальной карточки текст из правой колонки переносится между картинкой товара и кнопками.
Перенос в CDP
Я уже сталкивалась с настройкой мастер-шаблона в платформах, но с новым конструктором Mindbox ещё не работала. Поэтому начала с теории: как разметить элементы в HTML, чтобы они поддавались редактированию? в каком виде Mindbox принимает блоки? как задать элементам тип и свойства? Чтобы разобраться в этих и других вопросах, изучила техническую документацию.
Потом приступила к практике:
- 01.
- Дала всем блокам названия и создала для каждого отдельный файл. Вставила в код переменные, чтобы клиент мог редактировать их в визуальном конструкторе. Например, в этом блоке можно менять заголовок, надписи и ссылки на кнопках, а также стили текста.
Для блоков с оценкой письма я использовала функцию голосования, которая позволяет сегментировать пользователей по ответам в платформе. Чтобы она работала в письме, нужен специальный код: я добавила к тегу <a> атрибут data-name.
- 02.
- Загрузила блоки в Mindbox и прописала настройки в JSON-формате: типы переменных и значения по умолчанию.
- 03.
- Протестировала все блоки и их элементы, собрала несколько писем и проверила, как они выглядят в десктопе и в мобильной версии.
Нюансы
Без сюрпризов не обошлось. Например, в какой-то момент я поняла, что для стилизации некоторых элементов нужно настраивать слишком много параметров. Получалось нагромождение в меню переменных — это бы замедлило и усложнило создание письма для клиента. К тому же вёрстка могла сильно меняться из-за стилей, которые накладывает сам конструктор при редактировании блоков. Это риск постоянной поломки писем в разных почтовиках.
Мы сошлись с клиентом на том, чтобы отказаться от перегруженных модификаций — например, разноцветных подложек у карточек и у плашек со скидкой.
В остальном со статичными блоками сложностей не возникло.
А вот с динамическими блоками был нюанс. Планировалось, что в письмах с товарами суммы будут автоматически рассчитываться и подставляться сразу в товарный блок. Но это оказалось технически невозможно сразу из-за нескольких факторов. Мы создали отдельный блок — «Итого» (такая переменная в конструкторе есть).
Бывает, что письма собирают в конструкторе, копируя предыдущие и меняя контент. Я предупредила клиента, что первое время так лучше не делать. Если он скопирует старую рассылку, к её блокам не применятся новые CSS-стили или функции вроде скрытия заголовков. Ведь мы загрузили новые файлы, а не правили старые.
Письма из новых блоков клиент сможет копировать без препятствий.
Процессы
Отдельно хочу отметить, что команда клиента была глубоко вовлечена в работу: предоставляла всю нужную информацию, отвечала на вопросы и сама предлагала идеи. Комментарии и внимание к деталям помогли сделать по-настоящему удобный и универсальный мастер-шаблон для разных маркетинговых цепочек.
После завершения настройки мы остались с клиентом на связи до полной отладки нового решения. Я отвечала на все уточняющие вопросы клиента и сама следила за его новыми письмами, подсказывала, если что-то получалось не так.
Результат
Для начала давайте взглянем на изменения в дизайне.
Массовая рассылка:
Триггерная рассылка:
Мобильная адаптация:
Мастер-шаблон помог клиенту:
- повысить узнаваемость бренда за счёт обновлённого дизайна и структурированных блоков;
- сэкономить время на вёрстке, без которой можно обойтись в конструкторе.
КОМАНДА
ПРОЕКТА
