Обсудим ваш проект?
Почему email-маркетологи верстают письма кодом, если есть готовые шаблоны
Почему email-маркетологи верстают письма кодом, если есть готовые шаблоны
Четыре года назад я работала email-маркетологом в стартапе. Раз в неделю заходила на ESP-платформу: собирала макет из готовых блоков, сочиняла текст, вставляла иллюстрации и отправляла письмо по базе.
Это быстро, но рассылки выглядели однотипно и скучновато, что влияло на вовлеченность читателей — об этом мне сообщала низкая конверсия в клики и тепловая карта. Письма не адаптировались под мобильную версию: расползались огромным полотном или, наоборот, приходилось щуриться, чтобы рассмотреть текст на баннере.
Это быстро, но рассылки выглядели однотипно и скучновато, что влияло на вовлеченность читателей — об этом мне сообщала низкая конверсия в клики и тепловая карта. Письма не адаптировались под мобильную версию: расползались огромным полотном или, наоборот, приходилось щуриться, чтобы рассмотреть текст на баннере.
29.09.21
старший контент-маркетолог
Ольга Володина,
Когда встроенного конструктора писем достаточно для работы
Когда встроенного конструктора писем достаточно для работы
Email-маркетолог в небольшой компании вроде той, в которой я работала, — это и дизайнер, и копирайтер, и техспец. Маркетинговый бюджет ограничен, и компания и не планирует реализовывать сложную коммуникационную стратегию. Пока в полноценном CRM-маркетинге не видят потенциал, а email-коммуникации для читателей — это подборки товаров и уведомления о новых функциях сайта.
Для email-маркетолога встроенный конструктор ESP-платформы — важный инструмент. Самому себе дизайнить картинки и верстать шаблоны в коде — из разряда фантастики.
Конструктор предлагает готовые блоки: текст, картинка, текст, кнопка. Меняешь слова, грузишь картинки — и готово. Есть шаблоны, адаптированные под конкретную тематику. В тематике дня рождения — шарики, на 8 Марта — цветочки — останется только поменять текст.
При этом шаблон не всегда что-то скучное. Посмотрите, какие красивые шаблоны предлагает своим клиентам использовать сервис Stripo:
Для email-маркетолога встроенный конструктор ESP-платформы — важный инструмент. Самому себе дизайнить картинки и верстать шаблоны в коде — из разряда фантастики.
Конструктор предлагает готовые блоки: текст, картинка, текст, кнопка. Меняешь слова, грузишь картинки — и готово. Есть шаблоны, адаптированные под конкретную тематику. В тематике дня рождения — шарики, на 8 Марта — цветочки — останется только поменять текст.
При этом шаблон не всегда что-то скучное. Посмотрите, какие красивые шаблоны предлагает своим клиентам использовать сервис Stripo:
Варианты шаблонов от Stripo к Хеллоуину
Возможные ошибки в шаблонной верстке
Возможные ошибки в шаблонной верстке
Шаблонная верстка выглядит отлично, если смотреть на нее с компьютера и никуда не отправлять. При этом у каждого из почтовиков — «Яндекса», Gmail, Mail — с ней свои отношения. Прибавим к этому постоянные обновления почтовиков, разные устройства, с которых получатели читают письма, и темные темы на устройствах.
И вот красивый шаблон развалился на экране получателя.
В агентстве Out of Cloud письма создают 4 специалиста: контент-маркетолог, дизайнер, верстальщик и технический специалист. Смысл в том, что текст, иллюстрации — это суперважно, но какой в этом толк, если верстка развалится. Даже в самых простых шаблонных письмах могут возникать ошибки.
Падение верстки в почтовике Outlook. Ошибка: не проигрывается гиф-анимация в письме. Как исправит верстальщик: сделает стоп-кадр гиф-анимации и поставит полученный баннер в коде только для получателей с почтой Outlook.
Ошибка 2: блок с фоновой картинкой обрезается.
И вот красивый шаблон развалился на экране получателя.
В агентстве Out of Cloud письма создают 4 специалиста: контент-маркетолог, дизайнер, верстальщик и технический специалист. Смысл в том, что текст, иллюстрации — это суперважно, но какой в этом толк, если верстка развалится. Даже в самых простых шаблонных письмах могут возникать ошибки.
Падение верстки в почтовике Outlook. Ошибка: не проигрывается гиф-анимация в письме. Как исправит верстальщик: сделает стоп-кадр гиф-анимации и поставит полученный баннер в коде только для получателей с почтой Outlook.
Ошибка 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».
Адаптивы. Статистика нашего агентства показывает, что в 70% случаях клиенты компаний открывают рассылку со смартфона. В идеальном мире и в идеальной верстке тексты мобильной версии хорошо читаются, а в кнопку легко попасть, потому что она нормального размера.
Ошибка: висячий предлог в конце строки.
Ошибка: висячий предлог в конце строки.
Верстальщик склеит предлог и следующее слово при помощи неразрывного пробела в html, он выглядит так: .
Ошибка 2: Даты, цифры, адреса без причины подчеркиваются или выделяются синим цветом, как ссылки. Верстальщик разобьет текст при помощи <span></span>. Например: Ма</span>лая Пир<span>огов</span>ская, 3.
Темная тема. Ничего не поделаешь, некоторые клиенты переводят свои устройства в этот режим. Фон меняется с черного на белый, текст, наоборот, светлеет. На темном фоне нелепо выглядят картинки со светлыми подложками. То есть вся красота, которую создал дизайнер, разобьется о темную тему.
Пример рассылки — дайджест Out of Cloud
Пока что код умеет влиять на отображение письма в темной, инверсионной, теме только в Apple Mail.
Для понимания, в какой цвет переведется текст или фон, верстальщик использует специальный сервис www.invertcolors.net/ru/. Всё остальное — дизайнерская хитрость: подложки правильного цвета, заголовки картинками.
Для понимания, в какой цвет переведется текст или фон, верстальщик использует специальный сервис www.invertcolors.net/ru/. Всё остальное — дизайнерская хитрость: подложки правильного цвета, заголовки картинками.
- Давид СафарянВерстальщик агентства Out of CloudСпециалист-верстальщик, который использует шаблонную верстку, постоянно держит в голове ее особенности.
Шаблоны ограничивают дизайн, подогнать под perfect pixel не получится. Иногда в шаблонах нельзя менять местами блоки в мобильной версии, из-за этого ломается логика.
Верстка кодом позволяет настроить вывод товарных карточек в нужном формате, например, по три в ряд в десктопной версии и по две в ряд — в мобильной.
Перед тем как поставить рассылку на бой, специалисты агентства совершенствуют ее вид, но возможных ошибок множество. Мы придумали процесс, по которому проходит каждое письмо, появляющееся в Out of Cloud:
Часто УТП рассылки — ее необычный дизайн, потому к нам в агентство часто приходят «за креативом». Такие письма невозможно собрать в конструкторе, но аудитория откликается на них очень классно, по нашей статистике.
Пример рассылки от Nikon. Не является рекламой. Источник
Другие статьи на эту тему
Другие статьи на эту тему