Гайды

Как создать красивое письмо. Дизайн и вёрстка

Анатомия письма. «Да» и «нет» в email-дизайне
Как сверстать письмо красивое письмо
Михаил Шумовский
обновил статью

Я никогда не занимался дизайном и вёрсткой. Я смогу создать письмо?

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

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

В чём особенности дизайна и вёрстки писем

Создание писем отличается от разработки сайтов и приложений. В чём проблема:

В письмах не работают многие CSS и HTML-теги. Это специальные настройки, которые отвечают за внешний вид страниц в интернете. Например, в письме не получится наложить два элемента друг на друга или добавить анимацию кнопке.

Письма открывают в разных программах. Outlook, Mail.Ru, Gmail, почта Mac — эти программы по-разному отображают письма.

Письма открывают на разных устройствах. На телефоне, планшете и компьютере разный размер экрана. Дизайнер и верстальщик должны учитывать это при создании письма.

Из-за этих особенностей даже появились отдельные профессии: email-дизайнер и email-верстальщик.

Я расскажу об основных принципах создания писем. Начнём с базовых понятий в email-дизайне.

Что нужно знать о дизайне писем

Пройдемся по основным составляющим письма:

  • размеру;
  • элементам;
  • модулям;
  • шрифтам;
  • цветам.

 

Учитывайте области просмотра почтового сервиса при выборе размера письма

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

А еще учитывайте особенности отображения писем в почтовых сервисах. Например, в Яндексе есть колонка справа, из-за которой фактическая ширина письма уменьшается и иногда появляется горизонтальная прокрутка. В Gmail такой проблемы нет.

Например, вот, как письма отображаются в Яндекс Почте.

отображение письма в Яндекс Почте

А так письма отображаются в Gmail.

Отображение писем в Gmail

Элементы письма

Классическое письмо состоит из прехедера (короткая полоса в начале письма), шапки, тела и футера. Всё, что снаружи этих элементов — фон.

Элементы письма

Модули

Письма верстают таблицами. Поэтому каждый элемент занимает участок в виде прямоугольника или квадрата — это нужно учитывать ещё на этапе создания макета. Эти модули не пересекаются и редко накладываются друг на друга. Их наполнение может быть разным: текст, изображение, кнопка, GIF-анимация, ссылка.

Модули в письме
Так выглядят модули в письме. Все они занимают пространство в виде квадрата или прямоугольника, чтобы верстальщику было проще уложить элементы в таблицы

Шрифты

В email-рассылках используют набор «безопасных» шрифтов, которые отображаются во всех браузерах и почтовых приложениях.

Безопасные шрифты
Безопасные шрифты

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

Цвета, общий стиль

Обычно письмо — это продолжение сайта. В нём используются те же семейства шрифтов, такие же логотипы и цветовые сочетания. Так мы сохраняем корпоративный стиль, а подписчикам проще узнать нас среди входящей почты.

Сайт и рассылка Unisender. Те же цвета, похожий стиль и шрифты
Сайт и рассылка Unisender. Те же цвета, похожий стиль и шрифты

Проще всего подсмотреть цвета и шрифты для рассылки в брендбуке компании. Если такого нет — можно собрать палитру цветов с сайта и перенести их в письмо. Я для этого использую расширение для Chrome Eye Dropper.

 

Что нельзя вставлять в письмо

Из-за особенностей вёрстки и требований почтовых провайдеров далеко не все элементы можно безболезненно вставить в письмо. Вот, например, что нельзя добавлять в рассылки:

  • Одну картинку вместо полноценного письма. В email-сообщениях помимо изображений обязательно должен быть текст.
  • CSS-анимацию.
  • Сокращённые ссылки (их можно создать с помощью специальных сервисов-сокращаторов).
  • Формы.
  • Параллаксы.

Некоторые из этих элементов не будут отображаться в рассылке. Другие могут отображаться, но при этом значительно повысят шанс рассылки на попадание в спам (сокращённые ссылки, письмо из одной картинки).

Что можно (и нужно) вставлять в письмо

С чего начать

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

Про особенности верстки мы рассказываем на примере конструктора писем в Unisender. Если у вас другой сервис рассылки, то это не проблема: блочный редактор доступен как отдельный продукт — EmailMaker. Клиенты Unisender Go, нашего сервиса транзакционных рассылок, также могут интегрировать EmailMaker со своей системой CDP / CRM / ERP.

шаблог юнисендер путешествия
Шаблон можно произвольно менять. Также в блочном редакторе можно собрать письмо с нуля

Собрать в блочном редакторе

Блочный редактор ускоряет сборку писем и помогает верстать email тем, кто в совершенстве не владеет HTML и CSS. Работа в таких редакторах построена по принципу «бери и тащи» — мы перетаскиваем нужные блоки в макет письма и заполняем их контентом.

Но если вы решили сделать дизайнерский макет, который после этого пойдёт в вёрстку, порядок действий будет другой. С чего начать:

  • Скачайте или зайдите в графический редактор: Photoshop, Figma, Sketch.
  • Набросайте примерный эскиз: как будут располагаться элементы, что это будут за элементы — текст, картинки, анимации.
  • Наполните шаблон контентом, отредактируйте расстояние между элементами.

Как сверстать письмо

Дизайн письма готов. Теперь его нужно переложить на HTML — специальный язык, который отвечает за внешний вид сайтов. Только в таком виде письмо можно отправить пользователям.

Я знаю 3 способа, как можно сверстать письмо. Рассказываю о каждом из них.

Вручную

Чтобы сверстать письмо вручную, нужно знать HTML и CSS. Верстают email в редакторах исходного кода: Eclipse, Visual Studio Code, Notepad++. В них мы создаём табличный макет, прописываем теги и атрибуты, адаптируем письмо под мобильные.

Код письма
Так выглядит код небольшого письма от PANDORA. В начале всегда приходится писать код с нуля. Дальше проще: под отдельные элементы появляются шаблоны и готовые решения
Плюсы Минусы
 

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

Можно сверстать сложный макет, который не всегда получится создать в блочном редакторе.

 

Нужно хорошо знать HTML и CSS.

Прописывать код вручную дольше, чем создавать письмо в блочном редакторе.

В блочном редакторе

Сверстать письмо в блочном редакторе можно, например, в Unisender, Tilda или других сервисах. Подробнее о том, как работать в блочном редакторе, читайте в нашей Базе знаний. Здесь расскажем кратко.

Зарегистрируйтесь в Unisender. Перед тем, как запустить рассылку, загрузите базу подписчиков — список email-контактов, на которые вы будете слать письма.

Про особенности верстки мы рассказываем на примере конструктора писем в Unisender. Если у вас другой сервис рассылки, то это не проблема: блочный редактор доступен как отдельный продукт — EmailMaker. Клиенты Unisender Go, нашего сервиса транзакционных рассылок, также могут интегрировать EmailMaker со своей системой CDP / CRM / ERP.

Начните создавать email-рассылку в сервисе: пропишите адрес, с которого будете отправлять письмо, имя отправителя и тему письма. Чтобы создать письмо, заходите на страницу «Создать письмо» → «Email». Либо кликните на «Создать рассылку».

Шаблоны писем Unisender

Наполните шаблон информацией или создайте письмо с нуля.

Работа с шаблоном Unisender
Так выглядит процесс работы над шаблоном письма в Unisender

Когда шаблон будет готов, нажмите «Сохранить», оставить новый шаблон. Либо кликните на «Продолжить». На следующих этапах нужно будет ввести тему письма и выбрать людей, которым вы хотите отправить рассылку.

Сохранить шаблон в Unisender
Плюсы Минусы
 

Верстать письма в блочном редакторе быстрее, чем делать это вручную.

Знать HTML и CSS не обязательно.

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

 

Трудно сделать необычный, дизайнерский макет.

Если думаете, как лучше отправить письмо из блочного редактора, то вот 4 простых способа это сделать.

Отдать на аутсорс

Как вариант, всю работу по дизайну и вёрстке писем можно отдать агентствам или фрилансерам. Агентства находят через поисковую выдачу, фрилансеров проще искать на специализированных сайтах (fl.ru, freelance.ru) или в соцсетях.

В чём преимущества и недостатки такого подхода:

Плюсы Минусы
 

Мы разгружаем себя или штатного маркетолога от рутинной работы.

На аутсорсе можно найти узких специалистов, которые хорошо разбираются в дизайне и вёрстке писем.

 

Это дороже, чем делать письмо самостоятельно — мы платим внештатным специалистам за работу.

Тяжело предугадать результат работы агентства или фрилансера.

Если не хотите рисковать с поиском агентства или фрилансера — можете обратиться к Unisender. Мы найдём эксперта, который качественно и вовремя подготовит дизайн и сверстает письмо.

Запомнить

Собрали самое важное из статьи в один чеклист.

Дизайн

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

Классическое письмо состоит из прехедера, шапки, тела и подвала.

Письмо строится из модулей — прямоугольных или квадратных элементов.

Для рассылок нужно использовать шрифты, которые отображают все почтовые программы.

В письмах не работают многие CSS и HTML-теги. Учитывайте это при создании дизайна email.

 

Как сверстать письмо

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

В блочном редакторе. У письма несложный макет или вам нужно сэкономить время.

Отдать на аутсорс. Подходит, если вы хотите разгрузить штатного email-маркетолога или верстальщика (или таких в компании нет).

Дизайн и верстка письма для вашей рассылки

Придумаем с нуля, подстроимся под брендбук или отрисуем по вашему макету. Верстка в блочном редакторе Unisender или HTML-шаблон.

Подробнее