В этом выпуске мы расскажем, как создать письмо с нуля.
![Как сверстать письмо](https://www.unisender.com/ru/blog/wp-content/uploads/2019/03/design-and-layout__1920x565.png)
В чём особенности дизайна и вёрстки писем
Создание писем отличается от разработки сайтов и приложений. В чём проблема:
В письмах не работают многие CSS и HTML-теги. Это специальные настройки, которые отвечают за внешний вид страниц в интернете. Например, в письме не получится наложить два элемента друг на друга или добавить анимацию кнопке.
Письма открывают в разных программах. Outlook, Mail.Ru, Gmail, почта Mac — эти программы по-разному отображают письма.
Письма открывают на разных устройствах. На телефоне, планшете и компьютере разный размер экрана. Дизайнер и верстальщик должны учитывать это при создании письма.
Из-за этих особенностей даже появились отдельные профессии: email-дизайнер и email-верстальщик.
Я расскажу об основных принципах создания писем. Начнём с базовых понятий в email-дизайне.
Что нужно знать о дизайне писем
Пройдемся по основным составляющим письма:
- размеру;
- элементам;
- модулям;
- шрифтам;
- цветам.
Учитывайте области просмотра почтового сервиса при выборе размера письма
Вы никогда не узнаете, с устройства какого размера пользователи будут просматривать ваши письма. Поэтому делайте письма адаптивными.
А еще учитывайте особенности отображения писем в почтовых сервисах. Например, в Яндексе есть колонка справа, из-за которой фактическая ширина письма уменьшается и иногда появляется горизонтальная прокрутка. В Gmail такой проблемы нет.
Например, вот, как письма отображаются в Яндекс Почте.
Модули
Письма верстают таблицами. Поэтому каждый элемент занимает участок в виде прямоугольника или квадрата — это нужно учитывать ещё на этапе создания макета. Эти модули не пересекаются и редко накладываются друг на друга. Их наполнение может быть разным: текст, изображение, кнопка, GIF-анимация, ссылка.
Шрифты
В email-рассылках используют набор «безопасных» шрифтов, которые отображаются во всех браузерах и почтовых приложениях.
Если без декоративного шрифта не обойтись, то сделайте его картинкой. Этот прием подойдет для заголовков и подзаголовков, но не для целых абзацев текста: некоторые пользователи смотрят почту без картинок. Если все декоративные шрифты загнать в иллюстрации, то они откроют пустое письмо.
Цвета, общий стиль
Обычно письмо — это продолжение сайта. В нём используются те же семейства шрифтов, такие же логотипы и цветовые сочетания. Так мы сохраняем корпоративный стиль, а подписчикам проще узнать нас среди входящей почты.
Проще всего подсмотреть цвета и шрифты для рассылки в брендбуке компании. Если такого нет — можно собрать палитру цветов с сайта и перенести их в письмо. Я для этого использую расширение для Chrome Eye Dropper.
Что нельзя вставлять в письмо
Из-за особенностей вёрстки и требований почтовых провайдеров далеко не все элементы можно безболезненно вставить в письмо. Вот, например, что нельзя добавлять в рассылки:
- Одну картинку вместо полноценного письма. В email-сообщениях помимо изображений обязательно должен быть текст.
- CSS-анимацию.
- Сокращённые ссылки (например, через сервис Unisender или bit.ly).
- Формы.
- Параллаксы.
Некоторые из этих элементов не будут отображаться в рассылке. Другие могут отображаться, но при этом значительно повысят шанс рассылки на попадание в спам (сокращённые ссылки, письмо из одной картинки).
Что можно (и нужно) вставлять в письмо
- Текст, набранный одним из безопасных шрифтов. Какие шрифты использовать в рассылках.
- Картинки: PNG, JPEG, BMP. Как вставить картинку в письмо.
- GIF-анимацию. Как вставить GIF-в письмо.
- Видео. Стоит учесть, что потоковое видео поддерживают не все платформы. Обычно маркетологи вставляют картинки или GIF-анимацию с превью видео. В них уже вшивают ссылку на полную версию ролика. Как вставить видео в письмо.
- Ссылки. Их можно вшивать в текст и картинки.
С чего начать
Проще всего создать письмо в блочном редакторе. В нём можно выбрать готовый шаблон или собрать письмо из блоков с нуля. Вот, для примера, один из 100+ бесплатных шаблонов в блочном редакторе Unisender.
Собрать в блочном редакторе
Блочный редактор ускоряет сборку писем и помогает верстать email тем, кто в совершенстве не владеет HTML и CSS. Работа в таких редакторах построена по принципу «бери и тащи» — мы перетаскиваем нужные блоки в макет письма и заполняем их контентом.
Но если вы решили сделать дизайнерский макет, который после этого пойдёт в вёрстку, порядок действий будет другой. С чего начать:
Как сверстать письмо
Дизайн письма готов. Теперь его нужно переложить на HTML — специальный язык, который отвечает за внешний вид сайтов. Только в таком виде письмо можно отправить пользователям.
Я знаю 3 способа, как можно сверстать письмо. Рассказываю о каждом из них.
Вручную
Чтобы сверстать письмо вручную, нужно знать HTML и CSS. Верстают email в редакторах исходного кода: Eclipse, Visual Studio Code, Notepad++. В них мы создаём табличный макет, прописываем теги и атрибуты, адаптируем письмо под мобильные.
Плюсы | Минусы |
Можно создавать гибкие шаблоны, которые будут легко адаптироваться под устройства с разными размерами экранов. Можно сверстать сложный макет, который не всегда получится создать в блочном редакторе. |
Нужно хорошо знать HTML и CSS. Прописывать код вручную дольше, чем создавать письмо в блочном редакторе. |
В блочном редакторе
Сверстать письмо в блочном редакторе можно, например, в Unisender, Tilda или других сервисах. Подробнее о том, как работать в блочном редакторе, читайте в нашей Базе знаний. Здесь расскажем кратко:
Зарегистрируйтесь в Unisender. Перед тем, как запустить рассылку, загрузите базу подписчиков — список email-контактов, на которые вы будете слать письма.
Начните создавать email-рассылку в сервисе: пропишите адрес, с которого будете отправлять письмо, имя отправителя и тему письма. Чтобы создать письмо, заходите на страницу «Создать письмо» → «Email». Либо кликните на «Создать рассылку».
![Шаблоны писем Unisender](https://www.unisender.com/ru/blog/wp-content/uploads/2023/03/3.gif)
Наполните шаблон информацией или создайте письмо с нуля.
![Работа с шаблоном Unisender](https://www.unisender.com/ru/blog/wp-content/uploads/2023/03/unnamed.jpg 1600w, https://www.unisender.com/ru/blog/wp-content/uploads/2023/03/unnamed-1536x702.jpg 1536w)
Когда шаблон будет готов, нажмите «Сохранить», оставить новый шаблон. Либо кликните на «Продолжить». На следующих этапах нужно будет ввести тему письма и выбрать людей, которым вы хотите отправить рассылку.
![Сохранить шаблон в Unisender](https://www.unisender.com/ru/blog/wp-content/uploads/2023/03/unnamed-2-1.jpg 1600w, https://www.unisender.com/ru/blog/wp-content/uploads/2023/03/unnamed-2-1-1536x700.jpg 1536w)
Плюсы | Минусы |
Верстать письма в блочном редакторе быстрее, чем делать это вручную. Знать HTML и CSS не обязательно. В большинстве блочных редакторов можно сверстать адаптивные письма, которые будут подстраиваться под различные размеры экранов. |
Трудно сделать необычный, дизайнерский макет. |
Если думаете, как лучше отправить письмо из блочного редактора, то вот 4 простых способа это сделать.
Отдать на аутсорс
Как вариант, всю работу по дизайну и вёрстке писем можно отдать агентствам или фрилансерам. Агентства находят через поисковую выдачу, фрилансеров проще искать на специализированных сайтах (fl.ru, freelance.ru) или в соцсетях.
В чём преимущества и недостатки такого подхода:
Плюсы | Минусы |
Мы разгружаем себя или штатного маркетолога от рутинной работы. На аутсорсе можно найти узких специалистов, которые хорошо разбираются в дизайне и вёрстке писем. |
Это дороже, чем делать письмо самостоятельно — мы платим внештатным специалистам за работу. Тяжело предугадать результат работы агентства или фрилансера. |
Если не хотите рисковать с поиском агентства или фрилансера — можете обратиться к Unisender. Мы найдём эксперта, который качественно и вовремя подготовит дизайн и сверстает письмо.
Запомнить
Собрали самое важное из статьи в один чеклист.
Дизайн
Делайте письма адаптивными. Вы никогда не узнаете, с устройства какого размера пользователи будут просматривать ваши письма.
Классическое письмо состоит из прехедера, шапки, тела и подвала.
Письмо строится из модулей — прямоугольных или квадратных элементов.
Для рассылок нужно использовать шрифты, которые отображают все почтовые программы.
В письмах не работают многие CSS и HTML-теги. Учитывайте это при создании дизайна email.
Как сверстать письмо
Вручную. Подходит, если вы хорошо знаете HTML и CSS, а макет письма нельзя сверстать в блочном редакторе.
В блочном редакторе. У письма несложный макет или вам нужно сэкономить время.
Отдать на аутсорс. Подходит, если вы хотите разгрузить штатного email-маркетолога или верстальщика (или таких в компании нет).
СВЕЖИЕ СТАТЬИ
Другие материалы из этой рубрики
Не пропускайте новые статьи
Подписывайтесь на соцсети
Делимся новостями и свежими статьями, рассказываем о новинках сервиса
«Честно» — авторская рассылка от редакции Unisender
Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы и интервью с экспертами диджитала.