Отправка html email: Как отправить HTML письмо? — Хабр Q&A — Независимое театральное объединение "Зрительские симпатии"

Содержание

Как отправить HTML-письмо: 4 простых способа | Блог UniSender

Советы

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

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

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

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

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

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

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

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

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

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

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

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

Итого

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

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

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

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

Плюсы HTML-вёрстки в блочном редакторе

Минусы HTML-вёрстки в блочном редакторе

+ не требует знаний HTML и CSS

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

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

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

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

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

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

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

4. Наполните шаблон информацией или создайте письмо с нуля. О том, как работать в блочном редакторе, можно подробно прочитать в нашей Базе знаний.

5. Когда шаблон будет готов, нажмите «Сохранить». На следующих этапах нужно будет ввести тему письма и выбрать людей, которым вы хотите отправить рассылку.

6. Отправьте письмо через сервис рассылок. На последнем этапе вы можете посмотреть, как письмо будет выглядеть в почтовиках, привязать вашу Google Analytics и настроить отложенную отправку.

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

В блочном редакторе вы собираете письмо из отдельных блоков и в отдельном окне можете посмотреть HTML-код всего письма.

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

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

Плюсы HTML-вёрстки в визуальном редакторе	Минусы HTML-вёрстки в визуальном редакторе
+ если неправильно поставили тег, это сразу будет видно в окне просмотра + в большинство блочных редакторов уже встроены визуальные редакторы. Между ними можно переключаться	— нужно знать HTML и CSS — малый выбор визуальных редакторов: большинство идут в связке с блочным

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

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

Плюсы HTML-вёрстки в редакторе первичного кода

Минусы HTML-вёрстки в редакторе первичного кода

+ нет ограничений по структуре и формату письма

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

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

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

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

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

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

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

В сервисе рассылок. Например, в Unisender создадут HTML-шаблона за 4640 ₽.

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

У фрилансера на надёжной бирже — например, на одной из этих.

Плюсы вёрстки на аутсорсе

Минусы вёрстки на аутсорсе

+ не тратите время на вёрстку письма

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

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

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

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

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

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

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

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

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

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

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

1. Экспортируйте HTML-письмо в Unisender.

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

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

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

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

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

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

Все инструменты для работы с рассылками в одном сервисе. До 1500 писем в месяц — бесплатно.

Попробовать

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

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

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

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

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

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

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

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

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

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

В Gmail

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

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

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

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

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

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

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

В Mail.ru

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

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

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

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

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

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

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

В Yandex

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

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

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

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

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

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

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

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

В Outlook

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

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

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

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

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

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

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

Итого

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

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

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

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

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

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

Обновлено 21 июля 2022 г.

Другие материалы по теме

СВЕЖИЕ СТАТЬИ

Другие материалы из этой рубрики

Не пропускайте новые статьи

Подписывайтесь на соцсети

Делимся новостями и свежими статьями, рассказываем о новинках сервиса

Статьи почтой

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

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

✓

Спасибо, ждите письмо.

Проверяйте почту — письмо придет в течение 5 минут (обычно мгновенно).

Как запустить email-маркетинг с нуля?

В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании. В конце каждого письма даем отбитые татуировки об email ⚡️

*Вместе с курсом вы будете получать рассылку блога Unisender

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

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

Отправка html-письма при помощи web-интерфейса Gmail

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

Эту серию обзоров начнём с Гугловского Gmail-а. Как и для двух других самых распространённых, но уже отечественных сервисов, Mail.ru и Yandex-почта, он не отличается дружелюбностью интерфейсов для создания html-писем, ни в лучшую, ни в худшую стороны. Неудобно, но возможно — самое подходящее определение.

Видео

1 этап — ревизируем шаблон нашего html-письма

Перво-наперво, проверяем, что наше письмо содержит целиком прописанные ссылки на свои изображения. И что картинки расположены не на локальном диске компьютера, а на внешнем сервере. Иначе, Gmail изображения попросту не увидит, и отображаться в письме они не будут.

2 этап — создаём письмо из своего html-шаблона в среде браузера

Итак, логинимся на Gmail, заходим в свою почту и жмём на «Написать» слева вверху

Рис. 1

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

Рис. 2

Теперь решаем задачу вставки html-кода. Просто скопировать/вставить плодов не принесёт, ибо браузер воспримет эту вставку, как просто текст. Поэтому применим военную хитрость и внедрим код нашего письма в код станицы браузера. Итак, правый клик по полю для ввода текста письма. В выпавшем контекстном меню выбираем «Просмотреть код».

Рис. 3

Все примеры действий, которые здесь озвучены, базируются на использовании «родного» для Gmail браузера, Google Chrome. Соответственно, используются и названия окон и команд из него. Но в целом, алгоритм универсален, и по аналогии можно действовать и в других браузерах.

Открыв код страницы, браузер Chrome подсветит нам блок кода между тегами <div id…> и <div> . Именно это содержимое определяет отображение html-страницы в теле письма.

Рис. 4

Отметим, что горизонтальная компоновка окон на этом этапе работы более удобна, и привести окна к такому порядку поможет раскрывающийся список под тремя точками справа вверху вспомогательного окна, как показано на рисунке выше, и в нём надо выбрать средний вариант, «Dock to bottom».

Правый клик по выделенному блоку <div id…>…<div> вызовет контекстное меню, в нём выбираем команду «Edit as HTML» — редактировать, как HTML.

Рис. 5

Блок с выделением трансформируется в текстовый блок, пригодный для правки. Выделим всё его содержимое, правый клик по выделенному и выберем «Копировать».

Рис. 6

Теперь нам придётся призвать на помощь текстовый редактор, самый простой — «Блокнот». Делаем с ним два действия. Первое, открываем в нём пустой, чистый без текста файл. И в него копируем содержимое буфера обмена, то, что скопировано нами на предыдущем шаге.

Рис. 7

Им же, «Блокнотом», через контекстное меню и его команду «Открыть с помощью» откроем файл с нашим html-письмом (шаги 2 и 3 на предыдущем рисунке).

Выделяем в «Блокноте» всё содержимое нашего письма и копируем теперь его в буфер обмена.

Рис. 8

Теперь возвращаемся окно «Блокнота» с фрагментом кода из Gmail. Находим и выделяем в конце кода оператор <br>, и вставляем вместо него содержимое буфера, т. е. код нашего html-сообщения.

Рис. 9

В результате получится модифицированный код страницы браузера из Gmail с внедрённым в него содержимым нашего письма. Но пока он только в «Блокноте», поэтому выделяем всё в этом, только что дополненном нашим кодом, окне и вновь копируем в буфер теперь уже это содержимое.

Рис. 10

Возвратимся в Chrome. Там блок кода должен у нас находиться в состоянии редактирования для HTML, как после выполнения команды на рисунке 5. Если видим иное, повторяем то действие, приводим блок кода в состояние для редактирования и выделяем его, полностью и весь. По выделенному — правый клик и «Вставить».

Рис. 11

Завершаем операцию кликом по полю для ввода текста письма — и изменения сохранятся.

Рис. 12

Для выхода из режима правки html-кода закроем окна, отражающие этот код.

Рис. 13

Как полагается, заполняем поля адреса получателя, тему письма. Наше html-письмо, созданное в недрах Gmail и Chrome-а готово, можно смело отправлять.

Рис. 14

И под занавес обзора несколько обыденных, но от этого не менее жизненных советов. Первое, не бойтесь экспериментов, всё, что мы тут наредактировали, произошло только на нашей локальной машине, и простое обновление страницы восстановит исходный код. Второй совет банален, но так же важен и вписывается в парадигму хорошего тона, как и указание темы электронного письма: отправьте созданное сначала самому себе, а вдруг незаметная ошибка исказила ваш шаблон? Лучше, если эту неприятность первым увидите вы, а не ваш адресат. Ну и наконец, помните, что созданное вами можно сохранить в виде черновика. Тогда к результату редактирования можно возвращаться вновь и вновь, по мере надобности.

«Как создать и отправить HTML-письмо для грамотной email-рассылки?»

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

С таким письмом действительно хочется ознакомиться, оно яркое, стильное и визуально приятное, в отличие от сухого текста на белом фоне. Давайте разбрёмся, как создать HTML-письмо самому.

Реализация интерактивного письма

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

С чего начать и как создать?

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

Создание HTML-письма по шаблону

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

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

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

Отправка интерактивного письма, пожалуй, — самый неординарный этап процесса. Давайте разберёмся как вставить html в письмо. Итак, будем действовать на примере mail.ru. Заходим в свой ящик, нажимаем «написать письмо», пишем в форму какое-то слово, затем выделяем его и нажимаем «просмотреть код элемента».

В открывшемся коде, перед нами сразу предстанет строчка body , кликнув по котрой правой клавишей, необходимо выбрать пункт «Edit As HTML».

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

Осталось только указать адресата и нажать на «Отправить»

Хочется большего?

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

Отправка электронной почты в формате HTML

Почти в каждом проекте приходится думать об отправке писем по электронной почте. Основными требованиями при этом являются, помимо надежности доставки, привлекательность и удобство электронных писем.

Основные нюансы при формировании таких писем:

Все стили должны встраиваться (inline) в виде атрибута style для конкретного HTML-элемента.
Все изображения должны встраиваться, либо как отдельные вложения в в письме, либо в виде base64-кодированных данных (второе банально удобнее).
Письмо должно поддерживать DKIM (настройка мэйлера), а домен отправителя — содержать SPF-запись.

Ранее я использовал для формирования HTML-писем проект Premailer, созданный на Ruby. Пришлось даже заняться поддержкой проекта (сейчас времени на это нет, мэйнтейнеры приветствуются).

Сейчас же хотелось избежать внедрения Ruby, в то время, как Node проник везде.

Juice

К счастью, современная экосистема Node предоставляет богатые возможности по формированию электронных писем. Мы выбрали цепочку по формированию электронной почты в виде pug-шаблонов, преобразованию оных с помощью juice и подстановки конкретных данных на бэкэнде (у нас это Perl).

Предполагается, что Вы используете node 6+ , babel (es2015, es2016, es2017, stage-0 presets).

Отправка html-письма через веб-интерфейс Яндекс.Почты. Инструкция по применению.

Отправка html-письма через веб-интерфейс Яндекс.Почты. ИНСТРУКЦИЯ к применению

Главная //

Блог //

Отправка html-письма через веб-интерфейс Яндекс.Почты. ИНСТРУКЦИЯ к применению

К нам часто обращаются клиенты, кто хочет просто красиво оформить свое письмо и отправлять его через интерфейс своей почты. Это может быть коммерческое предложение для потенциальных клиентов. Акция, которая будет отправляться точечно, только конкретным клиентам, или просто информационные письма. Как же это сделать? Как html-макет вставить в письмо и отправить, используя вашу почту? Рассмотрим на примере Яндекс Почты.

И так, у вас есть готовое сверстанное html-письмо. Не буду вдаваться в тонкости верстки, НО….

Как создать email в HTML-редакторе

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

Как создать письмо в HTML-редакторе, рассказываем на примере Cheapsender.

Шаг 1: Проходим регистрацию в Cheapsender

Если у вас еще нет аккаунта в нашем сервисе, то давайте его зарегистрируем:

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

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

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Шаг 2: Копируем содержимое HTML-файла

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

Этот файл содержит код, который нужно вставить в редактор шаблонов на Cheapsender. Чтобы его посмотреть и скопировать, необходимо кликнуть правой кнопкой мыши по файлу и выбрать «Открыть с помощью» → «Блокнот». Если в отобразившемся списке нет блокнота, то нажмите «Выбрать другое приложение». Затем найдите в списке блокнот либо другой текстовый редактор.

В результате перед нами отображается HTML-код письма. Все, что от нас требуется – выделить его полностью и скопировать. Для быстрого выделения можете воспользоваться комбинацией клавиш «CTRL+A».

Содержимое скопировано, теперь его можно перенести в конструктор и запустить рассылку. Обо всем этом поговорим далее.

Шаг 3: Создаем шаблон письма в конструкторе

Возвращаемся в свой личный кабинет, доступ к которому мы получили на первом шаге, и выполняем следующие действия:

Первым шагом переходим в раздел «Шаблоны».
В этом разделе будут содержаться все шаблоны писем, которые вы создадите, их может быть несколько. Это удобно, так как рассылка не всегда предполагает один вариант письма – разная целевая аудитория, другая сфера и прочие аспекты. Первоначально шаблонов нет, их нужно создать – давайте к этому и приступим: нажимаем на «Создать шаблон».
Здесь предлагаются два варианта создания шаблона, нас интересует второй – «Создание шаблона в HTML-редакторе».
В отобразившемся окне от нас потребуется лишь вставить код файла, который мы успешно скопировали на предыдущем шаге – просто используем комбинацию клавиш «CTRL+V». Получаем весь код в конструкторе:
Чтобы убедиться в том, что код добавился корректно, мы можем воспользоваться эмулятором письма – для этого достаточно кликнуть по кнопкам в верхней центральной части. Вот, например, как выглядит добавленное письмо в мобильной версии:
После проверки письма на разных устройствах нажимаем на крестик для выхода из эмулятора.
Осталось дать название шаблону и нажать на кнопку «Сохранить и выйти».

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

Вот пример кода:


<img src="https://jotgkp.stripocdn.email/content/guids/CABINET_1ce849b9d6fc2f13978e163ad3c663df/images/22451592470360730.gif">

В поле src указывается ссылка на то место (файлообменник, сайт), в котором находится изображение.

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

Шаг 4: Отправляем шаблон подписчикам

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

Нажимаем в личном кабинете «Создать рассылку».
Выбираем созданный нами шаблон.
Указываем тему письма и нажимаем «Продолжить».
Теперь нужно добавить клиентскую базу – сделать вы это можете вручную либо путем загрузки файла в формате CSV, TXT или XLSX.

После добавления контактов вы можете запустить тестовую рассылку. Напоминаем, что после регистрации доступно 100 бесплатных писем для отправки, с помощью которых вы сможете оценить сервис, а также проверить работу своего письма.

Выводы

Чтобы создать письмо в HTML-редакторе Cheapsender, достаточно скопировать весь код из файла и вставить его в редактор шаблонов. При необходимости это письмо можно отредактировать. Аналогичным образом вы можете создать несколько шаблонов, каждый из которых будет направлен в отдельную рассылку.

Отправьте рассылку | SendPulse

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

Читайте также отдельно «Как создать и отправить A/B тест».

В разделе «Рассылки» нажмите «Создать рассылку».

Укажите получателей

Выберите адресную книгу или список книг, на какую аудиторию отправлять рассылку.

Читайте также «Как загрузить персонализированную адресную книгу».

Для более индивидуальной работы с клиентами, учитывая данные получателей, вы можете сегментировать аудиторию. Отметьте «Сегментировать список» и выберите условия сегментирования.

Читайте также «Как создавать и использовать сегменты контактов» и «Как создать рассылку с использованием сегментации».

Вы можете также сегментировать рассылку и отправить рассылку подписчикам с определенным тегом.

Читайте подробнее «Как создать рассылку подписчикам с определенным тегом».

Укажите отправителя

Выберите адрес и имя отправителя.

Читайте подробнее «Как добавить новый адрес отправителя».

Укажите тему письма

Введите тему письма.

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

Обратите внимание: чтобы данные из переменных подтягивались в письма, названия переменных должны полностью совпадать в адресных книгах и шаблонах. Если в адресных книгах вы указали имя переменной с заглавной буквы, например {{Имя}}, то и в шаблоны вписывайте эту переменную с заглавной буквы.

Читайте также «Как создать пользовательскую переменную»

Также вы можете настроить умную персонализацию и отправить каждому клиенту отдельную тему, в зависимости от его данных. Для этого нажмите {}, перейдите во вкладку «Добавить условие» и настройте условия.

Читайте также «Что такое умная персонализация и как ее использовать».

Шаг 2. Добавьте контент письма

Выберите шаблон

Сервис предоставляет несколько вариантов выбора шаблона для рассылки. Вы можете:

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

Выберите шаблон и перейдите к его редактированию.

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

Используйте простую или умную персонализацию в своих рассылках, чтобы способствовать развитию лояльности подписчиков.

Добавьте дополнительные элементы

После сохранения шаблона вы перейдете на страницу, где можете добавить прехедер письма, файл к письму и AMP версию письма.

Читайте также «Как прикрепить файл к письму», «Как отправлять большие файлы через email».

Шаг 3. Настройте дополнительные опции рассылки

Сбор статистики

Вы можете активировать сбор статистики по открытиям письма и переходам по ссылкам. Вы можете также активировать добавление меток к каждой ссылке, чтобы отслеживать аналитику в Google Analytics.

Страница отписки и категория рассылки

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

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

Архивация рассылки

Выберите опцию «Добавить рассылку в архив» и получите доступ к рассылке даже после удаления данных из аккаунта.

Читайте подробнее «Архив рассылок».

Запуск авторассылки по триггерному событию

Как только ваши адресаты откроют письмо или перейдут по ссылке из письма, им автоматически будут отправляться последующие письма настроенной вами цепочки.

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

Шаг 4. Проверьте правильность данных

Перед тем как отправить рассылку клиентам, проверьте все введенные данные.

Если необходимо внести изменения в какой-то части письма, кликните «Изменить», внесите правки и вернитесь на шаг «Предпросмотр и отправка».

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

Читайте также «Работа антиспам системы во время создания рассылки».

Шаг 5. Настройте отправку

Планирование отправки

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

Переотправка по непрочитанным

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

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

Читайте также «Как отправить рассылку по непрочитанным».

Тестовая отправка рассылки

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

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

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

Обновлено: 29.08.2022

Инструкция по HTML верстке писем email рассылки | www.

epochta.ru

Верстка HTML-письма с нуля – работа не из легких. Основная задача – создать универсальный код, который будет понятен различным почтовым клиентам и одинаково красиво будет отображаться на всех устройствах. Как правило, чем «древнее» код, тем выше вероятность, что он будет корректно работать. И хотя сегодня существуют конструкторы HTML писем, которые упрощают верстку писем, в основе их работы заложены всё те же старые принципы разработки HTML шаблонов. В этой статье мы расскажем, как создать HTML письмо, которое пользователи оценят по достоинству.

Создание HTML письма: Базовые знания

Существуют два основных правила, о которых всегда стоит помнить, приступая к верстке письма:

Используйте таблицы HTML кодов при создании дизайна шаблона. Это будут огромные таблицы с большим количеством вложенных таблиц. Но такой подход помогает сохранить нужный дизайн на любом устройстве и в любом почтовом клиенте. Представьте, что вы вернулись на 20 лет назад – и верстайте 🙂
Используйте внутренние CSS стили. Некоторые почтовые клиенты будут удалять всё, что находится в тегах <head> и <body>, включая CSS. Поэтому, для изменения стилей различных элементов письма — цвет, фон, шрифты — рекомендуется прописывать параметры отдельно для каждого элемента в теле письма.

А теперь давайте разбираться детальнее в такой сложной, но интересной теме как верстка email писем. Один из самых распространенных вопросов среди новичков: Где писать код шаблона HTML письма? Не в Microsoft Word же, правда? Удобно и понятно, когда сразу видишь, как выглядит написанный код HTML письма и в каком виде его получит клиент. Программа для массовых email рассылок ePochta Mailer имеет прекрасный функционал для параллельного написания кода и просмотра созданного шаблона в режиме реального времени. Поэтому здесь и далее все примеры по созданию, редактированию и отправке письма будут представлены с ее помощью. Cкачайте софт для массовых Email рассылок бесплатную демо-версию программы и читая статью, сразу тренироваться в сотворении своего email шаблона.

Формат шаблона html-писем

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

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

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

Как сверстать HTML шаблон письма: Создание документа

HTML код любого email сообщения состоит из двух частей:

Шапка (Header). Всё, что будет обернуто в тег <head> и </head>, почтовый клиент будет принимать за шапку письма.
Тело (Body). Код, размещенный внутри тега <body> и </body> будет использован для создания структуры вашего email сообщения.

Создание HTML письма начинается с создания документа типа XHTML: 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2. <html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5. <title>Инструкция Создания Email Шаблона <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 6. </head> 7. </html><!DOCTYPE> объясняет почтовому, какие HTML-теги ожидать в дальнейшем, и какому набору правил HTML и CSS вы придерживались, создавая письмо. Несмотря на то, что некоторые почтовые клиенты (Gmail, Google Apps, Yahoo! Mail и Outlook.com) заменят ваш хедер на собственный, мы рекомендуем включить данный код в документ. <meta http-equiv=”Content-Type” /> указывает, как обрабатывать текст и специальные символы в вашем письме. «text/html» дает понять механизму, что рассматривать следующие строки текста нужно как html. <meta name=”viewport”/> указывает устройство, на котором просматривается электронное письмо, чтобы установить видимую область сообщения в соответствии с шириной экрана. Заголовок email сообщения записывается внутри тега <title>. В таком случае, если получатель выберет «Просмотр в Интернете», заголовок сообщения будет отображаться на вкладке браузера.

Верстка тела email писем. Создание таблицы

Общая структура письма создается с использованием тега <body>. Прежде всего, устанавливаем нулевое значение для отступов (теги <margin> и <padding>), чтобы избежать лишнего пустого пространства в шаблоне. Ширина главной таблицы должна быть 100% (table width=”100%”). Она выступает фактически основным каркасом, «телом» email сообщения. В отличие от тега <body>, работая с таблицей, вы можете работать со стилями: например, чтобы задать общий цвет фона для всего письма, его нужно прописать в параметрах этой главной таблицы. Значения тегов <cellpadding> и <cellspacing> тоже должны равняться нулю, опять же, во избежание ненужного пустого пространства. Данные теги отвечают за отступы от границ ячейки таблицы.

Примечание. Здесь и далее мы оставим значение тега border для границы всех таблиц как 1: border=”1″. Так вам будет проще отследить структуру макета. В конце, значение можно убрать, используя функцию «Найти и заменить».

1. <body> 2. <table border="1" cellpadding="0" cellspacing="0"> 3. <tr> 4. <td> 5. Привет! 6. </td> 7. </tr> 8. </table> 9. </body> Пока что наше письмо выглядит следующим образом:

(наличие рамки – результат работы тега border=”1″)

Максимально возможная и удобная ширина для электронного сообщения, которое просматривается в почтовых клиентах на персональном компьютере – 600px. Чтобы письмо не растягивало на весь экран, нужно внутри уже созданной главной таблицы создать еще одну вложенную, строго прописав значение её ширины: width=”600″.

Золотое правило в создании HTML кода email сообщения: если нужный атрибут (тег) существует в HTML, используйте его, и не нужно обращаться к CSS.

Этот код вложенной таблицы следует вставить вместо слова «Привет!» 1. <table border="1" cellspacing="0" cellpadding="0" align="center"> 2. <tbody> 3. <tr> 4. <td>Привет!</td> 5. </tr> 6. </tbody> 7. </table> Теперь письмо выглядит вот так: Вы заметили, что для вложенной таблицы использован атрибут <border-collapse> со значением “collapse”? Он указывает почтовым клиентам на правильность отображения границ вокруг ячеек таблицы. Если этого не сделать, более новые версии Outlook, например, в процессе обработки письма, добавят небольшое ненужное пространство между границами двух таблиц. Мы уже говорили о том, что любой шаблон email сообщения состоит из трёх логических частей: хедер, тело письма с основным контентом, футер. Теперь нужно отобразить это структурно в уже созданном нами шаблоне. Добавим еще две строки. Скопируем во вложенной таблице часть кода, отвечающего за строку 1. <tr> 2. <td> 3. Привет! 4. </td> 5. </tr> и продублируем его несколько раз, заменив приветствие на порядковый номер строки. Должно получиться следующее: 1. <table align="center" border="1" cellpadding="0" cellspacing="0"> 2. <tr> 3. <td> 4. Строка 1 5. </td> 6. </tr> 7. <tr> 8. <td> 9. Строка 2 10. </td> 11. </tr> 12. <tr> 13. <td> 14.Строка 3 15. </td> 16. </tr> 17. </table> Визуально:

Давайте добавим цвет фона отдельно для каждой строки. Так как в HTML существует для этого специальный тег <bgcolor>, следует использовать его вместо CSS стилей. Обратите внимание, что выбирая цвет, нужно указывать все 6 символов кода, так как сокращенные три символа могут попросту не сработать.

1. <table align="center" border="1" cellpadding="0" cellspacing="0"> 2. <tr> 3. <td bgcolor="#ffa500"> 4. Строка 1 5. </td> 6. </tr> 7. <tr> 8. <td bgcolor="#ffffff"> 9. Строка 2 10. </td> 11. </tr> 12. <tr> 13. <td bgcolor="#1e90ff"> 14. Строка 3 15. </td> 16. </tr> 17. </table> Сосредоточимся на первой строке – это будет хедер письма.

Строка 1. Верстка хедера HTML писем

В планах – разместить в первой строке изображение с логотипом и названием компании. Но для начала нужно настроить отступы, которые будут со всех сторон изображения до внутренних границ ячейки. За это отвечает тег – <padding>. Работая с <padding>, важно помнить о необходимости указывать каждое значение отступа (сверху, снизу, слева, справа), иначе результаты могут оказаться непредсказуемыми. Прописывая параметры, вполне допустимо использовать краткий вариант записи, типа padding: 10px 10px 5px 5px;. Если же возникают проблемы, их решит длинный вариант записи, типа padding-top: 10px; padding-right: 10px; padding-bottom: 5px; padding-left: 5px;. В случае, когда почтовый клиент удаляет ваш инлайновый CSS или вносит свои правки в ваше письмо, можно пойти на хитрость. Вместо того, чтобы использовать тег <padding>, добавляйте пустые ячейки в таблице, тем самым создавая нужное пространство. Такие дополнительные ячейки будут пустыми (с кодом   внутри), но с четко установленной высотой или шириной. Например: <tr><td> </td></tr> Обращаем ваше внимание, что стили правильнее будет прописывать внутри тега <td>, но не внутри <p> или <div>, последние ведут себя более непредсказуемо. В случае с нашим примером письма, мы применяем внутренний CSS для настройки отступов для изображения. После вставки изображения, необходимо прописать alt текст, который будет видеть получатель на месте картинки, если картинки отключены почтовиком. И важно добавить параметр style=”display:block;”, наличие которого гарантирует, что почтовый клиент не добавит лишних пробелов под картинкой. При необходимости, можно отцентровать изображение, добавив align=”center” в тег <td>.

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

Пример кода Строки 1 с вставленным изображением: 1. <td align="center" bgcolor="#ffa500"> 2. <img alt="СМС и Email маркетинг" src="E:\epochta\БЛОГ\mailer_html_img.png"> 3. </td> Визуально:

Строка 2. Работа с контентом в HTML шаблоне письма

Для начала следует указать отступы внутри средней ячейки (второй строки), чтобы новая вложенная в неё таблица с контентом красиво смотрелась, не сливаясь с ней основными границами. Вы уже знаете, что такие отступы от сторон элемента, что будет внутри ячейки, задаются с помощью тега <padding>. Приступайте! 😉 Визуально должно получиться:

Теперь нужно подготовить место для контента. Как упоминалось выше, нужно добавить еще одну вложенную таблицу. Это будет таблица с тремя строками:

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

Поехали! Ширина таблицы, которая будет во второй строке должна стоять не в пикселях, а в процентах (100%). Это нужно, если хотите, чтобы письмо было респонсивным. Код Строки 2 с вложенной таблицей: 1. <td bgcolor="#ffffff"> 2. <table border="1" cellpadding="0" cellspacing="0"> 3. <tr> 4. <td> 5. Строка 1 6. </td> 7. </tr> 8. <tr> 9. <td> 10. Строка 2 11. </td> 12. </tr> 13. <tr> 14. <td> 15. Строка 3 16. </td> 17. </tr> 18. </table> 19. </td> Визуально: Пишем заголовок статьи и её краткое описание. В строке с описанием можно добавить отступы для красивого отображения текста. Обратите внимание, что программа ePochta Mailer позволяет добавлять и изменять текст непосредственно в визуальном редакторе, без перехода на вкладку HTML кода. Вложенная таблица с текстом: 1. <table border="1" cellspacing="0" cellpadding="0"> 2. <tbody> 3. <tr> 4. <td> 5. Продвижение бренда в Вайбер: массовые рассылки в мессенджерах 6. </td> 7. </tr> 8. <tr> 9. <td> 10. Cейчас Viber — это не только приложение для личных переписок, но и эффективный канал коммерческого продвижения товаров и услуг. 11. Только ленивые не говорят о том, что вайбер для бизнеса — это действительно эффективный и дешевый инструмент. Так ли это? Предлагаем проверить эти утверждения на соответствие действительности. 12. </td> 13. </tr> 14. <tr> 15. <td> 16. Строка 3 17. </td> 18. </tr> 19. </tbody> 20. </table> Визуально: Для последней строки таблицы мы подготовили две колонки с картинкой и текстом. Давайте по порядку. Во-первых, так как нам нужно расстояние между столбцами таблицы, а атрибут <margin> мы использовать не можем, то немножко схитрим и создадим таблицу с тремя столбцами. Просто средний столбец будет пустым и узким. Основной параметр столбца – ширина. В данном случае мы будет ориентироваться на ширину картинки, которая будет размещена в нем. Её ширина 260px. И чтобы не запутаться, высчитывая, какой же процент составляют 260 пикселей из таблицы на 540px* (а это будет 48,1%), проще будет указать известную ширину. *Ширина вложенной таблицы 540px – это ширина основной таблицы в 600px минус отступы, по 30px с каждой стороны. Итого, два столбца по 260 пикселей + средний пустой столбец на 20px. Укажем также для обоих столбцов значение valign=”top”, что выровняет текст по вертикали, по верхнему краю строки, независимо от количества текста в каждом столбце. По умолчанию, значение valign считается middle; не забудьте его изменить. 1. <table border="1" cellpadding="0" cellspacing="0"> 2. <tr> 3. <td valign="top"> 4. Колонка 1 5. </td> 6. <td> 7.   8. </td> 9. <td valign="top"> 10. Колонка 3 11. </td> 12. </tr> 13. </table> Визуально: Добавляем изображения и контент. Поскольку, нам снова нужны две строки, вставляем еще одну таблицу в каждую из колонок, не забывая об отступах. 1. <table border="1" cellspacing="0" cellpadding="0"> 2. <tbody> 3. <tr> 4. <td valign="top"> 5. <table border="1" cellspacing="0" cellpadding="0"> 6. <tbody> 7. <tr><td>  8. <img alt="Картинка для колонки 1" src="E:\epochta\БЛОГ\битые картинки на блоге\iStock_000004384999XSmall.jpg"> </td> 9. </tr> 10. <tr> 11. <td> 12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. 13. </td> 14. </tr> 15. </tbody> </table> 16. </td> 17. <td> 18.   19. </td> 20. <td valign="top"> 21. <table border="1" cellspacing="0" cellpadding="0"> 22. <tbody> <tr> 23. <td> 24.   25. <img alt="Картинка для колонки 3" src="E:\epochta\БЛОГ\битые картинки на блоге\greed. jpeg"> </td> 26. </tr> 27. <tr> 28. <td> 29. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. 30. </td> 31. </tr> 32. </tbody> </table> 33. </td> 34. </tr> 35. </tbody> </table> Визуально:

Строка 3. Создание кода футера HMTL письма

Основные компоненты футера – контакты компании и ссылка отписки. Как видите, это два разных элемента и нам снова нужно разделить строку на две колонки с помощью дополнительных таблиц. Чтобы не забыть, сначала добавим отступы, а после – таблицы. Отступы: <td bgcolor="#1e90ff "> Строка 3 </td> Визуально: Разделяем строку на две колонки с помощью дополнительной таблицы. 1. <table border="1" cellpadding="0" cellspacing="0"> 2. <tr> 3. <td> 4. Колонка 1 5. </td> 6. <td> 7. Колонка 2 8. </td> 9. </tr> 10.</table> В данном шаблоне первая колонка будет для контактных данных компании, вторая – для ссылки отписки. Вы можете добавлять иконки соцсетей, изменять количество колонок и расположение информации абсолютно в любом формате. Дополнительная таблица с информацией футера: 1. <table border="1" cellspacing="0" cellpadding="0"> 2. <tbody><tr> 3. <td> 4. <p>Компания ePochta<br> 5. [email protected]</p> 6. </td> 7. <td align="right"> 8. Вы получили это письмо как клиент нашей компании. Чтобы отписаться от рассылки, нажмите на ссылку ниже. 9. </td> 10. </tr> 11. </tbody></table> Визуально: Вы заметили, что текст во второй колонке футера выровнен по правому краю? Это возможно благодаря атрибуту align=”right” для тега <td>. Шаблон готов!

Верстка дизайна шаблона email рассылки

Первая часть статьи касалась структуры макета электронного сообщения. Сейчас же мы немного поговорим об оформлении и дизайне. Возможностями встроенного CSS вы можете изменять параметры шрифта – использовать тег <b> или <strong> для жирного шрифта, прописывать размер и название непосредственно семейства шрифта. Возьмем для примера заголовок статьи «Продвижение бренда в Вайбер: массовые рассылки в мессенджерах» в уже созданном шаблоне и зададим ему следующие параметры: 1. <td><p align="center"> 2. Продвижение бренда в Вайбер:<br>массовые рассылки в мессенджерах 3. </p></td> Посмотрите, как изменился текст: Теперь уберем границы таблиц, которые мы оставляли, чтобы было визуально легко отследить изменения в структуре. Для этого на вкладке HTML код нажмите CTRL+F или перейдите в меню Правка – Найти. В открывшемся диалоговом окне выберите функцию Заменить и задайте значение border=”1″ заменить на тег border=”0″. Перейдите во вкладку Сообщение – все границы пропали, перед вами чистый готовый макет email сообщения. При желании, можно оставить границу для основной таблицы в 600px, сделав её мало заметной, например: <table align="center" cellspacing="0" cellpadding="0"> Добавим небольшой отступ в самой первой строке, чтобы фон не прилипал к самому верху страницы: 1. <table border="0" cellspacing="0" cellpadding="0"> 2. <tbody>><tr> 3. <td> А теперь – проба пера: отправляем письмо на тестовый email адрес. Вы можете как создать список из десятка адресов на различных почтовых клиентах и запустить тестовую рассылку, так и отправить одно письмо с помощью меню Проба, указав один адрес получателя сообщения. Вот так созданный шаблон выглядит в Gmail Создавайте собственные брендовые email шаблоны, тестируйте и радуйте клиентов красочными рассылками. ePochta Mailer обладает мощнейшим функционалом для создания сообщений. В статье основной задачей было самостоятельно написать код шаблона, поэтому мы не затрагивали возможности программы. Детальнее о ePochta Mailer вы можете прочитать на нашем сайте. И пусть клиенты с удовольствием читают ваши рассылки!

Создавайте красивые письма с программами ePochta!

Скачайте ePochta Mailer и тренируйтесь в создание email сообщения бесплатно на протяжении 7 дней!

Тестировать

Хочешь получать актуальные статьи?

Подпишись и стань гуру в email маркетинге!

Как создавать и отправлять HTML-шаблоны электронной почты в Gmail?

Содержание

1 Как использовать Gmail для отправки шаблонов электронной почты в формате HTML
2 Как отправлять шаблоны электронной почты в формате HTML в Gmail?

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

Хотя в Gmail можно прикреплять изображения, эти изображения не будут реагировать. Неадаптивные изображения и контент не будут выглядеть так, как должны, на разных размерах экрана. Код HTML автоматически масштабирует ваш контент в соответствии с размером экрана на стороне получателя.

В этом руководстве мы покажем вам, как создавать и отправлять HTML-шаблоны электронной почты Gmail с помощью Saleshandy. Помимо того, как создать HTML-шаблон в Gmail, в качестве бонуса мы также покажем вам, как отслеживать открытия и клики по вашим электронным письмам Gmail в формате HTML.

Пропустить чтение и сразу перейти к видео!

Как использовать Gmail для отправки шаблонов электронных писем в формате HTML

Выполните следующие три шага, чтобы создать и отправить электронные письма в формате HTML из своей учетной записи Gmail/Gsuite:

Шаг 1. Зарегистрируйтесь на Saleshandy
Шаг 2. Создайте HTML-шаблон
Шаг 3. Скопируйте и вставьте содержимое в папку «Входящие» расширение.

После загрузки расширения откройте Gmail и при появлении запроса активируйте плагин Saleshandy.

Нажмите, чтобы составить электронное письмо, и под параметрами форматирования вы найдете еще одну панель инструментов для доступа к функциям Saleshandy.

Установите расширение Chrome за 60 секунд!

Шаг 2. Создайте HTML-шаблон для Gmail в Saleshandy

Войдите в веб-приложение Saleshandy и перейдите в меню «Шаблоны» в левой части экрана.
Нажмите «Новый шаблон», введите тему и имя шаблона и нажмите кнопку «<>» на панели инструментов в нижней части редактора.
Вставьте HTML-код вашего электронного письма в появившийся редактор кода и нажмите «ОК». Нажмите «Создать» в редакторе шаблонов, и ваш HTML-шаблон будет сохранен в Saleshandy 9.0008

Шаг 3. Используйте созданный HTML-шаблон в Gmail

Теперь, когда вы создали HTML-шаблон в Saleshandy, вы можете напрямую редактировать и отправлять его из почтового ящика Gmail.

Создайте электронное письмо в Gmail, щелкните значок шаблонов на панели инструментов Saleshandy и выберите только что созданный HTML-шаблон. Ваш шаблон загрузится и будет готов к отправке.

Просто, не правда ли?

Используйте saleshandy для отправки HTML-шаблонов электронной почты прямо сейчас!

Вот видео, которое поможет вам начать работу с шаблонами HTML:

Попробуйте бесплатно!

Другие преимущества использования шаблонов HTML от Saleshandy

Вы можете поделиться своими шаблонами с членами вашей команды всего одним щелчком мыши. Вы найдете сохраненные шаблоны, перечисленные под метками «Команда» и «Личное» в вашем списке шаблонов.
Вы получаете доступ к подробной аналитике производительности каждого из ваших шаблонов, такой как показатели открытий и кликов. Это поможет вам сравнить ваши шаблоны и улучшить их.
Saleshandy также обеспечивает интеграцию с Outlook. Если вы являетесь пользователем Outlook, вы можете использовать шаблоны в своем Outlook.
Вы можете отправлять автоматизированные персонализированные электронные письма, используя шаблоны и кампании слияния писем в Saleshandy. Кроме того, вы также можете запланировать автоматическую отправку последующих последовательностей в зависимости от поведения вашего получателя (если он не открыл/не ответил на предыдущее электронное письмо и т. д.).
Вы можете назначать права доступа к вашей папке шаблонов своим товарищам по команде на различных уровнях, таких как разрешения на создание, редактирование и удаление.
Создавайте и сохраняйте шаблоны электронной почты непосредственно из Gmail с помощью расширения Saleshandy для Chrome.
Отправляйте шаблоны электронной почты напрямую из окна создания сообщения Gmail и используйте ярлыки, чтобы сэкономить время при загрузке шаблона в поле создания сообщения.

Как отправлять HTML-шаблоны электронной почты в Gmail?

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

Шаг 1. Создайте файл HTML-кода
Шаг 2. Проверьте файл в новом браузере
Шаг 3. Скопируйте и вставьте содержимое в папку «Входящие».
Шаг 4. Отправьте электронное письмо в формате HTML. файл. Просто обычный текст.

Шаг 2: Теперь щелкните файл правой кнопкой мыши и откройте его в новом браузере.

Проверьте, правильно ли отформатирован ваш HTML-код и соответствует ли он вашим ожиданиям.

Шаг 3: Скопируйте все содержимое из браузера (Ctrl A) и вставьте его в папку «Входящие».

Шаг 4: Теперь просто отправьте электронное письмо в формате HTML.

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

Зачем отправлять рассылку новостей по электронной почте с помощью Gmail, если число получателей ограничено?

Создавать и отправлять электронные письма в формате HTML с помощью таких сервисов, как MailChimp или GetResponse, действительно проще. Но из-за этого ваши электронные письма могут попасть в папки «Спам» или «Рекламные акции». Это потому, что эти сервисы используют общедоступные серверы, которые отправляют сотни тысяч электронных писем каждую секунду, большинство из которых будет расценено как спам.

Когда эти электронные письма отправляются из вашей учетной записи Gmail/Gsuite, они, скорее всего, будут доставлены в основную папку «Входящие» вашего получателя. Поскольку серверы Gmail не рассылают массовые электронные письма, как некоторые другие службы, предполагается, что электронные письма, отправленные с помощью Gmail, важны для получателя.

Прочтите эту статью — Как эффективно отправлять информационные бюллетени с помощью Gmail, чтобы начать отправлять свои информационные бюллетени из Gmail.

Но, если у вас есть список из 10 000 получателей или более, вы не сможете отправить электронное письмо с информационным бюллетенем всем получателям за один день.

Учетные записи Gmail/Gsuite имеют ограничения в отношении скорости отправки и лимитов. Google ограничивает каждую учетную запись Gmail отправкой 500 электронных писем, 2000 для Gsuite.
Прочтите этот блог, чтобы узнать больше о дневном лимите отправки Gmail и Gsuite.

Итак, если у вас ограниченное количество получателей, вы можете отправить HTML-шаблон электронной почты в Gmail с помощью Saleshandy.

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

Автор Нэнси Мурья

Опубликовано 09 декабря 2021 г.

Делиться Твитнуть Делиться Электронная почта

Если вы хотите отправить пользовательское электронное письмо в формате HTML в Outlook, Gmail или любому другому поставщику, это руководство поможет вам.

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

Шаблон электронной почты основан на традиционных технологиях HTML. Вы будете постоянно работать с таблицами и строками таблицы стека и данными таблицы . Базовый HTML-шаблон электронной почты выглядит так:

  
  
  
  
  
  
 MUO — упрощенная технология 
  
  
 




...
...
...
...
.. .
...
...

      . ..

Выход:

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

Здесь вы начинаете с DOCTYPE для документа. Затем вы устанавливаете кодировку, тип контента, метатеги и заголовок внутри тега . Основная часть начинается с тега , где вы размещаете родитель

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

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

необходимо следовать определенному маршруту.

Например, давайте сформируем шаблон электронной почты с логотипом и датой внутри тега

Теперь вы знаете, как размещать теги HTML и создавать хорошую структуру шаблона электронной почты. Давайте двигаться вперед, чтобы лучше понять стиль электронной почты.

Стилизация электронной почты в формате HTML — трудоемкая задача, поскольку вы можете использовать только встроенный CSS. Кроме того, вам нужно будет повторить стиль для каждого элемента, если он имеет похожий стиль. Если вы не знакомы с каскадными таблицами стилей, узнайте, как начать работу с CSS.

Предварительный просмотр :

< /tr>

05 декабря 2021 г.

< tr>

05 декабря 2021 г.

Привет, Джон Доу

Благодарим Вас за посещение нашего сайта. Надеемся, сегодня вы узнали что-то новое.

Нам важно ваше мнение!

Оцените наши статьи здесь.

0 1 2 3 4 5 6 7 8 9 10

Выход :

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

Теперь скопируйте и вставьте весь код с GitHub. Если вы используете VS Code, откройте файл HTML с расширением live server и скопируйте содержимое, нажав Ctrl + A > Ctrl + C . Откройте Gmail и создайте новое электронное письмо. Вставьте содержимое и введите почтовый идентификатор получателя. Отправьте электронное письмо, и вы получите результаты, как показано ниже:

Протестируйте код на разных устройствах, чтобы увидеть, как он выглядит и ведет себя. Настройте электронную почту в формате HTML и сделайте ее чистой, простой и отзывчивой.

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

Как сделать доступный веб-сайт с помощью семантического HTML и CSS

Делиться Твитнуть Делиться Эл. адрес

Похожие темы

Программирование
HTML
Программирование
УСБ

Об авторе

Нэнси Мурья (опубликовано 19 статей)

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

Еще от Нэнси Мурья

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

Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!

Нажмите здесь, чтобы подписаться

Полное руководство по созданию электронных писем в формате HTML xhtml1/DTD/xhtml1-transitional.

dtd”>

! [endif]—>

Рождественский шаблон электронной почты

<мета http–equiv=“X-UA-Compatible” content=“IE=edge”>

<мета имя=“viewport” содержимое=“width=device-width, initial- шкала = 1,0 ">

Образец тестового письма | Просмотреть онлайн

jpg” width=“700” border=“0” height=“345”>

Это образец электронного письма, которое должно быть размещено в одном абзаце

Это абзац 2 с размером шрифта 18px и цветом шрифта #fbeb59 с междустрочным интервалом 15px

Это абзац 3 с размером шрифта 18px и цветом шрифта #fbeb59 с междустрочным интервалом 25px и в верхнем регистре

< td class="em_hide" style="line-height:1px;min-width:700px;background-color:#ffffff;"> Руководство для начинающих по созданию и отправке электронных писем в формате HTML

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

Это имеет смысл, если учесть, сколько изображений, GIF-файлов, видео и фирменного контента вы видите почти каждый час в своих электронных письмах. Хотя вы могли бы предложить простое текстовое электронное письмо, HTML-версия предложит больше преимуществ и даст вам больше возможностей для брендинга и продвижения себя и своего бизнеса.

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

Что такое электронная почта в формате HTML?

Электронные письма, которые попадают в ваш почтовый ящик, могут быть двух видов:

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

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

Электронная почта в формате HTML в браузере.

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

В: На каком языке веб-разработчики создают сайты, которые вы посещаете каждый день? 🤔 A: HTML… и вы можете узнать больше в этом руководстве ✅Нажмите, чтобы твитнуть

Почему вы должны использовать электронную почту в формате HTML вместо форматирования обычного текста

Редко вы увидите электронное письмо в виде простого текста от компании по нескольким причинам. Однако обычный текст не является неправильным сам по себе , более того, он не предлагает никаких преимуществ HTML-форматирования электронной почты. Например:

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

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

Более того, вы также должны учитывать некоторые вопросы конфиденциальности и безопасности, которые доминируют в веб-разработке. Это особенно верно, если вы хотите включить JavaScript, использовать сторонние шрифты и другие аспекты.

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

Важнейшие элементы (и типичная практика) электронной почты в формате HTML Одним из аспектов, который предлагает аналогичный рабочий процесс, является выбор аспектов и разделов электронной почты в формате HTML.

Как и в Интернете, в ваших электронных письмах есть элементы, которые практически не подлежат обсуждению. Конечно, нужен контент. Здесь следует учитывать несколько типичных элементов:

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

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

Набор смайликов, используемых в заголовке заголовка.

Нижний колонтитул также является лучшим местом для важной юридической информации. Две из самых больших проблем, связанных с электронной почтой, — это спам и попадание электронной почты в нужные почтовые ящики (если вообще). Это то, что мы рассмотрим в следующем разделе, поскольку это жизненно важная часть создания и отправки электронных писем в формате HTML.

Рассмотрение некоторых типичных практик для ваших электронных писем в формате HTML

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

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

Электронное письмо с двойной подпиской.

Для этого есть несколько причин:

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

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

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

Ваша тема должна быть идеальной, а содержание электронной почты смысл. Учитывая появление и преобладание мобильного браузера, это особенно важно.
Говоря об этом, вы должны убедиться, что ваша электронная почта в формате HTML читается без заминок на небольших экранах — это означает отсутствие чрезмерных баннеров или больших логотипов.
Если вы включите убедительный призыв к действию (CTA) в каждое электронное письмо, у вас есть хорошие шансы повысить вовлеченность пользователей.
Отслеживание — спорный вопрос, но он поможет вам понять, что делают ваши пользователи, когда вы отправляете им электронное письмо. Некоторые провайдеры включают солидный набор аналитики в качестве стандарта.

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

Технический подход, который вам понадобится для создания электронной почты в формате HTML

Если у вас есть опыт веб-разработки, вы, несомненно, будете использовать HTML5 в качестве языка разметки. Это мир, отличный от предыдущих экземпляров HTML и XHTML, и включает в себя большее разделение между стилем (в котором практически нет допустимых элементов) и структурой.

Например, HTML5 предлагает ряд различных тегов для определения областей содержимого вашего сайта.

Несколько структурных тегов HTML.

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

Это означает, что вам нужно предоставить другой способ добавления стилей к вашим электронным письмам в формате HTML — встроенный — единственный вариант для совместимости. Говоря о совместимости, это важное соображение. Вы должны сбалансировать уникальный стиль с возможностями почтового клиента конечного пользователя. Таким образом, есть несколько других технических соображений, на которые следует обратить внимание: 9.0003

Использование системных шрифтов, а не сторонних, избавит вас от HTTP-запроса, быстро загрузит электронное письмо для пользователя и доставит последовательно выглядящее электронное письмо для загрузки.
Вы можете пойти еще дальше и предоставить текстовую версию электронной почты для тех, кто не может просматривать электронную почту в формате HTML в своем клиенте. Многие сайты предлагают HTML-версию, к которой вы можете получить доступ в Интернете как по этой причине, так и в качестве резервной копии.
Альтернативный текст так же важен для электронных писем в формате HTML, как и для Интернета. Таким образом, используйте замещающий текст везде, где вы добавляете изображение к своему контенту для доступности.

Есть один технический аспект электронной почты в формате HTML, о котором вам следует подумать больше, поскольку он может пересекать грань между встроенными стилями, CSS и другими факторами. Давайте кратко обсудим «условные выражения».

Использование условных выражений

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

Честно говоря, это почти всегда проблема Microsoft. Для веб-разработчиков Internet Explorer (IE) был демоническим браузером. Однако для электронных писем в формате HTML это Outlook. Между различными версиями вы можете увидеть, что ваш стиль отображается не так, как вы ожидали.

Благодаря этому вы можете добавлять в свой код блоки условий и определять эти элементы. Например, вы можете настроить таргетинг на версии Outlook как для Word, так и для IE.

Во-первых, Word:

Для Internet Explorer используется другой тег :

Если целевой браузер основан на WebKit (например, Apple Safari, браузер PlayStation, Amazon Kindle и т. д.), вы можете использовать медиа-запрос для предоставления определенного стиля:

 .html-email-webkit {
  дисплей: нет;
}
Экран @media и (-webkit-min-device-pixel-ratio:0) {
  . .html-электронная почта-вебкит {
    отображение: блок !важно;
  }
}

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

Ваши варианты создания электронных писем в формате HTML

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

Однако есть и другие варианты, которые мы можем рассмотреть:

Вы можете использовать специальный сервис, например приложение для маркетинга по электронной почте, для создания своих электронных писем. Многие приложения предоставят визуальный конструктор, но также дадут вам возможность написать собственный код и создать свой собственный шаблон.
Говоря об этом, вы можете скачать шаблон для своих электронных писем в формате HTML. Это очень похоже на тему WordPress, поскольку она обеспечивает основу для остальной части вашего дизайна. Оттуда вы можете настроить его по своему вкусу. Это хорошая золотая середина между вариантами кодирования и построения.

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

3 Поставщики услуг электронной почты, идеально подходящие для создания электронных писем в формате HTML

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

Мы не можем охватить их все, поэтому упомянем три самых популярных. Округлим их.

1. Mailchimp

Логотип Mailchimp.

Этот провайдер услуг электронной почты является идеальным решением — для многих это почти рефлекторное решение. Mailchimp является золотым стандартом в приложениях для электронного маркетинга в глазах многих, и для этого есть много веских причин:

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

Конечно, мы хотим посмотреть на последний здесь. Creative Assistant — это способ для Mailchimp узнать о вашем бренде и помочь вам создавать и персонализировать ваши электронные письма. Вы также можете подключить сторонние приложения, такие как Adobe Photoshop, которые помогут вам создать идеальную электронную почту.

Также легко работать с существующим HTML, особенно если вы используете Classic Builder от Mailchimp. Несмотря на это, у вас есть способы импортировать шаблоны HTML, если они вам нужны.

Mailchimp использует сложный гибрид месячных уровней подписки и количества контактов, чтобы прийти к окончательной цене. Мы предполагаем, что малым предприятиям потребуется план около 35 долларов в месяц, до 2500 контактов. Тем не менее, вам нужно будет изучить лучший план для вас, исходя из необходимых вам функций и количества контактов, которые, как вы думаете, вы возьмете на борт.

2. AWeber

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

Логотип AWeber.

Он включает в себя ряд важных функций, которые вам понадобятся для отправки электронных писем:

Возможность автоматизировать и планировать сообщения, кампании и многое другое.
У вас есть отличные организационные инструменты, такие как маркировка подписчиков и сегментация.
AWeber также позволяет автоматизировать контент, который вы создаете для своих электронных писем. Например, вы можете превратить сообщения блога в рассылки с минимальным объемом работы.

Когда дело доходит до создания электронных писем, у AWeber есть несколько хитростей в рукаве. Он использует визуальный конструктор с возможностью перетаскивания и включает библиотеку пользовательских шаблонов, с которых можно начать работу. Более того, вы можете подключить AWeber к своей учетной записи Canva и использовать ее для разработки своих электронных писем.

Также есть специальный HTML-редактор, чего нет в Mailchimp. Вы даже получаете это на бесплатном уровне AWeber. Кстати говоря, цены здесь более просты. Вы будете платить около 25 долларов в месяц за до 2500 контактов.

3. Постоянный контакт

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

Логотип постоянного контакта.

Как и AWeber, Constant Contact фокусируется на маркетинге по электронной почте, а не на других областях, ориентированных на бизнес. Таким образом, у него есть набор функций, который вам понравится:

У вас есть инструменты управления списком клиентов и функции автоматизации маркетинга.
Имеются расширенные возможности создания отчетов.
Вы можете интегрировать рекламные программы из Facebook, Instagram и Google.
Существует множество способов привлечения новых подписчиков в свои списки.

Функциональность дизайна Constant Contact также хороша. Вы можете выбрать шаблон и работать с визуальным редактором, чтобы построить весь дизайн. Однако вы также можете работать с HTML — иногда более продвинутыми способами по сравнению с другими инструментами.

Цены тоже разумные. Вы будете платить около 35 долларов в месяц за план Core и 2500 контактов или 70 долларов за план Plus.

Что вам понадобится для создания электронной почты в формате HTML

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

Вы можете использовать редактор кода, который вам удобен, потому что он должен будет поддерживать вас в процессе. Если вы не знаете, какой из них выбрать, многие пользователи выбирают Visual Studio Code, хотя скобки идеально подходят для этой конкретной задачи. Мы собираемся использовать Onivim2, редактор в стиле Vim, основанный на базовой инфраструктуре VS Code.
Хотя вам и понадобятся навыки работы с HTML, вам не потребуется тот же набор знаний, что и современному веб-разработчику (хотя это и не повредит вашим перспективам).
Вам понадобится способ проверить свои электронные письма — MailHog — это решение, которое мы показываем в другом месте в блоге Kinsta.
Хотя мы не собираемся использовать готовый шаблон, вы можете использовать один из них в будущем.
Вам также понадобится провайдер электронной почты, так как вам понадобится какой-то способ отправить готовое электронное письмо в формате HTML.

Когда все это готово, вы готовы открыть текстовый редактор и начать. Далее мы выполним процесс создания базового электронного письма в формате HTML.

Как создать электронное письмо в формате HTML с нуля

Прежде чем мы начнем, стоит отметить, что мы не собираемся использовать специальный сервис, такой как Mailchimp или AWeber. Вместо этого мы создадим с нуля простой шаблон, который вы сможете импортировать куда угодно.

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

1. Создайте основу для вашего электронного письма в формате HTML

Рекомендуется начать со скелета вашего шаблона электронной почты. Это будет следовать некоторым типичным практикам для HTML в целом:

  0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd”>

  <голова>
    <мета-кодировка="UTF-8">
    
    <название>
  
  <тело>

Здесь происходит кое-что, о чем мы должны упомянуть. Во-первых, мы указываем «тип документа» для Transitional XHTML 1.0, что является обычной практикой среди разработчиков электронной почты. Оттуда мы указываем пространство имен XML, которое будет важно позже.

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

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

2. Добавьте структуру для вашего шаблона электронной почты

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

или другие типичные структурные элементы.

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

Все начнется с простого набора тегов

png» alt=»fb» style=»display:block; семейство шрифтов: Arial, без засечек; размер шрифта: 14px; высота строки: 14 пикселей; цвет:#ffffff; максимальная ширина: 26px;” width=»26″ border=»0″ height=»26″>

ЗАЯВЛЕНИЕ О КОНФИДЕНЦИАЛЬНОСТИ | УСЛОВИЯ ОБСЛУЖИВАНИЯ | ВОЗВРАТ

Если вы больше не хотите получать от нас электронные письма, пожалуйста, отписаться

в теле:

 
  <таблица роль="презентация">

<тд>

Атрибут, который мы установили в теге

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

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

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

3.

Включите стили для ваших элементов

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

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

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

 <тело>
  <таблица роль="презентация">

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

Если вы посмотрите на это в своем браузере, это не будет выглядеть как-то особенно:

Окно браузера, показывающее скелет электронного письма в формате HTML.

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

Макет шаблона электронной почты во время создания (Источник изображения: Settergren).

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

4. Проверьте свою электронную почту

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

Например, Email on Acid содержит полный контрольный список перед развертыванием, который поможет вам убедиться, что ваш шаблон не вызывает проблем:

Веб-сайт Email on Acid.

Пользователи Litmus узнают о PutsMail, но он доступен для всех:

Веб-сайт Litmus.

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

Mailgun также предлагает фантастический сервис, который связан с его основным предложением. Вы можете тестировать почтовые клиенты, браузеры и многое другое через интерфейс. Кроме того, вы можете протестировать такие элементы, как строки темы, чтобы убедиться, что у вас высокий уровень открываемости.

Инструмент проверки электронной почты Mailgun.

Однако после того, как вы проверите свою электронную почту, вам необходимо убедиться, что она попала в папку «Входящие» получателя. В последнем разделе мы обсудим это подробнее.

Отправка электронной почты в формате HTML: что вам нужно знать

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

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

Тем не менее, есть несколько советов, которые мы можем дать по этому поводу независимо от используемой вами платформы:

Убедитесь, что вы следуете всем рекомендациям закона CAN-SPAM, особенно если ваша основная аудитория находится в США. Конечно, в разных странах будут свои правовые директивы.
Включить двойную подписку для подписчиков. Здесь вы просите их подтвердить подписку, а также отправить второе подтверждение. Это защитит вас и подписчика, если в будущем появится спам-запрос или запрос на конфиденциальность.

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

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

Показатель отказов вашего сайта.
Количество жалоб, полученных вашим сайтом в связи с отправляемыми вами электронными письмами.
Репутация вашего IP-адреса.
Подпись вашего доменного имени.

Последнее относится к вашей DomainKeys Identified Mail (DKIM) и Sender Policy Framework (SPF). Кроме того, вы можете проверить репутацию своего IP с помощью таких сервисов, как SenderScore или IPQualityScore.

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

Mailgun — это решение, о котором мы упоминали ранее, и оно может быть идеальным. Однако есть и другие, такие как Mailjet, Sendinblue и даже собственная служба Gmail.

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

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

Вам нужно создавать электронные письма в формате HTML, и если да, то какие у вас есть вопросы? Дайте нам знать в комментариях ниже!

Экономьте время, затраты и повышайте производительность сайта с помощью:

Мгновенная помощь от экспертов по хостингу WordPress, круглосуточно и без выходных.
Интеграция с Cloudflare Enterprise.
Глобальный охват аудитории с 34 центрами обработки данных по всему миру.
Оптимизация с помощью нашего встроенного мониторинга производительности приложений.

Все это и многое другое в одном плане без долгосрочных контрактов, сопровождаемой миграции и 30-дневной гарантии возврата денег. Ознакомьтесь с нашими планами или поговорите с отделом продаж, чтобы найти план, который подходит именно вам.

Руководство по электронной почте в формате HTML: шаблоны кодирования с нуля

Вы создали массу веб-сайтов, можете писать HTML и CSS во сне, и у вас на стене висит большой постер Джеффри Зельдмана.

Итак, насколько сложно создать электронное письмо в формате HTML?

Ну, со всеми современными веб-браузерами и почтовыми клиентами это сложнее, чем вы думаете.

В более широком мире веб-дизайна мы прошли через войны браузеров, когда Netscape и Internet Explorer боролись друг с другом за внедрение конкурирующих способов кодирования почти всего. Благодаря проекту веб-стандартов и связанным с ним усилиям современные веб-браузеры стали более согласованными, чем десять лет назад.

К сожалению, пока шла эта война, почтовых клиентов, таких как Outlook и Lotus Notes, нигде не было видно, они прятались в каком-то углу, оставленные в авансе.

Что еще хуже, чем отсутствие попыток улучшить рендеринг HTML и CSS, некоторые почтовые клиенты фактически пошли назад. Тринадцать лет назад Microsoft решила, что Outlook 2007 перестанет использовать Internet Explorer для отображения электронных писем в формате HTML. Прежде чем вы начнете волноваться, они заменили его Microsoft Word. Да — Microsoft Word: текстовый процессор. В одной версии Outlook превратился из приличного и понятного в совершенно ужасного при отображении электронных писем в формате HTML от всех, кроме других пользователей Outlook.

Outlook по-прежнему использует механизм рендеринга Microsoft Word во всех своих настольных приложениях для Windows, причем каждой итерации присваивается номер версии (кроме последней: Outlook 2016 и 2019 одинаковы, к нашему большому разочарованию).

И Outlook по-прежнему является чрезвычайно популярным почтовым клиентом, но это создает еще больше проблем: создание HTML для электронной почты означает, что вы имеете дело с более чем четырьмя или пятью основными веб-браузерами и от 12 до 15 различных почтовых клиентов, каждый из которых имеет солидный рынок. Поделиться. Литмус однажды заявил, что если вы посчитаете каждую итерацию модели почтового клиента/браузера/продукта, это будет 15 000 различных возможностей!

Некоторые из них великолепны, например Apple Mail. Дизайн, который работает в Safari, будет идеальным в Apple Mail. Некоторые, такие как Outlook, вызывают стресс и беспокойство у каждого разработчика электронной почты. В настоящее время у Gmail самая высокая доля рынка (см. остальную часть разбивки на сайте «Доля рынка электронной почты» от Litmus), и у Gmail есть свои сложности. Между ними находится множество различных ограничений рендеринга, причуд и несоответствий.

Излишне говорить, что перед веб-дизайнерами стоит задача: как использовать свои навыки веб-дизайна 2020 года и применить их к почтовым клиентам с возможностями прошлого тысячелетия?

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

Если вы занимаетесь созданием веб-сайтов достаточно долго и помните славные дни GeoCities и Angelfire, вы, вероятно, создавали свои первые веб-сайты, используя таблицы для макетов. Создание электронной почты в формате HTML сегодня вернет вас в те бурные времена, хотя и с меньшим использованием тега

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

Единственный клиент, которому по-прежнему нужны HTML-таблицы, — это Outlook для рабочего стола Windows, поэтому до тех пор, пока он не станет устаревшим, вам необходимо понимать, как почтовые клиенты отображают таблицы, даже если это просто откат к макетам таблиц для Outlook.

Но сначала важно знать, кому вы отправляете.

Определите привычки просмотра вашей аудитории.

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

В большинстве случаев используются разные почтовые клиенты, но есть несколько способов выяснить это. Campaign Monitor публикует некоторую общую статистику использования почтового клиента, которая дает общий обзор, хотя и с некоторыми ограничениями. Или вы можете заглянуть на сайт Litmus’s Email Market Share.

Однако нет гарантии, что они отражают вашу аудиторию. Campaign Monitor и ряд других поставщиков услуг электронной почты предоставят вам отчет по каждой кампании, в котором будет указан почтовый клиент для каждого подписчика, если он доступен.

В этих отчетах вы ищете наименьший общий знаменатель. Например, если 30 % используют Lotus Notes 7, вам необходимо убедиться, что вы специально тестируете этот клиент перед отправкой. Может иметь значение конкретная версия почтового клиента — Outlook 2003 доставит вам гораздо меньше головной боли, чем Outlook 2007, а в некоторых случаях в вашем списке может использоваться только одна версия.

Если вы никогда раньше не отправляли сообщения в этот список, вам, возможно, придется протестировать каждого клиента, которого вы сможете найти, и сделать обоснованные предположения о типе аудитории, с которой вы имеете дело. Будут ли они использовать мобильные телефоны для чтения электронной почты или закрытые корпоративные серверы? Может быть, все они используют адреса Outlook.com и Yahoo, которые, по крайней мере, легко проверить. Что бы вы ни знали о своей аудитории, сделайте себе несколько заметок о том, какие почтовые клиенты вы хотите проверять больше всего при каждой отправке.

Стоит помнить, что за последние несколько лет количество получателей, читающих электронную почту на своих мобильных устройствах, выросло до 50% времени. На некоторых рынках более 70% электронных писем читаются на мобильных устройствах. Убедившись, что ваши электронные письма реагируют, вы повысите качество обслуживания клиентов, тем более что потребление мобильной электронной почты только продолжает расти.

Используйте таблицы — и не только для данных.

Самая важная рекомендация для электронных писем в формате HTML заключается в том, что макет CSS просто не работает. Основные почтовые клиенты либо вообще не предлагают никакой поддержки, либо искажают ее множеством разочаровывающих способов.

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

Заголовок

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

Существуют некоторые проблемы с использованием таблиц, как это узнали многие дизайнеры на собственном горьком опыте. Вот несколько советов по работе с таблицами в электронном письме.

1. Установите ширину в каждой ячейке, а не в таблице.

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

<тд> <тд>

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

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

2. Вставьте столы для одинакового расстояния.

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

3. Установите цвет фона для таблицы-контейнера.

Некоторые почтовые клиенты игнорируют фон тега или тот, который установлен в вашей таблице стилей. Имея оберточную таблицу вокруг всего вашего контента и устанавливая атрибут bgcolor решит эту проблему.

4. Пробелы имеют значение.

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

Использовать встроенный CSS.

Вот где C для 9Каскад 0198 в CSS пригодится. Применение стиля в строке дает ему приоритет над более удаленными стилями (такими как стили клиента веб-почты), а также работает с почтовыми клиентами, которые удаляют CSS из заголовка или внешних файлов CSS.

В настоящее время единственным крупным почтовым клиентом, который удаляет все другие типы CSS, встроенные теги