Разборы

Как сделать универсальный шаблон для письма

Для чего нужен. Где заказать. Как сверстать.
Зачем нужен шаблон

Шаблон — универсальный макет письма, который email-маркетологи используют для регулярных рассылок. Письма, сделанные по одному шаблону, похожи: у них одинаковая структура, отличается только контент.

Как пример — промо-письма Electronoff. Большинство из них сделаны по одному шаблону, отличается только контент.

Пример писем по шаблону
Разные письма — один шаблон

В чем польза шаблонов:

  • Экономим время. Благодаря шаблону у нас готов дизайн большинства писем, нужно только наполнить их контентом.
  • Можно использовать для разных видов рассылок. Из одного шаблона может получиться новостная, рекламная или контентная рассылка.
  • Удобно для подписчиков. Читатели знакомы со структурой рассылки и проще ориентируются в письме.

В чем недостаток шаблонов

Универсальный шаблон подойдет не для всех писем. Если нужна какая-то особенная рассылка — с другой структурой, дизайном или цветовой гаммой — от привычного шаблона лучше отказаться. Например, для тематических писем или писем по событию мы часто готовим отдельный макет. Лучше сделать новый дизайн, чем пытаться подогнать старый шаблон под новые требования.

Пример Нетологии
Пример Нетологии. В промо-рассылке и письме-напоминании используются два разных шаблона. Отличается даже футер письма

Из каких элементов состоит шаблон

Любой шаблон состоит из блоков — тематических элементов на всю ширину письма. С ними удобно работать в блочных редакторах: мы можем задать размеры каждого блока, добавить колонки и вставить любой контент.

В универсальных шаблонах мы обычно используем блоки разного типа.

Шапка письма. Часто тут расположен логотип компании и прехедер. Иногда мы добавляем контактные данные: телефон и email для связи. Как правило, шапка в письмах не меняется.

Шапка письма
Так выглядит шапка в письме STYLUS

Горизонтальный блок на всю ширину. Часто такой блок мы используем для начала письма. В нем мы размещаем горизонтальную картинку, заголовок и кнопку.

Горизонтальный блок
Пример горизонтального блока с картинкой, заголовком и кнопкой. Идет сразу после шапки

Текстовый блок. Основная часть письма — здесь мы обращаемся к подписчикам, сообщаем детали акции, делимся новостями или рассказываем, о чем будет письмо.

Текстовый блок в рассылке «Только спросить»
Текстовый блок в рассылке «Только спросить». Коротко рассказали о содержании письма

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

Предложение от SkyEng
Предложение от SkyEng. Структура из двух колонок: справа — картинка, слева — текст и кнопка

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

Картинки и текст в рассылке «Афиша. Daily»
Картинки и текст в рассылке «Афиша. Daily»
3 колонки с рекомендациями товаров
3 колонки с рекомендациями товаров

Футер — конец письма. Сюда можно вставить ссылки на соцсети, контактные данные и (обязательно!) ссылку на отписку.

Футер в письме МИФ
Футер в письме МИФ

Вот пример структурированного шаблона с разными блоками:

Заполненый шаблон с разными блоками

Как создать шаблон письма

Создание шаблона можно разбить на 2 этапа: дизайн и верстку.

Дизайн

Обычно дизайн писем разрабатывается с учетом стиля сайта. Это же правило применимо к шаблонам: пусть письмо станет для подписчиков продолжением сайта. Желательно перенести в рассылки общий стиль сайта, цвет кнопок, шрифты, иконки и другие элементы дизайна.

Сайт и письмо PichShop выполнены в одном стиле
Сайт и письмо PichShop выполнены в одном стиле

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

Когда будете заказывать шаблон, обсудите с дизайнером следующие моменты:

  • Под какие рассылки нужен шаблон: промо, контентные, новостные или дайджесты.
  • Какие блоки обязательно должны быть в письме.
  • Нужна ли отдельная версия с дизайном под мобильные.

Также шаблон можно создать самому. Здесь уже нужны базовые знания в дизайне и навыки работы в Photoshop или Figma. В блоге Unisender есть подробный гайд, как создать макет письма без дизайнера и подготовить его к вёрстке.

Вёрстка

Допустим, у нас есть макет письма в Photoshop или Figma. Теперь его нужно разобрать на составляющие: сохранить картинки, посмотреть размеры блоков и их расположение в письме.

Сверстать письмо можно вручную в HTML-редакторе или в блочных редакторах. С блочными редакторами проще: мы просто переносим блоки из макета в готовое письмо.

Полезно
как сверстать письмо С чего начать верстку письма и как сформулировать ТЗ

Расскажу, как я собираю шаблон в блочном редакторе Unisender. Если вы до этого никогда не верстали письма в этом блочном редакторе, то ловите инструкцию по работе с ним.

Шаг 1. Смотрю на структуру макета. Все картинки нужно будет вырезать и сохранить отдельно. В будущем из них мы будем собирать письмо.

Шаг 2. Сохраняю весь макет в JPEG. Иногда для одной картинки дизайнер использует несколько слоёв, как в этом примере:

Слои в Photoshop
Задний фон, текст и кнопка — отдельные слои в Photoshop

Чтобы упростить сбор письма, я сохраняю макет в JPEG и далее вырезаю из него отдельные блоки.

Сохраняю PSD-файл в JPEG
Сохраняю PSD-файл в JPEG

Шаг 3. Вырезаю картинки. Для этого я выделяю область, которая мне нужна, и нажимаю Enter. Это самый простой способ сохранить блок.

Как вырезать картинку
Выделяю и нажимаю «Enter»

Конечно, в этом примере можно сохранить каждый элемент отдельно: картинку, текст и кнопку. Тогда в блочном редакторе мы поместим изображение на задний фон, а всё остальное — на передний.

Я с осторожностью подхожу к такому методу. Всё дело в адаптации под мобильные — часто конструкция с задним и передним фоном на них разъезжается.

Макет на компьютере
Конструкция, где все элементы сохранены отдельно. На компьютере выглядит хорошо
Макет на мобильном
На мобильном такая же конструкция просто разъехалась. Выглядит неряшливо — текст на заднем фоне не читается, отступы между элементами не соблюдаются

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

Шаг 4. Создаю разметку в блочном редакторе. Смотрю на размеры различных элементов в PSD-макете и копирую их в блочный редактор. В итоге получается такая разметка:

Разметка шаблона в блочном редакторе Unisender
Разметка шаблона в блочном редакторе Unisender

Шаг 5. Наполняем шаблон текстом и картинками. В будущем его можно будет использовать для новых рассылок.