Разработали мастер-шаблон для корпоративных рассылок в Outlook
Корпоративные емейлы можно отправлять для галочки, а можно использовать их как эффективный канал общения с сотрудниками. Во втором случае важно работать над дизайном: расположением текстовых и визуальных блоков, шрифтом и графикой.
В компаниях, где нет дизайнеров и верстальщиков, заменой специалистов становится мастер-шаблон — набор заранее отрисованных и оформленных блоков, которые можно компоновать как угодно. С ним результат получается предсказуемым, а письмо корректно отображается на разных устройствах.
В кейсе мы подробно разберём, как создали мастер-шаблон для внутренних корпоративных коммуникаций в Outlook.
Клиент и задача
К нам обратилась добывающая компания, занимающаяся поиском месторождений, разведкой и переработкой полезных ископаемых.
Процесс рассылок не устраивал клиента по нескольким причинам:
- единый корпоративный стиль и рубрики отсутствовали;
- письма готовили вручную, отчего «съезжала» вёрстка;
- часть информации прикрепляли файлами, которые не всегда удобно открывать, и сотрудники могли пропускать важное.
Компания ведёт все рабочие коммуникации через MS Outlook. Поэтому клиент просил решение, которое бы безупречно отображалось внутри этого почтовика.
Коллеги выбрали нас, так как никто более на рынке не оказывает такую услугу — разработка мастер-шаблона в Outlook.
Сложности разработки в Outlook
Вёрстка мастер-шаблона для Outlook отличается от вёрстки шаблонов для платформ рассылок. Без учёта этих особенностей итоговый результат будет плохим.
Вот что отмечают наши верстальщики и дизайнеры:
Outlook ограниченно поддерживает стилевые свойства, что нельзя игнорировать при вёрстке, иначе некоторые элементы будут отображаться не так, как запланировано. Также Outlook добавляет в код шаблона свои обёртки (таблицы), из-за чего письмо может ломаться, а некоторые блоки — смещаться. При вёрстке шаблона нужно делать такие структуры кода, которые не будут ломаться в готовом письме.
Оксана Гарибова
старший верстальщик EMAILMATRIX
Задача — разработать шаблон так, чтобы клиент смог своими силами его адаптировать без необходимости использовать другие программы.
При разработке мастер-шаблона под Outlook важно учитывать множество ограничений.
Например, в Outlook не поддерживаются фоновые изображения. Из-за этого нет возможности сделать стандартный баннер с картинкой на фоне и текстом с кнопкой поверх неё в самом почтовом клиенте. Для этого приходится собирать их в сторонних графических редакторах и после вставлять как одно изображение. Отсюда новая проблема: к одному изображению можно привязать только одну ссылку. Всё это существенно ограничивает количество вариантов дизайна, которые можно адаптировать под клиента.
Многие ограничения можно было бы обойти с помощью вставки картинок, но и здесь есть нюансы. К примеру, на стыке двух изображений появляются линии в цвет фона. Это проблема плавающего характера, и сказать точно, появится она или нет, невозможно.
Использовать анимацию в таких рассылках тоже не получится, вместо неё отображается только первый кадр.
Мобильная адаптация отсутствует, поэтому мы делаем текст крупнее, чтобы он легче читался без зума на смартфонах. Здесь приходится идти на компромисс: так как основная часть читателей открывает письма с десктопа, текст не должен смотреться слишком крупным.
Кирилл Мосин
старший дизайнер EMAILMATRIX
Процесс
Первым этапом мы провели брифинг и разобрались в специфике CRM-коммуникаций клиента и почему ему нужен мастер-шаблон. Так на старте работ мы согласуем ожидания, чтобы дальнейшие этапы были более предсказуемыми.
На втором этапе мы проанализировали текущие рассылки клиента, чтобы определить количество и особенности блоков для мастер-шаблона.
Клиент попросил следующие разделы для прассылки:
- вступление — короткое обращение от руководства;
- основной блок с новостями компании: инфографика производственных результатов и дайджест важных событий;
- постоянные рубрики с инструкциями, социальными проектами, описанием корпоративных мероприятий.
Клиенту было важно, чтобы из шаблона можно было убирать рубрики, так как они меняются от рассылки к рассылке. Также он попросил для каждой из них создать свой дизайн, чтобы сотрудники видели переход от одной темы письма к другой.
На третьем этапе мы приступили к разработке дизайна в Фигме. Перед показом черновых блоков клиенту мы согласовали их отображение с нашим верстальщиком и техническим специалистом. В случае с Outlook это особенно важный шаг, который помогает уже на этапе дизайна предупредить некорректное отображение в готовых рассылках.
В Фигме мы разработали блоки по следующим тематикам:
- блоки с изображением,
- текстовые блоки,
- инфографики,
- рубрикаторы,
- события и дайджесты,
- футер и шапка.
Для каждого блока мы подготовили несколько вариантов дизайна. Это помогает клиенту выбрать наилучшее решение под задачи и контент рассылки.
Учитывая, что все материалы для рассылок будут готовиться на стороне клиента в самом Outlook, мы сделали все изображения строго определённых пропорций: квадратные 1:1, горизонтальные 2:3 и вертикальные 3:2.
Ограниченный набор форматов упрощает адаптацию контента под шаблон и снижает риски, что один из блоков сломает вёрстку из-за изображения нестандартного формата.
Кирилл Мосин
старший дизайнер EMAILMATRIX
На четвёртом этапе мы приступили к вёрстке утверждённых по дизайну блоков. Так как мы предварительно согласовывали конечный результат с техническими специалистами, с вёрсткой и отображением элементов проблем не возникло.
На финальном этапе технические специалисты тщательно проверили, корректно ли отображаются разные блоки мастер-шаблона в трёх версиях Outlook. Каждая из них отличается поддержкой стилевых свойств, поэтому одно и то же письмо может выглядеть по-разному.
Также обязательно проверяется инверсия цветов в тёмной теме почтовика. Если не учитывать её в коде, то вас ждут неприятные сюрпризы:
Из-за инверсии текст и элементы могут потеряться и стать нечитабельными либо они станут неподходящего цвета для клиента (оттенок является фирменным для конкурента или просто не вписывается в брендовую палитру). Поэтому дизайнеры учитывают её при изначальном выборе цвета блоков и основного цвета текста.
После проверок мы передали вёрстку клиенту в формате msg. Он удобен тем, что позволяет отобразить готовый HTML-код письма в среде почтовика со всеми внедрёнными изображениями. Благодаря этому можно увидеть готовое письмо перед отправкой и даже внести в него изменения без использования сторонних сервисов.
У клиента возникло несколько комментариев по поводу того, как пользоваться шаблоном. Наши менеджер и верстальщик создали подробную инструкцию, а затем на совместном созвоне разобрали её по пунктам и дополнили прямо на встрече: как менять изображения и текст в блоках. Благодаря инструкции даже сотрудник без опыта настроит и соберёт рассылку любой сложности в рамках мастер-шаблона.
Результат
Мы разработали мастер-шаблон под Outlook за один месяц и три оговорённые на старте работ итерации. По итогу клиент получил:
- 40 блоков, рубрикаторы и футер, каждый из которых сочетается между собой;
- подробную инструкцию для самостоятельного использования.
Мы создали визуальное решение, которое масштабируется под любые задачи. Теперь специалисты компании могут фокусироваться на качестве контента и смыслах, не тратя часы на правку вёрстки в Outlook.
КОМАНДА
ПРОЕКТА
