При этом каждый почтовый клиент имеет свои особенности: например, gmail может по умолчанию не загружать картинки, а outlook разных годов выпуска по-разному трактовать, а иногда и игнорировать одни и те же html-теги. Все это нужно учитывать при верстке, «подгоняя» код под требования основных почтовых клиентов.
Помимо кросс-email верстку шаблона стоит делать также адаптивной. Все чаще почту просматривают на экранах смартфонов, диагональ которых меньше, чем у компьютеров или планшетов. Отсюда необходимость адаптировать содержание писем под меньшие размеры – путем масштабирования изображений и текстов, а также перестановки блоков местами:
Для этого при верстке шаблона прописываются дополнительные строки кода.
Наконец, шаблон желательно верстать блоками, то есть таким образом, чтобы его можно было легко переделывать в конкретные письма – с помощью копирования, перестановки и удаления отдельных частей. Каждый блок шаблона (например, с текстом или картинкой) в таком случае стоит делать независимым, так, чтобы его изменение не сказалось на остальных частях. А чтобы его удобно было находить в коде, начало и конец блока необходимо отмечать соответствующими комментариями:
Чтобы учесть все эти нюансы, хорошо, если вы составите отдельное задание на верстку шаблона, где укажете все требования (кросс-e-mail, адаптивность и блочную структуру), а также снабдите задачу необходимыми пояснениями и примерами. Образец ТЗ на верстку вы найдете в приложении 5Б.
Если вы работаете с покупным шаблоном, задача несколько упрощается: как правило, он уже сверстан под e-mail и мобильные устройства. Остается вставить туда свои картинки и тексты, а также внести прочие мелкие изменения, подгоняя шаблон под новый дизайн, но не меняя базовых вещей в коде.
Готовую верстку необходимо внедрить в рассылочный сервис. Обычно сервисы предоставляют возможность импорта шаблона кодом. Но некоторые снабжены также особенными блочными html-редакторами (например, такой редактор есть в MailChimp). Они позволяют создавать и перемещать части письма посредством пользовательского интерфейса.
Тогда шаблон стоит внедрять в сервис с учетом особенностей редактора: предоставить верстальщику доступ к аккаунту, а в задании указать соответствующее требование – верстка шаблона под конкретный рассылочный сервис.
Во время приемки верстку необходимо прогнать через все основные почтовые клиенты и устройства (смартфоны и планшеты с iOS и Android). Задачу упрощают специальные тестировочные сервисы: например, для проверки кросс-e-mail – litmus.com, для проверки адаптивности – viewlike.us.
Если в процессе тестирования выявлены недостатки, составьте их полный перечень и перешлите верстальщику на исправление в обычном порядке. Добиться корректного отображения верстки в разных почтовых клиентах/на разных устройствах очень важно. Если не решить эту задачу на этапе разработки шаблона, ее придется решать снова и снова – во время подготовки каждой отдельной e-mail кампании.
Процесс подготовки письма
С готовым шаблоном уже можно подумать и над порядком подготовки каждого отдельно взятого письма. E-mail рассылка – это повторяющийся процесс, в котором угадывается определенная последовательность действий:
• выбор состава/темы письма;
• подготовка контента;
• верстка;
• отладка и запуск.
Пока рассмотрим каждый этап без привязки к исполнителям. О том, как можно распределить работу, поговорим чуть позже, в финальной части главы.
Состав письма
Подготовка каждой рассылки начинается с ответа на вопрос: о чем будет это письмо? Унас уже есть перечень контента, остается только выбрать, что из него подойдет на этой неделе. Например: анонс текущей акции и подборка хитов.
Решение нужно принять минимум за три дня до рассылки. Если вы планируете отправку в среду, хорошо бы уже в понедельник определиться с содержанием выпуска (а еще лучше – в предыдущую пятницу).
Выбор состава письма – исходная точка в процессе подготовки рассылки. Без этого шага задача просто не сдвинется с места. Поэтому важно делать его вовремя, иначе поедут сроки и письмо придется подготавливать в спешке, с ущербом для качества.
Подготовка контента
На основе состава письма создается его конкретное содержание. Если это анонс акции, для него составляется текст. Если подборка товаров – подготавливается их описание и ссылки на соответствующие страницы.
Контент можно готовить в текстовом файле. Картинки подбираются отдельно и нарезаются/масштабируются в размер, предусмотренный шаблоном (например, баннер 600×250px, фото товара 250×250px и т. д.).
На это стоит отводить целый день. Если состав письма определен в понедельник, то само письмо нужно написать до вторника. Если какие-то материалы к письму запаздывают (например, баннер акции будет готов только в среду), можно добавить их задним числом, а пока просто зарезервировать для них место в шаблоне.
Верстка письма
У нас есть функциональный шаблон, внедренный в рассылочный сервис. Остается только вставить в него подготовленные материалы:
• подгоняем компоновку шаблона под текущий состав письма (например, выстраиваем следующую последовательность блоков: баннер/текст/товары в два и три столбца/картинка справа; лишние блоки убираем);
• вставляем подготовленные картинки в нужные места;
• вставляем тексты: заголовки, анонсы, описания товаров, цены, скидки и проч.;
• вставляем ссылки.
Все эти операции можно выполнить с помощью графического редактора рассылочного сервиса. Залезать в код шаблона почти не понадобится, но все же лучше знать основы html для более тонкой доводки письма.
На верстку письма отводим полдня – скажем, до полудня среды.
Отладка и запуск рассылки
После того как письмо готово, не спешим нажимать кнопочку «Отправить». Проделанная работа еще требует проверки.
Откройте письмо в браузере (рассылочный сервис предоставляет такую возможность). Окиньте его взглядом в целом. Начните просматривать сверху вниз. Вычитывайте тексты на предмет их благозвучности и грамотности. Прощелкайте все ссылки, убедитесь, что они ведут туда, куда нужно.
Создайте отдельный список e-mail адресов. Включите в него свои ящики на самых распространенных почтовых клиентах. Отправьте кампанию по этому списку. Просматривая письмо непосредственно в почте, проверьте, нет ли опечаток в теме (subject line), прописан ли текст в прехедере, не разваливается ли верстка (при подстановке контента в шаблон всегда можно что-то случайно поломать), есть ли в ссылках utm-метки для аналитики (если планировали добавить).
