Сделали удобный мастер-шаблон в Outlook для корпоративной рассылки

Кейс финансовой компании

Елена Сеченых

верстальщик EMAILMATRIX

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

Как правило, внутреннюю рассылку ведут не маркетологи, а другие специалисты, для которых емейл — неосновной и непривычный инструмент. Бывает, что им сложно делать письма, особенно в технической части. Я расскажу, как мы помогли одному из клиентов ощутимо упростить ведение корпоративной рассылки.

Задача

К нам обратилась крупная финансовая компания. Её HR-отдел еженедельно рассылает корпоративные дайджесты для сотрудников. Письма отправляются через Outlook, а собирались — в Word. Процесс был неприятным, результат — некрасивым.

Чтобы без больших усилий делать рассылки с качественным визуалом, компания решила внедрить мастер-шаблон. Это макет со всеми возможными элементами писем, из которого можно быстро собрать любую рассылку.

Клиент заказал мастер-шаблон в нашем агентстве, потому что уже третий год делает с нами маркетинговые письма. Он знает наш уровень, а мы — его дизайн-гайды.

Дизайн

Дайджесты включают набор постоянных рубрик. Больше всего места занимают мини-статьи в начале писем и списки спецпредложений от партнёров. Также есть корпоративные новости, актуальные вакансии, анонсы событий, представление новых сотрудников.

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

Новости компании до…

…и после

Мы сделали оформление максимально простым и лаконичным, чтобы у клиента не было проблем с отображением писем при отправке и получении.

Для Outlook чем проще дизайн, тем лучше. Почтовик накладывает множество ограничений: нет стандартной мобильной адаптации, нельзя задать радиус углов, добавить градиент или фоновое изображение в блок с заливкой. Из-за последнего приходится либо верстать отдельные блоки картинками, либо отказываться от задуманного.

Но в целом за счёт упрощения можно адаптировать под Outlook практически любой дизайн. Он полностью или с нюансами поддерживает большинство элементов CSS — подробнее это описано в нашем справочнике.

Кирилл Мосин
дизайнер EMAILMATRIX

Вёрстка

Чтобы шаблон корректно работал при отправке писем из Outlook, я учла несколько особенностей почтовика.

Вёрстка не адаптивна

Outlook 2016 и более ранние версии не поддерживают стилевое свойство max-width, которое подстраивает контент под ширину экрана. Из-за этого на мобильных письма выглядят как на десктопе, только мельче.

В нашем случае это не было критической проблемой, так как корпоративную рассылку традиционно читают с компьютеров и ноутбуков. Тем не менее мы учли возможность просмотра со смартфонов. Дизайнер Кирилл подобрал такие размеры шрифта, чтобы он был не слишком крупным в десктопной версии и оставался читабельным на мобильных.

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

А так бы выглядело это письмо с мобильной адаптацией

Из-за отсутствия max-width я сверстала шаблон с фиксированной шириной — чтобы контент не разъехался на всю ширину экрана. Для чтения в Outlook это ограничение обычно прописывают специальными условными комментариями. Но при отправке через него любые условные комментарии превращаются в безусловные, то есть перестают работать. Получаются две одинаковые таблицы:

Чтобы дублирования не было, я убрала таблицу с max-width, а в другой прописала ширину 600 px. Иначе контент для этого почтовика не ограничить.

<table width="600" border="0" cellspacing="0" cellpadding="0" style="width: 600px;">
<tr><td align="left" valign="top">
<!-- padding --><div style="height: 10px; line-height: 10px; font-size: 8px;">&nbsp;</div>
</td></tr>
</table>

Нет фоновых изображений

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

Для корректного отображения фона в Outlook мы используем специальный код на языке векторной разметки VML. Но при отправке через этот почтовик фон объединяется в одну картинку с лежащим поверх текстом.

Но по умолчанию в Outlook отключена загрузка изображений — пользователи с этой настройкой не увидят текст, который стал картинкой. А остальные не смогут с ним взаимодействовать: например, кликнуть по ссылке. Поэтому мы не стали использовать в мастер-шаблоне фоновые картинки. Если же вам потребуется декорировать письмо для рассылки через Outlook, сделайте так:

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

Пример письма для другого клиента

Кнопки-картинки

Традиционно кнопки в письмах верстаются кодом: так они лучше отображаются на разных устройствах и легко редактируются. Для отображения в Outlook также используется VML, но отправка из него ломает этот код. Получается так:

Есть два выхода, каждый со своими минусами.

• Сделать таблицу размером с кнопку, залить нужным цветом и вписать текст со ссылкой. Но кликабельным будет только слово, а не вся «кнопка». К тому же не получится закруглить её края, так как Outlook не поддерживает свойство border-radius.
• Сделать кнопки картинками. У этого способа нет проблем предыдущего, однако такие кнопки нельзя редактировать: каждую новую придётся отрисовывать в графическом редакторе.

Мы выбрали второй способ, потому что в этой рассылке большая область клика для удобства подписчиков важнее, чем возможность менять кнопки. В последнем нет необходимости: в нашем мастер-шаблоне есть универсальные кнопки для всех рубрик дайджеста.

Отдельные «обёртки» для блоков

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

Блоки можно двигать по вертикали, но переставить по горизонтали, скажем, карточки внутри блока не получится: это ячейки одной таблицы

Изначально я установила «обёртку» на всю ширину письма. Но у блоков с белым фоном было сложно найти границу, за которую их нужно «поймать» для перетаскивания. К тому же на больших мониторах она оказывалась далеко от письма, где-то на краю — это неудобно отправителю.

Поэтому мы с дизайнером решили ограничить ширину всех блоков 660 пикселями. Так хорошо выглядят блоки с подложкой и легко ловить курсор в блоках без неё.

Пакет для клиента

Классический мастер-шаблон состоит из документа с HTML-кодом, инструкции к нему и макета в Figma. Но в нашем случае место первого документа занял msg-файл — это формат Outlook для хранения сообщений, включая изображения.

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

Работа с текстом — как в обычном редакторе

Изображения редактируются с помощью контекстного меню

Это бережёт клиента от типовых ошибок с удалением открывающих или закрывающих тегов (их допускают почти все, кто начинает работать с обычными мастер-шаблонами). Также упрощается перестановка блоков: схватить и перетащить видимый блок легче, чем менять местами куски кода.

Мы делаем инструкции для всех мастер-шаблонов, чтобы клиенту было проще разобраться с новым инструментом. С каждым разом они усложняются: мы учитываем вопросы, которые возникли у компаний на предыдущих проектах.

Фрагмент подробной инструкции к мастер-шаблону

Файл Figma мы также передали клиенту — на случай, если понадобится сделать новую кнопку, добавить баннер или другое изображение.

Результат

Я регулярно верстаю разные мастер-шаблоны, но даже в рутинных задачах можно найти интерес: сделать всё так, чтобы клиенту было легко разобраться и пользоваться. Этот мастер-шаблон заказчик принял без единого вопроса или замечания — значит, получилось. По словам клиента, теперь удаётся делать более качественные письма, в первую очередь с точки зрения дизайна.

КОМАНДА
ПРОЕКТА

Виктория Костюкова

менеджер проекта

Кирилл Мосин

дизайнер

Елена Сеченых

верстальщик

Хотите делать письма быстрее и проще?