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

Довольно часто простое текстовое письмо выглядит скучно, однообразно и непривлекательно. В таком случае специалисты обращаются к HTML-письмам и создают яркие конвертирующие шаблоны имейлов. Если вы являетесь пользователем Snov.io, то у нас для вас отличные новости! Вы можете отправить HTML-письма с помощью нашей платформы. А сейчас давайте узнаем, как создать и отправить HTML-письмо в Snov.io.

Содержание:

  1. Создайте HTML-письмо
  2. Скопируйте и отправьте HTML-письмо с помощью Snov.io

Шаг 1. Создайте HTML-письмо

Создание HTML-письма — это кропотливая работа, которая может занимать довольно много времени. Но если вы любите сложные и интересные задачи или если вы хотите создать уникальное письмо, которое не будет похоже ни на что иное, то создание такого типа письма — именно то, что вам нужно!

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

Первое, что вам необходимо знать — любое HTML-письмо состоит из двух основных компонентов, шапки (head) и тела (body).

Шапка

В шапке указываются мета-теги и заголовок. Здесь также указывается вся основная информация, стилизированное оформление текста, а также медиа и CSS-анимация. Они находятся в тегах <head> и </head>

Пример шапки HTML-письма:

html email

  1. Элемент <!DOCTYPE> указывает на тип документа. Он дает браузерному движку информацию о том, согласно каких правил необходимо считывать HTML и CSS, чтобы правильно отобразить страницу. Несмотря на то, что некоторые почтовые клиенты (Gmail, Outlook, Yahoo! Mail) замещают код своим собственным, профессионалы рекомендуют добавлять эту часть в письма.
  2. Тег <meta http-equiv=”Content-Type” /> информирует о том, каким образом следует обрабатывать и распознавать символы в теле письма.
  3. Аттрибут “text/html” указывает на то, что строки текста распознаются как HTML.
  4.  <title></title> — это заголовок письма. Эту часть письма получатели увидят во вкладке браузера, когда откроют емейл.
  5. <meta name = ”viewport” /> служит для создания адаптивного HTML-письма. Он информирует устройство, на котором открывается письмо, о необходимом масштабе.

Тело письма

Тело письма — это главная часть имейла, в которой содержится вся необходимая получателю информация. Она находится в тегах <body> и </body> и начинается с форматирования.

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

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

Контейнер шаблона письма — это главная таблица. Ее ширина должна быть 100%. Таким образом, вы покроете все пространство письма. Специалисты рекомендуют указывать отступы (margin, padding, cell padding, cell spacing) со значением 0. Это позволит вам избежать ненужных пустых пространств внутри таблицы.

Таблица содержания письма находится внутри главной таблицы. Настраивайте ее ширину до 700 пикселей. Это значение — общепринятый стандарт, которым пользуются большинство почтовых клиентов. Сделайте выравнивание по центру.

Например:

html email

Далее в зависимости от выбранного вами шаблона, вы можете добавить текст, картинки, кнопки (CTA), а также менять цвета. Поместите каждый блок текста или элемент в отдельную ячейку и примените строчное стилизированное оформление текста.

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

html email

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

html email

Поздравляю вас! Вы создали HTML-письмо! Теперь вы можете с легкостью вставить его в свою триггерную рассылку. 

Шаг 2. Скопируйте и отправьте HTML-письмо с помощью Snov.io

В своем аккаунте Snov.io создайте триггерную рассылку. Добавьте элемент Email.

Нажмите на кнопку «Исходный код» и вставьте код своего HTML-письма в открывшееся окно.

Нажмите «Ok».

html email

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

Проверьте тестовое письмо на мобильном телефоне и на ноутбуке. Также мы советуем вам проверить его как минимум в двух разных браузерах и почтовых клиентах.

Ознакомьтесь с рекомендациями по созданию HTML-писем в этой статье.

Если у вас остались какие-то вопросы, напишите нам и мы с радостью поможем вам!

Была ли статья полезной?
2 0