E-mail маркетинг для интернет?магазина. Инструкция по внедрению
Шрифт:
Кстати, никаких специальных требований здесь не предъявляется. Как и с текстами в прехедере, можно чувствовать себя довольно свободно:
Вы получили это письмо, потому что подписались на нашу рассылку, и мы предположили, что эта информация может быть для вас полезна. Если вы не хотите больше получать наши письма, то всегда можете отписаться от рассылки в один клик.
В связи с техническими особенностями – разная диагональ экрана, разные почтовые клиенты – лучше придерживаться стандартной ширины контентной части письма 600px (никаких ограничений на длину письма с технической
Все, что сверх этого размера, стоит отделить рамкой и залить фоном. Причем рамка может использоваться как еще один элемент дизайна (например, со скруглением углов или обрамлением тенью):
В качестве фона можно применить какой-нибудь фирменный цвет с сайта или неброское фоновое изображение:
Разработка шаблона
Когда общая структура рассылки ясна, пора переходить к разработке собственного решения. Этот процесс включает в себя следующие этапы:
• выбор прототипа;
• дизайн;
• верстка.
Прежде чем бросаться реализовывать свое уникальное видение дизайна рассылки, лучше посмотреть: а как это делают другие?
Подберите в своем почтовом ящике десяток писем, оформление которых вам нравится. Разберите «по косточкам» структурные элементы дизайна: как выглядит «шапка», оформлены блоки в теле письма, что включает футер?
Есть ресурсы, где представлены целые коллекции готовых шаблонов (например, themeforest.net), – побывайте и там. Иногда купить и доработать готовый шаблон быстрее и удобнее, чем разрабатывать собственный с нуля. Причем результат нисколько не хуже.
В любом случае, купите вы шаблон или нет, вам понадобятся прототипы/реальные примеры, которыми вы сможете проиллюстрировать техническое задание для дизайнера.
Да-да, пишем очередное ТЗ:-) Техническое задание на дизайн – текстовый документ, который последовательно описывает всю структуру шаблона, от прехедера до футера.
Сопровождайте описание подобранными примерами и/или собственными эскизами. Не беспокойтесь: чтобы набросать эскиз, не нужно иметь выдающиеся художественные способности. Серый прямоугольник вполне сойдет за картинку, горизонтальные черные линии – за строчки текста. Например, так можно описать «шапку» шаблона в ТЗ:
==============
• слева: логотип магазина
• справа: значок телефонного аппарата + номер +7 (777) 777–77–77
• ниже надпись: НОЯБРЬ 2014
==============
(Полный пример ТЗ на дизайн шаблона дожидается вас в приложении 5А.)
Когда дизайнер отрисует макет по ТЗ, окиньте его общим взглядом: насколько гармонично
Начните двигаться по макету сверху вниз, сверяя отдельные блоки с заданием. Иногда дизайнер может отклониться от исходной задачи в пользу своего видения (набросать дополнительный вариант). В этом случае вам предстоит решить, что лучше: предложенное решение или все-таки исходный набросок?
Даже при сверхподробном ТЗ готовый макет может не устроить вас с первого раза (почти наверняка не устроит). Как и в случае с приемкой синхронизации баз данных, составьте полный перечень правок к шаблону и только потом высылайте их дизайнеру.
Со второго захода вы получите вполне жизнеспособный вариант. Хотя, возможно, понадобится еще несколько серий правок. Если с каждым разом список исправлений не сокращается, а растет, стоит призадуматься: это дизайнер вас не понимает или вы все дальше уходите от первоначального плана?
Когда макет согласован (выслан вам в графическом формате psd, cdr и т. п.), наступает этап верстки.
Ее может выполнить тот же дизайнер – если владеет соответствующими навыками html/css. За верстку можете взяться вы сами (если умеете), а можете привлечь отдельного специалиста. Последний вариант предпочтительнее, ведь задача не самая простая.
Верстка шаблона должна быть в первую очередь кросс-e-mail. Возможно, вы слышали о кроссбраузерности – в случае с e-mail это почти то же самое, однако помимо различных браузеров шаблон должен корректно отображаться и в разных почтовых клиентах [3] :
3
Это наиболее распространенные почтовые клиенты для отечественной аудитории. Естественно, полный перечень почтовых клиентов гораздо шире, но подгонять верстку под все не обязательно (например, сколько ваших подписчиков пользуются почтой на yahoo!?).
• mail;
• yandex;
• rambler;
• gmail;
• outlook.
Верстка для e-mail отличается от традиционной верстки веб-страниц. Многие возможности css не поддерживаются почтовиками, поэтому предпочтение приходится отдавать простой табличной html-верстке.
При этом каждый почтовый клиент имеет свои особенности: например, gmail может по умолчанию не загружать картинки, а outlook разных годов выпуска по-разному трактовать, а иногда и игнорировать одни и те же html-теги. Все это нужно учитывать при верстке, «подгоняя» код под требования основных почтовых клиентов.
Помимо кросс-email верстку шаблона стоит делать также адаптивной. Все чаще почту просматривают на экранах смартфонов, диагональ которых меньше, чем у компьютеров или планшетов. Отсюда необходимость адаптировать содержание писем под меньшие размеры – путем масштабирования изображений и текстов, а также перестановки блоков местами:
Для этого при верстке шаблона прописываются дополнительные строки кода.