Шаблон для рассылки ускоряет работу и повышает качество оформления писем. Готовые стили заголовков, маркированные списки и линейки задают структуру, которая повторяется из письма в письмо.
С шаблонами есть 2 пути: сделать самому или написать ТЗ дизайнеру. В блоге уже есть статья про то, как сделать универсальный шаблон. Но если вы не работаете в графических редакторах или у вас нет времени, этот вариант не подойдёт.
Я расскажу о втором пути — техническом задании дизайнеру. Объясню поэтапно, как составить такое ТЗ, а в конце поделюсь готовым техническим заданием для рассылки интернет-магазина.
Работа над ТЗ будет складываться из:
Далее рассмотрим каждый этап подробнее.
Разбирать будем случай, когда мы не берём готовый шаблон из галереи сервиса рассылок или каких-то подборок. Допустим, мы хотим разработать дизайн полностью «под себя», в стиле проекта и под его задачи. Для этого обращаемся к дизайнеру — из штата нашей компании или на фрилансе.
Мы не можем просто сказать дизайнеру «нарисуй нам рассылку» и оставить прочее на его усмотрение. Если мы так поступим, конечный результат может оказаться далёк от наших ожиданий и конкретных задач рассылки.
Дизайнер не может прочитать наши мысли, он способен лишь предложить решение на поставленную задачу. И корректно поставить такую задачу нам помогает как раз формат ТЗ.
Начинаем с поиска референсов — примеров того, что нам нужно сделать. Мы создаём не первую в мире рассылку — наверняка, есть много хороших образцов дизайна, на которые можно ориентироваться.
Где искать референсы:
Ищем похожие тематики. Если мы турфирма — изучаем рассылки туров, горящих предложений, туристической информации. Если интернет-магазин — письма с товарами и акциями.
Если наша область специфическая и в ней не так много рассылок, можно обращать внимание на форматы: дайджесты, продуктовые рассылки, информацию об услугах.
Например, мы занимаемся продажей дорогостоящего медицинского оборудования клиникам. Предполагаем, что рассылка будет в формате дайджеста статей из блога. В таком случае, достаточно посмотреть на рассылки корпоративных блогов вообще, чтобы сложить представление о предполагаемом дизайне.
Подбираем референсы на свой вкус. Что нам понравилось, показалось интересным или просто соответствующим нашему контенту. При этом можно комбинировать: например, взять «шапку» из одной рассылки, подачу иллюстраций из другой, а лаконичный футер из третьей. Делаем скриншоты или сохраняем полезные ссылки.
С готовыми примерами переходим к подготовке непосредственно ТЗ.
Начать ТЗ на дизайн шаблона удобно с вводной части. Сюда мы включаем:
Ограничения, про которые не забываем, составляя этот раздел:
Почтовые приложения отображают не все шрифты. Поэтому в ТЗ предлагаем пользоваться только безопасными веб-шрифтами, которые загрузят все email-клиенты:
Ширину макета желательно удерживать в пределах 600-800px. Это общепринятый «габарит» рассылок, который хорошо поместится практически в любом почтовом клиенте. С более широкими рассылками возможны проблемы — у них часто «уезжает» вёрстка или появляется неудобная полоса горизонтальной прокрутки:
Картинками в шаблоне стоит пользоваться аккуратно. Даже в 2019-м году нет гарантии, что почтовый клиент загрузит их по умолчанию или как-нибудь не исказит. Лучше пореже пользоваться наложением изображения и текста друг на друга, так как это тоже может вызвать проблемы в почтовиках:
Переходим к описанию того, что будет содержать шаблон. Разобьём его на классические части:
Для каждой части нам понадобится прописать контент — что она будет содержать, и примерную компоновку — как это будет расположено.
Прехедер, хедер и футер — достаточно «технические» части письма, содержание которых чаще всего стандартно:
| Часть письма | Что может содержать |
| Прехедер | — Текст прехедера, дополняющий тему письма.
— Ссылка на веб-версию. — Прочие «служебные» ссылки при наличии — от ссылки на профиль подписчика до ссылки отписки. |
| Хедер | — Логотип компании.
— УТП (слоган). — Телефон, прочие контактные данные. — Режим работы. — Кнопки соцсетей. — Горизонтальное меню с разделами сайта. |
| Футер | — Кнопки соцсетей.
— Информация о компании. — Объяснение, почему пользователь получил рассылку («вы получили это письмо, потому что…»). — Ссылка отписки. — Прочие «служебные» ссылки. — Меню сайта в формате ссылок или иконок. |
Тело письма — ключевая часть, ради которой всё и затевается. Её удобно разбить на дополнительные блоки по формату контента, который в них будет. Двигаемся по шаблону сверху вниз:
Каждый блок описываем отдельно:
Контент для шаблона лучше брать не условный, а реальный — который мы будем использовать в рассылках. Можно взять текст из старых писем или попросить копирайтера написать новый. Наша задача — максимально приблизить шаблон к «боевым» условиям, в которых мы будем с ним работать.
Если размещаем статью, пусть это будет иллюстрация, заголовок и аннотация из настоящего материала в нашем блоге. Если товар, то вместо «глянцевого» изображения с фотостока куда полезнее подставить фото рядового товара из нашего каталога, написать его полное название и актуальную цену.
Когда придёт время делать рассылки, всё уже будет готово: заголовки точно встанут по размеру, а стандартные фото из каталога сложатся в красивую плитку.
Мы хотим сделать универсальный шаблон — такой, чтоб подошёл под дайджест, анонс товаров или поздравление. Поэтому нужно предусмотреть разные варианты компоновки контента: 1 столбец, 2 столбца, картинка слева и картинка справа, картинка по ширине письма.
При этом будем учитывать, что контентная часть письма не очень широкая, особо не разгуляешься. Поэтому ограничимся расположением элементов в 1-2, максимум в 3-4 столбца:
Всё, что сверх того, рискует не поместиться или выглядеть слишком мелким.
По-хорошему, расположением контента в 3-4 столбца лучше пользоваться реже — скажем, для карточек товаров. Самый «ходовой» способ расположить контент — это 1 и 2 столбца.
Зависит от дизайнера, с которым мы собираемся работать.
Если это постоянный член команды и у нас сложилось понимание на полуслове, чрезмерной детализации можно не делать. Разве что обговорить специфические моменты, связанные с email — ограничения по шрифтам, ширину макета и предпочтительную компоновку.
Если мы сотрудничаем с дизайнером на фрилансе, у нас лимит по ресурсам и времени. Лучше расписывать всё максимально подробно и дать больше референсов.
Но мы не специалисты в дизайне, поэтому легко можем что-то упустить. Я считаю, что дизайнеру всегда нужно оставлять «пространство для манёвра», предлагая выбрать из нескольких вариантов, подобрать что-то самостоятельно или предложить своё решение.
Тем не менее, основное видение шаблона должно оставаться за нами. Нам нужно понимать, что и зачем мы делаем. Пожелания дизайнеру в духе «удиви меня» или «этот шаблон должен зажечь» не принимаются ?
Будет ли в нашем ТЗ часть о мобильной версии, зависит от того, как мы собираемся верстать шаблон.
Сверстать письмо можно с помощью стандартных инструментов блочного редактора в сервисе рассылок или вручную, с помощью языков разметки. Во втором случае дизайн получится более гибкий, но и стоить будет дороже. Всё упирается в ресурсы, доступные на проекте.
Блочный редактор. Если мы верстаем в блочном редакторе, дополнительный макет для мобильной версии не нужен. Редактор адаптирует контент под смартфоны автоматически.
Ручная вёрстка. Если мы сделали выбор в пользу «кастомного» решения, то сможем управлять отображением шаблона на мобильных устройствах. Нужно предусмотреть отрисовку мобильной версии в ТЗ.
Не рассчитываем, что все решения по адаптации предложит дизайнер. Создаём отдельный раздел ТЗ, где пишем, как должны вести себя блоки с контентом при уменьшении размера экрана: где и как им перестраиваться, а где их вообще можно скрыть.
Пусть у нас будет 2 макета: шаблон для десктопа и для мобильных устройств.
Эскиз здорово упрощает жизнь дизайнеру. Чтобы создать его, не обязательно качать графические редакторы и выводить серые прямоугольники в Photoshop. Иногда трудоёмкость служит основной причиной, почему мы не делаем эскизы. Поэтому, чем проще, тем лучше.
Можно открыть Paint и набросать структуру там. Или даже сделать рисунок от руки, для чего вовсе не надо быть великим художником:
Наличие эскиза в ТЗ не обязательно. Но если мы хотим лучше передать свои ожидания от шаблона, его лучше сделать.
Когда рисовать эскиз — в начале или в конце работы над ТЗ?
Рисовать эскиз в начале или в конце работы над ТЗ — дело вкуса. Кому-то удобно сначала прикинуть блоки визуально, а затем уже сопроводить их текстовым описанием. Кому-то наоборот. А чаще всего это взаимосвязано: работа над эскизом вносит изменения в контент, а проработка контента что-то исправляет в эскизе.
В итоге получается подобный документ:
Шаблон, нарисованный по нему, может оказаться очень длинным, но это не означает, что каждое наше письмо будет выглядеть таким «полотенцем». При подготовке рассылки мы сможем выбирать: скажем, берём один блок из начала, другой из середины, добавляем подзаголовки и парочку изображений.
Просим дизайнера предоставить макет в одном из распространённых графических форматов типа PSD или скетча. Иногда макет делают в онлайн-редакторах типа Figma, тогда готовый результат — просто ссылка на проект.
Дальше остаётся перевести получившуюся графику на язык html-разметки — что, на самом деле, не такая уж ординарная задача. Но это уже совсем-совсем другой разговор ?
Делимся новостями и свежими статьями, рассказываем о новинках сервиса
Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы и интервью с экспертами диджитала.
