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

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

Вы всегда можете отписаться от нашей рассылки в один клик.

© 2014 Shop-example

Б: ТЗ на верстку e-mail шаблона

Сверстать e-mail шаблон для массовой рассылки интернет-магазина.

1. Скачать исходник в PSD: ссылка на скачивание макета

2. Сверстать шаблон:

• Верстка нужна кросс-e-mail: чтобы корректно отображалась в распространенных почтовых клиентах (gmail, outlook, mail, yandex, rambler).

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

• «Шапка» становится ýже (лого ближе к телефону и дате).

• Баннер масштабируется.

• Текст масштабируется.

• Заголовок раздела масштабируется.

• Блок 4‑го товара перестраивается в 2 строчки по 2 товара.

• Блок 3‑го товара перестраивается в 3 строчки по 1 товару.

• Блок 2‑го товара перестраивается в 2 строчки по 1 товару.

• Блоки картинка слева и справа становятся ýже (ширина текста уменьшается).

• Маркированный список масштабируется.

• Верхняя часть футера перестраивается в 2 строчки по 2 столбца.

• Текст в нижней части футера масштабируется.

• Верстка нужна блочная: добавить в код комментарии, отмечающие начало и конец каждого блока:

3. В результате предоставить html-файл шаблона (картинки залить на сервер).

Материалы по теме

• Статья про верстку для e-mail: ссылка на статью.

• Статья про адаптивную верстку: ссылка на статью.

• Пример верстки шаблона (кросс-e-mail, адаптивный): ссылка на шаблон.

• Сервис для проверки верстки на разных устройствах: http://viewlike.us.

• Сервис для проверки верстки в разных почтовых клиентах/на разных устройствах:

https://litmus.com.

В: Чек-лист на подготовку рассылки

1. Получить информацию о тематике рассылки и товарах (набор ссылок) от руководителя.

2. Определить компоновку письма.

3. Скопировать одно из предыдущих писем (наиболее подходящее) и подогнать компоновку под текущее письмо.

4. Написать тексты для письма (черновик).

5. «Нарезать» картинки в размер.

6. Вставить тексты в письмо.

7. Вставить картинки в письмо (баннер, фото товаров, кнопки) и прописать ALT-тексты.

8. Вставить ссылки и прописать TITLE.

9. Доработать тексты (вступление, заголовки, P.S.).

10. Прописать PREHEADER.

11. Просмотреть письмо в браузере:

• вычитать тексты;

• прощелкать ссылки;

• проверить TITLE.

12. Отправить на тестовые ящики:

• вычитать тему и PREHEADER;

• проверить ALT (отображение без картинок);

• проверить корректность верстки (особенно в OUTLOOK!).

13. При необходимости внести правки и повторить тесты.

14. Согласовать письмо с руководителем.

15. Сгенерировать TXT-версию.

16. Проверить список (сегмент) для отправки и UTM-метку.

17. Поставить рассылку в расписание на отправку.

18. Проконтролировать отправку и внести данные в таблицу статистики рассылок.

19. Через неделю замерить результат.

Приложение 6 Примеры автоматических писем

А: Бонус за подписку

Б: Напоминание о бонусе

В: Welcome e-mail

Г: Запрос отзыва

Д: Стимулирование 2‑го заказа

Приложение 7 Пример доработки нотификаций

А: Перечень нотификаций

Б: ТЗ на дизайн шаблона нотификаций

Задача

Разработать дизайн для автоматических писем shop-example.ru: новая учетная запись, напоминание пароля и т. п.

Материалы

• Сайт магазина: ссылка на интернет-магазин.

• Бренд-бук shop-example: ссылка на скачивание бренд-бука.

• Шаблон для массовой рассылки: ссылка на скачивание шаблона.

Общие требования

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

• Фон снаружи письма: светло-серый.

• Фон тела письма: белый.

• Рамка вокруг письма: тонкие серые линии, по углам скругление.

• Ширина письма: 600px.

• В результате предоставить исходники шаблонов в PSD.

Эскиз

1. «Шапка»

• Слева логотип магазина.

• Справа телефонная трубка и номер телефона + время работы:

[phone]

пн. – пт. с 10:00 до 19:00

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

• Заголовок: Здравствуйте, {Имя}!

• Горизонтальная серая линия.

• Текст:

Добро пожаловать на сайт «Shop-example». Для входа в свою учетную запись на сайте просто нажмите Войти или Моя учетная запись вверху справа на любой странице и введите адрес своей электронной почты (e-mail) и пароль.

• Блок с логином и паролем.

• Обрамление блока рамкой с тонкими серыми границами.

• Заливка фоном – таким же, как вокруг письма, или подобрать другой, но неяркий.

• Текст в рамке:

Данные для авторизации на сайте:

E-mail: testmail @ yandex. ru

Пароль: 123456

• Текст с маркированным списком (буллиты подобрать красивые, в цвете сайта):

• Добро пожаловать на сайт «Shop-Example».

• Для входа в свою учетную запись на сайте просто нажмите Войти или Моя учетная запись.

• Введите адрес своей электронной почты (e-mail) и пароль.

• Подзаголовок: Ваш заказ #000000000 (создан 11 апреля 2014 г. 12:06:55 MSK)

• 5 блоков с данными о заказе.

• Блоки 1–2 в один ряд, блоки 3–4 в один ряд, блок 5 по всей ширине.

• Блоки в рамках, залиты фоном, фон подзаголовков сделать темнее.

• Блок 1

Подзаголовок: Информация о плательщике

Текст:

Имя Фамилия

Город

Адрес

Страна

Тел.: [phone]

• Блок 2

Подзаголовок: Метод оплаты

Текст:

Метод оплаты | Ссылка на оплату