Практичный email [CRM] маркетинг

В прошлый раз мы рассматривали очередной сегмент подписной базы — «почти лучшие». Сегодня у нас будет вёрстка email рассылок.

Впрочем, в пучины div-ов и span-ов заныривать глубоко не будем (для желающих есть вот такая статья на Хабре). А коснёмся основных моментов, которые нужно знать маркетологу, чтобы разработать внятный email шаблон и начать им пользоваться.

 

Требования к вёрстке рассылок

Предположим, у вас на руках появился макет шаблона для рассылки в одном из графических форматов (обычно в PSD), выполненный с соблюдением всех принципов дизайна email.

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

• Вёрстка рассылок должна корректно отображаться
в разных почтовиках

Это требование аналогично кроссбраузерности веб-страниц: свёрстанное письмо должно одинаково хорошо выглядеть в ящиках всех распространённых почтовых сервисов/клиентов.

Для отечественной аудитории это как правило: Mail, Yandex, Gmail, Rambler и Outlook (разных годов выпуска).

Чтобы выяснить это точнее, можно провести небольшое исследование собственной базы — с помощью таблицы Excel или встроенных возможностей рассылочных сервисов:

100% идеального отображения везде вряд ли удастся достичь, но если у вас база b2b и половина подписчиков использует Outlook, нужно уделить ему особенное внимание при вёрстке.

В целом, стоит стремиться к качественному отображению вёрстки в основных почтовиках, и приемлемому — во всех остальных (например, в такой относительной экзотике, как Thunderbird или The Bat!).

 

• Вёрстка рассылок должна корректно отображаться
на мобильных устройствах

Здесь та же аналогия с веб-страницами. По сути, рассылка и есть почти полноценная страница, которая должна адаптироваться под различные устройства.

Ширина контентной части 600px решает большинство вопросов с ноутбуками и планшетами. Но для смартфонов письмо должно уметь становиться более компактным:

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

 

• Вёрстка рассылок должна корректно отображаться без картинок

Это становится редкостью, но, тем не менее, имеет место быть. Настройки почтовиков позволяют открывать письма, не загружая картинок. Кое-где (например, в Outlook) такая настройка выставлена по умолчанию. В других почтовиках отключить показ изображений может сам пользователь.

Поэтому при вёрстке email необходимо учитывать, как будет смотреться письмо без изображений.

Как минимум, для значимых картинок нужно прописывать alt-текст. Неплохо при этом использовать стили для «подложек» изображений:

Незначимые картинки в незагруженном виде можно полностью скрывать,
а крупные — масштабировать:

Наконец, верстать письмо сплошными картинками — дурной тон.
Конечно, так проще передать все красивости дизайна, но тогда нужно быть готовым и к такому повороту:

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

 

• Вёрстка рассылок должна быть выполнена независимыми блоками

Это требование вытекает из особенностей работы с шаблоном рассылки, как с конструктором, каждый «кубик» которого можно передвинуть или удалить.

Некорректно выполненная вёрстка не позволяет этого, чрезмерно «склеивая кубики» между собой. Тогда сдвиг одного «кубика» потащит за собой и другие части шаблона:

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

Для удобства каждый обособленный блок вёрстки снабжается соответствующими примечаниями в коде, обозначающими его
начало и конец:

Тогда редактировать шаблон, перетасовывая, дублируя и вычищая блоки, будет несложно.

 

Задача верстальщику

Теперь, когда общие представления о вёрстке рассылок сложились,
пора приступать к делу. Если вам знакомы html/css и вы располагаете достаточным количеством времени (для первого опыта смело закладывайте часов 10), можете дерзнуть и заняться кодом самостоятельно.

Во всех прочих случаях рекомендую обратиться к верстальщику.
Благо вёрстка рассылок сейчас не такая редкость, как несколько лет назад, и за 10-15$ в час вы найдёте себе подходящего специалиста:

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

Пример ТЗ на вёрстку есть в моей книге «E-mail маркетинг для интернет-магазина», которая во многом и послужила основой для этой статьи. См. Приложение 5Б.

 

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

 

Вёрстка рассылок и сервисы

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

Основные способы сделать это:

• Вставить шаблон html-кодом

Многие сервисы поддерживают такую возможность:

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

В этом случае для каждой рассылки на основе шаблона нужно привлекать верстальщика или как минимум человека с хорошим знанием html/css. Не всегда есть такие ресурсы.

 

• Вставить шаблон в html-редактор

У многих сервисов есть и другая опция — html-редактор, который позволяет работать с кодом через пользовательский интерфейс:

Можно вставлять картинки с alt, прописывать ссылки с title, менять форматирование текстов (шрифт, размер, цвет) с помощью соответствующих инструментов редактора.

Преимущества такого подхода: вносить правки в шаблон сможет менее подготовленный пользователь. Недостаток: меньшая гибкость.
Всё же без корректировки на уровне тегов какие-то тонкие вещи поменять в шаблоне не получится. Придётся близко придерживаться исходной вёрстки.

Однако во многом эту проблему снимают Drag&Drop редакторы, которыми всё чаще обзаводятся рассылочные сервисы. Это аналоги html-редакторов, но с возможностью оперировать сразу целыми блоками контента и менять в них основные настройки: выравнивание, отступы, количество столбцов и т.д.

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

Если вы предполагаете пользоваться Drag&Drop изначально, предупредите об этом верстальщика. Возможно, ему сразу нужно поставить задачу сверстать шаблон под редактор конкретного сервиса.

 

Тестирование

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

Для тестирования стоит завести ящики во всех перечисленных почтовиках: Mail, Yandex, Gmail… Хорошо бы иметь в своём распоряжении пару смартфонов с iOS и Android (привлечь к тесту коллег и друзей).

После отправки писем по списку тестовых адресов, убеждаемся, что вёрстка отображается корректно с картинками и без, в разных почтовиках и на разных устройствах.

Упростить задачу может специальный тестировочный сервис
Litmus.com, который покажет, как смотрится вёрстка в разных ящиках
в едином отчёте:

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

Скорее всего, с первого раза шаблон не выдержит испытание всеми почтовыми клиентами. На какие-то недостатки можно закрыть глаза (особенно в таких «вредных» штуках, как Outlook), серьёзные огрехи исправить.

Тестировать шаблон необходимо «до победного». Очень важно, чтобы вёрстка была выполнена качественно. Тогда и письма, собранные на основе шаблона, автоматически будут удовлетворять тем же требованиям.

 

Заключение

Вёрстка email рассылок требует определённой дотошности — в конце концов, она должна выглядеть одинаково хорошо в десятке разных почтовых сервисов и устройств.

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

Особое внимание нужно уделить тестированию готового шаблона, не поленившись просмотреть его в разных почтовиках и на разных устройствах (как альтернатива, использовать тестировочный
сервис Litmus).

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

 

[В следующий раз поговорим об аналитике email рассылок —
для чего и как учитывать прирост базы подписчиков →]

P.S. Вы находите материалы Email-practice полезными?
Тогда читайте мою книгу «E-mail маркетинг для интернет-магазина»!

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