В прошлой статье мы разбирались, как работать с приложением MailChimp Goal. Сегодня поговорим про дизайн email рассылки.
Когда-то уже посвящал этой теме отдельную статью, но с тех пор утекло много воды, и я решил, что информацию неплохо бы обновить — особенно в той части, которая касается примеров действующих рассылок.
Структура
Типичное письмо для рассылки складывается из четырёх блоков:
(1) Прехедер (preheader),
(2) Шапка,
(3) Тело письма,
(4) Подвал (футер).
Отдельным пунктом можно добавить границы и фон.
Шапка и футер остаются практически неизменными от рассылки к рассылке. В прехедере меняется только текст аннотации. Таким образом, основное “поле битвы” разворачивается в теле письма.
Впрочем, и здесь годятся шаблонные решения. Они упрощают вёрстку и помогают изготовить каждый выпуск рассылки быстрее.
Стандартные элементы
Как правило, email кампании проводятся слишком часто и на разработку уникального дизайна для каждого письма недостаёт времени.
Приходится либо готовить рассылки почти без оформления, либо стандартизировать дизайнерские решения, которые и помогают выполнить бо́льшую часть работы. Письма в таком случае собираются как на конвейере — быстро и с определённым уровнем качества. Возможно, это не штучный продукт, но и не грубое кустарное производство.
• Компоновка
Стандартная ширина письма составляет 600px (чтобы рассылка без проблем “вписывалась” в большинство почтовых программ и устройств).
Исходя из этого, набор компоновочных решений для рассылок довольно невелик:
(1) Картинка сверху,
(2) Картинка слева,
(3) Картинка справа,
(4) 2 столбца,
(5) 3-4 столбца.
(Последний вариант используется реже из-за узкой контентной части).
На первый взгляд маловато, однако нетрудно подсчитать, что такой набор даёт больше сотни вариантов компоновки.
• Основные элементы
Откройте любую рассылку в своём почтовом ящике и наверняка обнаружите в ней следующие элементы:
(1) Картинки,
(2) Заголовки,
(3) Подзаголовки,
(4) Текст.
Может быть, не в каждом письме они встречаются в полном составе, но пара-тройка найдётся практически везде:
• Декоративные элементы
Особенности вёрстки для email рассылок ограничивают выбор выразительных средств, которые можно задействовать в оформлении.
Если только вы не предпочитаете верстать рассылки сплошными картинками (что, по-моему, моветон),
то приходится сдерживать полёт фантазии, когда дело касается шрифтов, возможных вариантов компоновки, фоновых изображений и прочих визуальных “изысков”.
Остаётся сосредоточиться на том, что ещё можно пустить в ход письме, невзирая на “коварство” почтовых программ:
(1) Линейки,
(2) Буллиты (маркеры списка),
(3) Оформление ссылок и кнопок,
(4) Рамки и тени,
(5) Иконки.
Именно благодаря декоративным элементам некоторые рассылки выглядят в целом интересно:
Дизайн как конструктор
Теперь, когда мы разложили дизайн рассылки по полочкам (5 решений по компоновке, 4 основных и 5 декоративных типов элементов), остаётся только разработать универсальный шаблон, который позволит “собирать” письма, как башни из кубиков конструктора:
Если вы опасаетесь, что получится однообразно, прогуляйтесь по галерее email шаблонов Themforest, чтобы взглянуть, на что способен подобный арсенал.
Кстати, html-редакторы некоторых рассылочных сервисов исповедуют тот же подход к дизайну (например, Drag&Drop в Мэйл Чимп). И представление о письме, как о наборе стандартных блоков, которые можно перетасовывать любым способом, здесь отлично срабатывает:
К примеру, нам нужно анонсировать текущую акцию и десяток товарных предложений. Используя готовые блоки, мы можем сделать это совершенно по-разному:
При этом каждый вариант письма структурирован и неплохо выглядит. У маркетологов появляется свобода для манёвра. Теперь не нужно глубоко знать вёрстку или хорошо рисовать в фотошопе, чтобы создавать по-настоящему красивые письма (правда, толика художественного вкуса всё же не помешает:-)
О пользе стандартизации
Помимо озвученного преимущества — быстроты и удобства подготовки кампаний, у стандартизации дизайна есть и другие плюсы. Она упростит жизнь всем, кто привлечён к выпуску рассылки.
Копирайтер понимает, какого объёма тексты писать, чтобы они “ложились” на компоновку. Дизайнер знает размер картинок, которые нужно подготовить для письма. Верстальщик по-хорошему принимает участие в проекте только однажды — подготавливая базовый шаблон-конструктор. Маркетолог без труда “упаковывает” весь контент в рассылку.
Наконец, в выигрыше оказываются и подписчики, которые привыкают к определённому формату подачи материалов, и учатся быстрее извлекать из писем интересующую их информацию.
Пример рассылки
Для тренировки разберём «по кусочкам» небезызвестную
рассылку Мегаплана:
→ Прехедер
Скрытый текст в аннотации + декоративный элемент — иконка-«самолётик», ссылающаяся на просмотр письма в браузере:
→ Шапка
Крупный заголовок с названием выпуска, подзаголовок, раскрывающий тему, и крупная картинка на всю ширина письма (баннер):
→ Тело письма
Текст, структурированный заголовками, подзаголовками и отступами; «разбавлен» картинками, иллюстрирующими содержание выпуска:
Декоративный элемент — цитирование:
→ Футер
Компоновка «картинка слева» и «2 столбца»:
Декоративные элементы — линейки, кнопки, рамки вокруг картинок, скругляющие углы:
→ Границы и фон
Зелёный фон (видимо, из фирменной расцветки Мегаплана). Границ как таковых нет, вместо них контрастный переход от фона к светлому телу письма, но есть скругление по углам.
Рассылка ведётся через Мэйл Чимп, где легко внедрить все перечисленные элементы отдельными блоками в режиме Drag&Drop. Шаблон несложный, и его вполне достаточно, чтобы автор текстов мог своими силами верстать большие, ярко оформленные выпуски — не вдаваясь глубоко ни в html, ни в работу с графическими редакторами.
* * *
Если вы раздумываете над оформлением собственной рассылки — найдите в почтовом ящике письма, дизайн которых вам нравится. «Разберите» их на такие же составные части. После этого подготовка своего шаблона пойдёт гораздо легче.
Заключение
Стандартизировать дизайн рассылки — это удобно. Хороший шаблон не только сэкономит время, но и обеспечит вас достаточным запасом гибкости, чтобы размещать в письмах практически любой контент, причём делать это разнообразно.
Если во время работы с шаблоном у вас возникнет творческий порыв — сделать что-то по-новому, его всегда можно поставить себе на службу. Добавить блок с новым дизайном в базовый набор, и таким образом стандартизировать и это решение.
P.S. Опрос подписчиков блога всё ещё показывает, что самая интересная тема для статей — аналитика:
Поэтому следующий пост анонсирую с особенным удовольствием: в будущем месяце вас ждёт Суперрасширенная аналитика рассылок!
P.P.S. Если вы ещё не подписались на мою рассылку — самое время это сделать. Я не только анонсирую свежие статьи блога, но и делюсь с подписчиками бонусной информацией, а также показываю отдельные приёмы email маркетинга на практике. До встречи в вашем почтовом ящике! 🙂