Создали единый стиль рассылки и удвоили кликабельность
Многие компании для коммуникации с клиентами и стимулирования продаж используют емейл-маркетинг. Частота рассылок зависит от стратегии и порой может достигать нескольких десятков и даже сотен в месяц.
Чтобы бесперебойно выпускать столько писем, нужно много денег, усилий и времени. Сократить затраты поможет мастер-шаблон. О том, что это и зачем он нужен, я расскажу на примере нашего клиента — компании Hasttings.
Что такое мастер-шаблон
Мастер-шаблон — универсальный набор блоков, из которых собирается рассылка. Их дизайн создаётся с учётом фирменного стиля компании. С мастер-шаблоном проще создавать макеты, он стандартизирует и ускоряет рабочие процессы. Это отличный помощник для компаний с большим количеством рассылок.
Мастер-шаблоны могут быть разных видов в зависимости от задач клиента:
- только дизайн;
- дизайн + HTML-вёрстка;
- шаблон в конструкторе или модульном редакторе (например, Pixcraft).
Мастер-шаблон полезен как для тех, кто планирует создавать емейл-рассылки внутри компании, так и для тех, кто отдаёт эти задачи на аутсорс. Особенно он актуален для компаний, которые работают с разными подрядчиками.
Клиент и задача
Перед нами стояла задача разработать мастер-шаблон для производителя спортивных тренажёров Hasttings. Рассылки у клиента были и ранее, но каждая была выполнена в своём стиле: над ними работали разные подрядчики, у которых не было единого шаблона. Различались и цвета, и шрифты, и отступы, и визуальные материалы.
Нужно было систематизировать блоки и привести их в соответствие с гайдлайном, чтобы повысить узнаваемость бренда и сформировать у получателей привычный образ.
Процесс
Мы получили от клиента список блоков, которые обязательно должны присутствовать в шаблоне:
- хедер (шапка письма);
- акционный баннер;
- подвал письма с контактами, графиком и адресом.
Вот как эти блоки выглядели в старых рассылках Hasttings:
Список остальных блоков для новых рассылок помогли составить наши эксперты.
1. Определяем цветовую гамму
Опираясь на брендбук, в качестве основных цветов мы выбрали чёрный, серый, жёлтый и белый. Они хорошо сочетаются между собой, ими удобно оперировать, создавая акцентные и нейтральные блоки. Яркий жёлтый и контрастный чёрный привлекают внимание и создают акцент, а серый и белый — более спокойные, отлично подходят для нейтральных блоков.
2. Работаем со шрифтами
В фирменном стиле Hasttings используются два шрифта: Artegra Sans Extended SC и Open Sans. Но при создании писем важно использовать для основного текста безопасные стандартные шрифты. Они есть в системе всех устройств, это гарантирует их корректное отображение.
Для основного текста мы решили использовать Arial (из стандартных шрифтов он наиболее схож по начертанию с фирменным Open Sans). Для заголовков оставили фирменный Artegra Sans Extended SC, отлично передающий визуальную связь с сайтом.
Для удобного восприятия текста важно использовать ограниченное количество стилей шрифта.
3. Дизайним кнопки и ссылки
Мы предусмотрели несколько вариантов СТА:
- акцентный контрастный вариант на чёрном фоне;
- более спокойный на белом или сером (в зависимости от фона блока);
- отдельный стиль кнопки с указанием цены на жёлтом фирменном фоне;
- компактный вариант: ссылка с нестандартным оформлением.
4. Определяемся с визуалом
Для баннеров мы разработали лаконичный дизайн с однотонным фоном фирменных цветов и фотореалистичными изображениями, также разработали вариант и с 3D-изображениями. Подобрали иконки, соответствующие гайдам.
Также мы учли технический момент, связанный с retina-дисплеями. Дело в том, что они обладают высоким разрешением и изображения фактической ширины письма (600 px) выглядят на них размыто. Чтобы картинки выглядели чётко, необходимо готовить их в двойном размере относительно фактического.
5. Продумываем универсальные блоки
Мы предусмотрели два варианта хедера:
- с логотипом, телефоном, графиком работы и меню со ссылками на самые востребованные разделы сайта;
более лаконичный: с логотипом, телефоном и графиком работы.
В подвале письма разместили контактную информацию, ссылки на социальные сети и отписку. Последнее очень важно, чтобы письма не попадали в спам и репутация отправителя не пострадала.
- Контентные блоки
- Товарная сетка
- Промоблоки
- Списки
- Блок с графиком работы и контактами
Также мы предусмотрели несколько вариантов блока с цитатами и блок с видео.
6. Адаптируем шаблон под мобильные устройства
85% пользователей смотрят рассылки со смартфонов. Поэтому очень важно сделать их удобными для просмотра с мобильных устройств.
7. Учитываем тёмную тему
Многие подписчики предпочитают тёмную тему на устройствах. По данным Litmus, её выбирают около 40% пользователей.
Шаблон получился разнообразным, но в то же время выдержан в рамках фирменного стиля. В нём учтены все модели поведения современного пользователя (мобильная адаптация, тёмная тема, retina-дисплеи). Клиент остался доволен. Задача выполнена!
Результат
Мастер-шаблон помог Hasttings упростить создание писем и привести их все к единому стилю. Вот примеры рассылок, собранных по шаблону:
Отзыв клиента
Создание новых рассылок всегда было для нас задачей со звёздочкой. Помимо подготовки качественного материала письма, мы массу времени тратили на игру со шрифтами и перетасовку картинок. Разработка мастер-шаблона решила эту проблему и ещё несколько дополнительных задач:
- формирование узнаваемого стиля;
- ускорение подготовки новых рассылок;
- повышение вовлечённости читателей: средние показатели открытия писем и кликов выросли в два раза.
Создание мастер-шаблона также совпало с разработкой нового сайта компании, и мы успешно подружили их друг с другом, выдержав единую стилистику в каждой детали.
Готовые блоки помогли упростить работу над каждым новым письмом и сделать минимальным порог вхождения в работу для новых сотрудников. Мастер-шаблон однозначно был лучшим решением в 2022 году для выхода на новый уровень емейл-маркетинга.