Практичный email [CRM] маркетинг

В прошлой статье мы обогащали данные о подписчиках.
Сегодня поговорим о дизайне рассылок, а точнее — о том случае,
когда этот дизайн собирается с помощью блочного редактора/конструктора писем.

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

Чтобы этого не происходило, и финальный результат соответствовал исходному дизайну если не на 100, то на 95%, нужно изначально задавать рамки дизайнеру, с учётом возможностей редактора, который мы собираемся использовать для вёрстки.

О том, как это сделать, и пойдёт разговор ниже.

Кстати, детально работа с одним из конструкторов писем была показана в статье Как работать в Drag&Drop редакторе MailChimp.

На что обратить внимание

Для начала коротко перечислим, на какие моменты стоит обратить внимание, составляя ТЗ для дизайнера на шаблон рассылки для блочного редактора:

⬥ Cтруктура письма
⬥ Шрифты
⬥ Изображения
⬥ Ссылки, кнопки

Как водится, дальше обсудим каждый элемент подробнее.

 

Структура письма

Не очень широкая контентная часть (как правило, 600—800px) в принципе ограничивает структуру письма.

Обычно это вёрстка в 1, 2 или 3 столбца. 4 используется уже значительно реже, так как в подобном случае столбцы получаются слишком узкими, чтобы разместить в них что-то существенное.

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

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

Обращаем внимание на возможное число столбцов, их ширину, а также шаг, с которым она может меняться (например, 5-10px).
Это будет та сетка, в пределах которой нужно работать дизайнеру.

 

Шрифты

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

Если мы каким-то образом внедрим их в вёрстку, то во многих почтовиках они будут автоматически заменены на шрифты по умолчанию, которые моментально убьют всю «магию» подобранной типографики (например, тот же Arial).

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

Это, конечно, не так впечатляет, но, как показывает практика,
подбор 1-2 стандартных шрифтов вполне позволяет реализовать визуально приличное содержание.

 

Изображения

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

Идеально будет изначально прописать в ТЗ, какой размер изображений нам нужен, исходя из их фактически доступных блоков в редакторе. Интересует в первую очередь ширина (высота может быть любая).

Или, по крайней мере, стоит указать желаемые пропорции: изображение во всю ширину письма, в половину, треть или четверть.

 

Ссылки, кнопки

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

• Ссылки

Гиперссылки удобнее всего выделять цветом и простым нижним подчёркиванием, без изысков.

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

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

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

• Кнопки

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

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

Так что предоставляем дизайнеру референсы желаемых кнопок и поясняем, какие ограничения у нас есть в этом случае.

Мобильная версия

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

В случае с блочным редактором можно просить дизайнера не заморачиваться, прорабатывая вариант с мобильной адаптацией — всё равно эта адаптация будет такой, какой её по умолчанию обеспечивает редактор.

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

В принципе, это всё, чем мы располагаем. Впрочем, в большинстве случаев этого бывает вполне достаточно:)

 

Кому верстать

Если взять все перечисленные выше требования, возникает закономерный вопрос:

Почему бы просто не попросить дизайнера самостоятельно собрать шаблон в блочном редакторе, чтобы не «городить огород» с таким большим количеством подробностей и ограничений?

Если дизайнер работает в нужном нам конструкторе писем — что ж, это просто прекрасный вариант. Но всё же блочные редакторы — большая экзотика (в отличии от той же Тильды, с которой многие дизайнеры вполне себе освоились).

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

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

 

Что в итоге

Возможно, предложенные ограничения собьют чей-то полёт фантазии, но, очень может быть, и наоборот — подстегнут воображение и помогут найти неожиданные визуальные решения.

Изначально ориентированное на блочный редактор писем ТЗ на дизайн во многих случаях позволяет получать результат выше среднего, и вполне дотягиваться до планки хороших, «кастомных» шаблонов, собранных профессиональными email-дизайнерами и верстальщиками.

	[В следующий раз поговорим про cold email outreach — они же «холодные» рассылки].

— Ещё почитать —

Стандартизируй это: принципы дизайна email рассылок	Настраиваем автоматические письма, исходя из возможностей сервиса