Стандартизируй это: принципы дизайна email рассылок (№52)

Стандартизация дизайна email рассылок

В прошлой статье мы разбирались, как работать с приложением MailChimp Goal. Сегодня поговорим про дизайн email рассылки.

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

 

Структура

Типичное письмо для рассылки складывается из четырёх блоков:

   (1) Прехедер (preheader),
   (2) Шапка,
   (3) Тело письма,
   (4) Подвал (футер).

Отдельным пунктом можно добавить границы и фон.

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

Шапка и футер остаются практически неизменными от рассылки к рассылке. В прехедере меняется только текст аннотации. Таким образом, основное “поле битвы” разворачивается в теле письма.

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

 

Стандартные элементы

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

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

   •  Компоновка

Стандартная ширина письма составляет 600px (чтобы рассылка без проблем “вписывалась” в большинство почтовых программ и устройств).

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

   (1) Картинка сверху,
   (2) Картинка слева,
   (3) Картинка справа,
   (4) 2 столбца,
   (5) 3-4 столбца.

(Последний вариант используется реже из-за узкой контентной части).

Дизайн рассылки: варианты компоновки контента в письме

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

 

   • Основные элементы

Откройте любую рассылку в своём почтовом ящике и наверняка обнаружите в ней следующие элементы:

   (1) Картинки,
   (2) Заголовки,
   (3) Подзаголовки,
   (4) Текст.

Может быть, не в каждом письме они встречаются в полном составе, но пара-тройка найдётся практически везде:

Дизайн рассылки: пример оформления email

 

   • Декоративные элементы

Особенности вёрстки для email рассылок ограничивают выбор выразительных средств, которые можно задействовать в оформлении.

Если только вы не предпочитаете верстать рассылки сплошными картинками (что, по-моему, моветон),

Письмо только из картинок

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

Остаётся сосредоточиться на том, что ещё можно пустить в ход письме, невзирая на “коварство” почтовых программ:

   (1) Линейки,
   (2) Буллиты (маркеры списка),
   (3) Оформление ссылок и кнопок,
   (4) Рамки и тени,
   (5) Иконки.

Дизайн рассылки: примеры декоративных элементов

 

Именно благодаря декоративным элементам некоторые рассылки выглядят в целом интересно:

Пример рассылок LinguaLeo и Яндекс.Деньги

 

Дизайн как конструктор

Теперь, когда мы разложили дизайн рассылки по полочкам (5 решений по компоновке, 4 основных и 5 декоративных типов элементов), остаётся только разработать универсальный шаблон, который позволит “собирать” письма, как башни из кубиков конструктора:

Если вы опасаетесь, что получится однообразно, прогуляйтесь по галерее email шаблонов Themforest, чтобы взглянуть, на что способен подобный арсенал.

Кстати, html-редакторы некоторых рассылочных сервисов исповедуют тот же подход к дизайну (например, Drag&Drop в Мэйл Чимп). И представление о письме, как о наборе стандартных блоков, которые можно перетасовывать любым способом, здесь отлично срабатывает:

Дизайн рассылки: работа с Drag & Drop редактором в MailChimp

 

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

Дизайн рассылки: варианты компоновки

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

 

О пользе стандартизации

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

Копирайтер понимает, какого объёма тексты писать, чтобы они “ложились” на компоновку. Дизайнер знает размер картинок, которые нужно подготовить для письма. Верстальщик по-хорошему принимает участие в проекте только однажды — подготавливая базовый шаблон-конструктор. Маркетолог без труда “упаковывает” весь контент в рассылку.

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

 

Пример рассылки

Для тренировки разберём «по кусочкам» небезызвестную
рассылку Мегаплана:

   → Прехедер

Скрытый текст в аннотации + декоративный элемент — иконка-«самолётик», ссылающаяся на просмотр письма в браузере:

Прехедер рассылки Мегаплана

 

   → Шапка

Крупный заголовок с названием выпуска, подзаголовок, раскрывающий тему, и крупная картинка на всю ширина письма (баннер):

Шапка рассылки Мегаплана

 

 

   → Тело письма

Текст, структурированный заголовками, подзаголовками и отступами; «разбавлен» картинками, иллюстрирующими содержание выпуска:

Тело письма в рассылке Мегаплана

Декоративный элемент — цитирование:

Пример цитирования в рассылке Мегаплана

 

   → Футер

Компоновка «картинка слева» и «2 столбца»:

Пример футера рассылки Мегаплана

Декоративные элементы — линейки, кнопки, рамки вокруг картинок, скругляющие углы:

Декоративные элементы в рассылке Мегаплана

 

   → Границы и фон

Зелёный фон (видимо, из фирменной расцветки Мегаплана). Границ как таковых нет, вместо них контрастный переход от фона к светлому телу письма, но есть скругление по углам.

Рассылка ведётся через Мэйл Чимп, где легко внедрить все перечисленные элементы отдельными блоками в режиме Drag&Drop. Шаблон несложный, и его вполне достаточно, чтобы автор текстов мог своими силами верстать большие, ярко оформленные выпуски — не вдаваясь глубоко ни в html, ни в работу с графическими редакторами.

* * *

Если вы раздумываете над оформлением собственной рассылки — найдите в почтовом ящике письма, дизайн которых вам нравится. «Разберите» их на такие же составные части. После этого подготовка своего шаблона пойдёт гораздо легче.

 

Заключение

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

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

 

P.S. Опрос подписчиков блога всё ещё показывает, что самая интересная тема для статей — аналитика:

Результаты опроса подписчиков блога

Поэтому следующий пост анонсирую с особенным удовольствием: в будущем месяце вас ждёт Суперрасширенная аналитика рассылок!

 

P.P.S. Если вы ещё не подписались на мою рассылку — самое время это сделать. Я не только анонсирую свежие статьи блога, но и делюсь с подписчиками бонусной информацией, а также показываю отдельные приёмы email маркетинга на практике. До встречи в вашем почтовом ящике! 🙂