E-mail маркетинг для интернет?магазина. Инструкция по внедрению

• брендирует письма (все сообщения выполнены в фирменном стиле и однозначно воспринимаются пользователями);

• структурирует содержание (вместо сплошного массива слов, цифр и ссылок у нас получается внятно оформленный текст, который легче считывается и быстрее доносит информацию);

• аккумулирует трафик и заказы (за счет размещения дополнительных ссылок, ведущих в ключевые разделы сайта).

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

• выбор прототипа;

• дизайн;

• верстка.

Выбор прототипа

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

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

Дизайн

Воодушевленные примерами существующих нотификаций, приступаем к разработке собственного шаблона. Следуем уже знакомой нам четырехчастной структуре:

1. Прехедер

Думаю, вас эта новость обрадует не меньше, чем меня: у нотификаций, как правило, прехедера нет. Ничего не рисуем.

2. «Шапка»

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

Идеология дизайна нотификаций – минимализм. В первую очередь эти письма несут служебную информацию: логин, пароль, перечень товаров в заказе или его стоимость. Поэтому не стоит перегружать внимание избыточной графикой. Нотификации должны быть прозрачны для восприятия.

В связи с этим рекомендую в «шапке» использовать один только лого. В крайнем случае добавить основные контакты магазина:

3. Тело письма

Внимательно ознакомимся с контентом нотификаций, выделим его основные типы и заготовим в шаблоне соответствующие блоки:

• тексты;

• списки;

• таблицы;

• изображения.

Не забудем и про декоративные элементы:

• разделительные линейки;

• заголовки/подзаголовки;

• маркеры списка (буллиты);

• ссылки/кнопки.

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

4. Футер

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

При этом держим в уме, что письма выполняют служебную функцию и перегружать их рекламой неправильно. Чтобы ключевая информация не затерялась, дополнительные предложения не должны занимать больше 20 % объема письма.

Поскольку речь идет о стационарной информации, оптимально разместить в футере пять-шесть ссылок на основные разделы сайта. Выбирать их стоит с особой тщательностью: подумайте, какие ссылки принесут наибольшую пользу – рубрики каталога, анонсы отдельных страниц магазина?

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

• акции;

• новинки;

• хиты;

• новости;

• обратная связь.

Для наглядности сопровождаем ссылки соответствующими иконками:

Это и есть главный секрет доработки нотификаций. Есть ссылки в футере – появляется возможность быстро перейти в нужное место из письма и решить свои задачи. Нет ссылок – нет такой возможности.

Под иконками мелким шрифтом размещаем вспомогательную информацию: почему пользователь получил это письмо и каким образом оно было отправлено.

Например:

Вы получили это сообщение, потому что зарегистрировались на shop-example.ru.

Сообщение было сгенерировано сайтом автоматически.

Ссылка отписки в нотификациях НЕ требуется.

(+) Границы и фон

Завершающие штрихи дизайна шаблона – его обрамление границами и фоном.

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

Для фона используем фирменную палитру цветов (я предпочитаю неяркие оттенки). Фон наполняет пространство вокруг письма и еще больше концентрирует внимание на контентной части:

* * *

Как обычно, составляем ТЗ на дизайн с подробным описанием каждого блока. Сопровождаем его иллюстрациями из прототипов/собственными эскизами.

Пример ТЗ дожидается вас в приложении 7Б.

Поручаем отрисовку дизайнеру и принимаем готовый макет. Чтобы освежить в памяти, как это делается, пролистайте пятую главу (раздел «Разработка шаблона/Дизайн»).

Верстка

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

• кросс-e-mail;

• адаптация под мобильные устройства;

• блочная структура.

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