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

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

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

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

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

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

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

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

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

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

Размер письма

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

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

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

Модули

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

Шрифты

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

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

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

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

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

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

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

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

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

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

• Текст, набранный одним из безопасных шрифтов. Какие шрифты использовать в рассылках.
• Картинки: PNG, JPEG, BMP. Как вставить картинку в письмо.
• GIF-анимацию. Как вставить GIF-в письмо.
• Видео. Стоит учесть, что потоковое видео поддерживают не все платформы. Обычно маркетологи вставляют картинки или GIF-анимацию с превью видео. В них уже вшивают ссылку на полную версию ролика. Как вставить видео в письмо.
• Ссылки. Их можно вшивать в текст и картинки.

С чего начать

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

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

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

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

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

Рекомендуем почитать статью, в которой мы пошагово создаём макет письма. Будет полезно, если вы до этого никогда не делали дизайн рассылок.

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

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

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

Вручную

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

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

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

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

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

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

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

Запомнить

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

Обновлено 31 марта 2023 г.