menu

Как отправить HTML-письмо: 4 простых способа

Создаём и отправляем письмо без знания HTML

Все email-письма можно разделить на два вида: Plain Text и HTML. Первые вы видели и писали много раз — это обычное текстовое сообщение, в котором можно выбрать шрифт или вставить гиперссылки. HTML-письма часто отправляют бренды: в них много картинок, есть кнопки, макет часто разделен на несколько колонок.

plain text
Plain text письмо
html
HTML-письмо

Кажется, что для создания HTML-писем нужно быть верстальщиком 80-го уровня. Но это не так: создать красивое письмо можно совсем без знаний в дизайне и верстке.

Я расскажу, как подготовить шаблон email и отправить его — через сервис рассылок или обычную почту.

Как создать HTML-письмо

Задизайнить и сверстать письмо можно четырьмя способами.

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

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

Плюсы HTML-верстки в блочном редакторе Минусы HTML-верстки в блочном редакторе
+ не требует знаний HTML и CSS

+ большой выбор редакторов

+ в каждом редакторе доступна база готовых шаблонов, на основе которых можно сверстать свое письмо

— в некоторых блочных редакторах ограничена настройка адаптивности писем

— при создании писем вы ограничены элементами и структурой, которые доступны в редакторе

Как создать HTML-письмо в блочном редакторе

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

Предлагаю создать HTML-письмо на основе готового шаблона в редакторе UniSender:

1. Зарегистрируйтесь в UniSender. 

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

загрузите базу подписчиков

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

Начните создавать email-рассылку в сервисе

4. Выберите пункт «Блочный редактор». Вы также можете сверстать письмо на основе шаблонов писем, выбрав пункт «Шаблоны».

4. Выберите пункт «Блочный редактор». Вы также можете сверстать письмо на основе шаблонов писем, выбрав пункт «Шаблоны».

5. Выберите «Заполненный шаблон» — так будет легче сверстать письмо. В этот шаблон можно подставить любой текст, картинки или кнопку. Для этого перетаскивайте нужный блок из левой панели в макет письма, а затем кастомизируйте его.

Как отправить HTML-письмо: 4 простых способа 7
Базовый шаблон подойдет для писем с анонсами распродаж и поступления новых товаров. Нижний блок можно адаптировать под дайджест материалов медиа или статей в блоге

6. Сохраните шаблон и нажмите «Продолжить». В открывшемся окне можно будет отредактировать шаблон или изменить параметры рассылки. Также сервис покажет вес письма (чем меньше, тем лучше), и предложит отправить пробное.

В HTML-редакторе встроена проверка шаблона. Я прикрепил несуществующую ссылку к кнопке покупки телефона и мне сразу выдало ошибку
В HTML-редакторе встроена проверка шаблона. Я прикрепил несуществующую ссылку к кнопке покупки телефона и мне сразу выдало ошибку

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

В визуальном редакторе

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

Для работы в визуальном редакторе нужно хорошо знать HTML, поэтому большинство современных сервисов идут в формате «2 в 1»: одновременно блочный и визуальный редактор. Это такие редакторы как BEE и mailmalade.

Визуальный HTML-редактор mailmalade
Визуальный HTML-редактор mailmalade
Плюсы HTML-верстки в визуальном редакторе Минусы HTML-верстки в визуальном редакторе
+ если неправильно поставили тег, это сразу будет видно в окне просмотра

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

— нужно знать HTML и CSS

— малый выбор визуальных редакторов: большинство идут в связке с блочным

В редакторе первичного кода

В редакторах типа Sublime Text 3 и Visual Studio Code вы вручную прописываете HTML-код, который потом загружаете в сервис email-рассылок или почтовое приложение. Смотреть, как выглядит письмо, приходится в отдельной вкладке браузера, куда вы заливаете HTML-код.

Теперь понимаете, почему я советую Visual Studio Code опытным верстальщикам?
Теперь понимаете, почему я советую Visual Studio Code опытным верстальщикам?
Плюсы HTML-верстки в редакторе первичного кода Минусы HTML-верстки в редакторе первичного кода
+ нет ограничений по структуре и формату письма

+ доступны встроенные инструменты для упрощения работы над кодом

+ можно скопировать HTML-код любого письма и создать на его основе собственное

— подходит только для опытных верстальщиков

— нельзя сразу в редакторе первичного кода посмотреть, как будет выглядеть письмо на мобильных или ПК

Заказать на аутсорсе 

HTML-письмо сверстает фрилансер, сервис email-рассылок или веб-студия. Вы получите адаптивный шаблон, который будет отвечать брендбуку компании. Это может быть универсальное письмо, email под конкретную акцию или welcome-серия.

Заказать верстку письма можно:

В сервисе рассылок. Например, в UniSender создадут HTML-письмо за $125.

У веб-студии. Стоимость шаблона HTML-письма в веб-студии или агентстве email-маркетинга начинается со $100. 

У фрилансера на надежной бирже — например, на Freelancehunt.

Плюсы верстки на аутсорсе Минусы верстки на аутсорсе
+ не тратите время на верстку письма

+ несложно найти исполнителя — в сервисе, через который вы делаете рассылку, будет дополнительная услуга «Разработать HTML-письмо»

+ получите готовое письмо через 2-4 дня

— во многом результат верстки зависит от того, насколько подробно вы заполните бриф 

— нужно платить за каждый отдельный вариант письма

— мало веб-студий, которые занимаются HTML-письмами

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

Когда письмо готово, его нужно отправить. Расскажу, как сделать это через сервис рассылки или вручную через почтовики Gmail, Mail.ru, Yandex и Outlook.

Отправляем через сервис рассылки

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

Если верстали во внешнем блочном редакторе

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

1. Экспортируйте HTML-письмо в UniSender. Например, на бесплатном тарифе Stripo доступно 4 экспорта в месяц.

перенос из Stripo

2. Введите имя аккаунта и API key. Ключ API можно найти в профиле UniSender. Он доступен в Личном кабинет по вкладке «Интеграция и API».

Введите имя аккаунта и API key

3. Переходим в UniSender. Найдите HTML-письмо в меню «Рассылки»/«Мои шаблоны». Оно появится сразу же после экспорта.

Переходим в UniSender

4. Проверьте письмо перед запуском. На этом этапе в HTML-редакторе UniSender можно исправить опечатки, изменить форматирование и добавить картинки. Если результат нравится — сохраните изменения.

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

Создайте рассылку в личном кабинете

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

Если создавали письмо в редакторе первичного кода

Если вы верстали письмо в редакторе первичного кода, его также можно отправить через сервис рассылок. Расскажу на примере Visual Studio Code, что делать, если у вас уже есть HTML-код письма и вы хотите вставить его в сервис рассылки.

Сохраните письмо в формате HTML.

Сохраните письмо в формате HTML

В UniSender создайте новую рассылку и выберите пункт «HTML-редактор».

В UniSender создайте новую рассылку и выберите пункт «HTML-редактор».

В открывшемся окне редактора нажмите «Загрузка из файла». Выберите HTML-файл, который вы сохранили ранее в Visual Studio Code, и загрузите его.

В открывшемся окне редактора нажмите «Загрузка из файла». Выберите HTML-файл, который вы сохранили ранее в Visual Studio Code, и загрузите его.

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

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

Отправляем вручную в почтовике

Чтобы отправить письмо, вам надо иметь его готовый HTML-код. Как получить код, мы рассказали в предыдущих пунктах. Если у вас готов HTML-код письма, выберите, через какую почтовую программу вы будете его отправлять. Лучше использовать ту почту, которой вы обычно пользуетесь.

Дальше надо просто вставить код письма в почтовик и отправить. Расскажем, как это сделать в разных программах.

В Gmail

Чтобы залить HTML-письмо в Gmail вручную, нужно:

1. Создайте новое письмо. Кликните по полю для текста сообщения правой кнопкой мыши и выберите «Проверить».

Создайте новое письмо

2. Подсвеченный синим блок — это код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».

Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».

3. Удалите фрагмент <br> и вставьте вместо него HTML-код письма. Как только закроете окно консоли, письмо отобразится в поле текста Gmail.

Удалите фрагмент и вставьте вместо него HTML-код письма.

4. Добавьте получателя и введите тему письма. 

5. Отправьте тестовое письмо, чтобы проверить его на ошибки. Например, если вы забудете проставить ссылки на изображение в HTML-шаблоне, при просмотре в Gmail в углу картинки появится кнопка «Скачать».

6. Если с тестовым письмом все ок, отправляем боевую рассылку.

В Mail.ru

Чтобы залить HTML-письмо в Mail.ru вручную, нужно:

1. Создайте новое письмо. Кликните по полю для текста сообщения правой кнопкой мыши и выберите «Проверить».

В Mail.ru Чтобы залить HTML-письмо в Mail.ru вручную, нужно: Создайте новое письмо. Кликните по полю для текста сообщения правой кнопкой мыши и выберите «Проверить».

2. Подсвеченная синим строчка — это код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».

Подсвеченная синим строчка — это код поля для текста письма

3. Удалите фрагмент <br> и вставьте вместо него HTML-код письма. Как только закроете окно консоли, письмо отобразится в поле текста Mail.ru.

Удалите фрагмент и вставьте вместо него HTML-код письма. Как только закроете окно консоли, письмо отобразится в поле текста Mail.ru.

4. Добавьте получателя и введите тему письма. 

5. Отправьте тестовое письмо, чтобы проверить его на ошибки.

6. Если с тестовым письмом все ок, отправляем боевую рассылку.

В Yandex

Чтобы залить HTML-письмо в «Яндекс.Почту» вручную, нужно:

1. Включите панель оформления. По умолчанию в интерфейсе «Яндекс. Почты» эта панель отключена, а значит вы не сможете вставить HTML-код.

Как отправить HTML-письмо: 4 простых способа 24

2. Создайте новое письмо. Кликните по полю для текста сообщения правой кнопкой мыши и выберите «Проверить».

Создайте новое письмо

3. Подсвеченная синим строчка — это код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».

Подсвеченная синим строчка — это код поля для текста письма

4. Удалите фрагмент <br> и вставьте вместо него HTML-код письма. Как только закроете окно консоли, письмо отобразится в поле текста Yandex.

Удалите фрагмент и вставьте вместо него HTML-код письма

5. Отредактируйте HTML-шаблон. В нём может слететь форматирование: появиться лишние отступы или пустые строчки.

6. Добавьте получателя и введите тему письма. 

7. Отправьте тестовое письмо, чтобы проверить его на ошибки. Если с тестовым письмом все ок, отправляем боевую рассылку.

В Outlook

Чтобы залить HTML-письмо в Outlook вручную, нужно:

1. Создайте новое письмо. Кликните по полю для текста сообщения правой кнопкой мыши и выберите «Проверить».

Создайте новое письмо

2. Подсвеченный синим блок — код поля для текста письма. Кликните по нему правой кнопкой мыши и выберите «Редактировать как HTML».

Подсвеченный синим блок — код поля для текста письма

3. Удалите фрагмент <br> и вставьте вместо него HTML-код письма. Как только закроете окно консоли, письмо отобразится в поле текста Outlook.

Удалите фрагмент и вставьте вместо него HTML-код письма

4. Проверьте шаблон: все ли картинки отображаются, не слетело ли оформление. 

5. Добавьте получателя и введите тему письма. 

6. Отправьте тестовое письмо, чтобы проверить его на ошибки. Если с тестовым письмом все ок, отправляем боевую рассылку.

Итого

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

Удобнее верстать письмо во встроенном редакторе сервиса рассылки или редакторе, у которого интеграция с этим сервисом. 

Работа в визуальном редакторе понравится пользователям, которые почитали про HTML-верстку и создали с десяток писем в блочном редакторе. 

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

Если привыкли работать в конкретном редакторе — верстайте письмо в нем, сохраняйте отдельным файлом и импортируйте в сервис рассылок.

Отправить HTML-письмо вручную можно в любом почтовике. Удобнее всего это сделать в Gmail, а вот в «Яндекс.почте» придется сначала включить панель оформления. Также в «Яндекс. почте» может слететь верстка или не загрузиться картинки.

«Пиши, отправляй. Как писать тексты для email-рассылок»

Подпишитесь на рассылку и получите электронную книгу

Нажимая кнопку «Получить книгу», вы даете согласие на обработку персональных данных.