Как подогнать дизайн шаблона рассылки под возможности конструктора писем (№125)


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

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

Вёрстка в блочном редакторе писем: ожидание — реальность

Чтобы этого не происходило, и финальный результат соответствовал исходному дизайну если не на 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 рассылок Настраиваем автоматические письма, исходя из возможностей сервиса
Стандартизируй это:
принципы дизайна
email рассылок
Настраиваем автоматические
письма, исходя из
возможностей сервиса
P.S. Чтобы не пропускать выход новых статей, подписывайтесь!  😉