Более 2000 бизнесменов, маркетологов, дизайнеров и разработчиков следят за новостями нашего блога.

Присоединяйтесь:

Подписаться
Отлично!

Подтвердите подписку: письмо в почте, там жмите на ссылку

Все записи
Рассказывает Ольга Володина,
старший контент-маркетолог

Четыре года назад я работала email-маркетологом в стартапе. Раз в неделю заходила на ESP-платформу: собирала макет из готовых блоков, сочиняла текст, вставляла иллюстрации и отправляла письмо по базе. 

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

Когда встроенного конструктора писем достаточно для работы

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

Для email-маркетолога встроенный конструктор ESP-платформы — важный инструмент. Самому себе дизайнить картинки и верстать шаблоны в коде — из разряда фантастики.

Конструктор предлагает готовые блоки: текст, картинка, текст, кнопка. Меняешь слова, грузишь картинки — и готово. Есть шаблоны, адаптированные под конкретную тематику. В тематике дня рождения — шарики, на 8 Марта — цветочки — останется только поменять текст.

При этом шаблон не всегда что-то скучное. Посмотрите, какие красивые шаблоны предлагает своим клиентам использовать сервис Stripo:

il_html1Варианты шаблонов от Stripo к Хеллоуину

Возможные ошибки в шаблонной верстке

Шаблонная верстка выглядит отлично, если смотреть на нее с компьютера и никуда не отправлять. При этом у каждого из почтовиков — «Яндекса», Gmail, Mail — с ней свои отношения. Прибавим к этому постоянные обновления почтовиков, разные устройства, с которых получатели читают письма, и темные темы на устройствах.

И вот красивый шаблон развалился на экране получателя.

В агентстве Out of Cloud письма создают 5 специалистов: контент-маркетолог, дизайнер, верстальщик и технический специалист. Смысл в том, что текст, иллюстрации — это суперважно, но какой в этом толк, если верстка развалится. Даже в самых простых шаблонных письмах могут возникать ошибки. 

Падение верстки в почтовике OutlookОшибка: не проигрывается гиф-анимация в письме. Как исправит верстальщик: сделает стоп-кадр гиф-анимации и поставит полученный баннер в коде только для получателей с почтой Outlook.

Ошибка 2: блок с фоновой картинкой обрезается.

il_html2 (2)Пример рассылки для стажеров Out of Cloud

Как исправит верстальщик: скорее всего, нет xml-кода в head. Специалист добавит в html-схемы в атрибут <html xmlns=»http://www.w3.org/1999/xhtml» xmlns:v=»urn:schemas-microsoft-com:vml» xmlns:o=»urn:schemas-microsoft-com:office:office».

il_html3

Адаптивы. Статистика нашего агентства показывает, что в 70% случаях клиенты компаний открывают рассылку со смартфона. В идеальном мире и в идеальной верстке тексты мобильной версии хорошо читаются, а в кнопку легко попасть, потому что она нормального размера.

Ошибка: висячий предлог в конце строки.

il_html4

Верстальщик склеит предлог и следующее слово при помощи неразрывного пробела в html, он выглядит так: &nbsp;. 

il_html5

Ошибка 2: Даты, цифры, адреса без причины подчеркиваются или выделяются синим цветом, как ссылки. Верстальщик разобьет  текст при помощи <span></span>. Например: Ма</span>лая Пир<span>огов</span>ская, 3.

Пример

 

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

ПримерПример рассылки — дайджест Out of Cloud

Пока что код умеет влиять на отображение письма в темной, инверсионной, теме только в Apple Mail. 

Для понимания, в какой цвет переведется текст или фон, верстальщик использует специальный сервис http://www.invertcolors.net/ru/. Всё остальное — дизайнерская хитрость: подложки правильного цвета, заголовки картинками.

il_html8

Перед тем как поставить рассылку на бой, специалисты агентства совершенствуют ее вид, но возможных ошибок множество. Мы придумали процесс, по которому проходит каждое письмо, появляющееся в Out of Cloud:

Схема

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

il_html10Пример рассылки от Nikon. Не является рекламой. Источник

Плюсануть
Поделиться
Класснуть