HTML-шаблон письма для рассылки: что в нём нужно

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

HTML-шаблон письма для рассылки

Почему письмо — не веб-страница

Gmail, Outlook, Apple Mail и мобильные приложения показывают HTML немного по-разному, и многие из них игнорируют современный веб-код. Поэтому письма верстают по старинке:

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

Из чего состоит хорошее письмо

Прехедер: короткий текст рядом с темой во входящих. Это ваша вторая тема, не тратьте его на «Открыть в браузере».
Шапка: ваш логотип, небольшой и со ссылкой на сайт.
Заголовок и главная картинка: о чём письмо, понятно с одного взгляда.
Короткий текст: максимум два-три абзаца.
Одна главная кнопка: «Смотреть коллекцию», «Забронировать столик». Кнопка, сделанная как ссылка, работает везде.
Подвал: название компании, адрес, контакты и ссылка для отписки.

Ширина и телефоны

Стандартная ширина — около 600 пикселей: она помещается на экране компьютера и в области чтения большинства программ. На телефоне макет должен перестраиваться в одну колонку, с текстом, который удобно читать, и кнопками, по которым легко попасть пальцем. Больше половины писем открывают на телефонах, поэтому сначала проверяйте мобильную версию.

Картинки и alt-текст

Некоторые программы блокируют картинки, пока читатель их не разрешит. Пишите alt-текст для каждой картинки, чтобы письмо было понятно и без них, и никогда не размещайте важный текст только внутри картинки. Используйте только те картинки, на которые у вас есть права. Картинки загружаются в ваш сервис рассылок или на сайт, а письмо ссылается на их адреса.

Ссылка для отписки

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

Как подготовить содержание

О чём письмо и кто его получит.
Факты: цены, даты, промокоды — в точности как есть.
Куда ведёт каждая кнопка: полные адреса страниц.
Данные для подвала в точности так, как они должны выглядеть.
Цвета и стиль или письмо, которое вам нравится, как ориентир.

Проверьте перед отправкой

Отправьте письмо себе в Gmail, Outlook и на телефон. Нажмите каждую ссылку и кнопку, проверьте прехедер и посмотрите письмо с отключёнными картинками.

Коротко

Хорошее HTML-письмо сверстано таблицами со встроенными стилями, имеет ширину около 600 пикселей, перестраивается в одну колонку на телефоне, и в нём одна понятная кнопка и правильный подвал. Если хотите, чтобы его сверстали за вас, закажите HTML-письмо: вы описываете письмо, предложение и куда ведут кнопки, а получаете архив с готовым HTML и нарисованными для него картинками для импорта в Mailchimp, Brevo или другой сервис рассылок. Оплата переходит сервису только после того, как вы примете работу.