Рассылка писем html: Как сделать HTML-письмо для рассылки без верстальщика: бесплатные инструменты для маркетолога

Верстка адаптивных писем для email-рассылки

На эффективность рассылки влияет множество факторов. Один из главных – внешний вид. За него отвечают верстка и хороший дизайн.

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

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

Виды верстки email-рассылки

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

У каждого инструмента есть свои преимущества и недостатки.

HTML-верстка

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

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

Сложная рассылка от спортивного бренда – здесь много кнопок, ссылок, далее идет каталог товаров

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

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

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

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

Более простое письмо с сертификатом на скидку от фотостудии – здесь есть картинка, текст, ссылка на сайт и уникальный код

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

Стандартные возможности верстки в редакторе drag’n’drop:

• добавлять блоки с текстом
• вставлять изображения
• добавлять кнопки, например «Поделиться»
• давать ссылки на соцсети в формате иконок

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

В разных сервисах рассылок свои инструменты, но работают они по схожим принципам. Мы покажем, как собрать письмо, на примере сервиса Sendsay.

Верстка рассылки в сервисе Sendsay

Когда письмо нужно собрать быстро и c минимальными усилиями, можно воспользоваться готовыми шаблонами. В сервисах почтовых рассылок есть базовые шаблоны и тематические. Базовые шаблоны пустые ― их нужно заполнять самостоятельно. У тематических уже есть дизайн, который можно отредактировать: поменять цвет кнопок, текст, ссылки и запускать рассылку.

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

Кликаем «Создать выпуск», далее выбираем Email

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

  Возможности верстки писем встроенного редактора сервиса Sendsay

Если нужно быстро сверстать типовое письмо, выберите шаблон из галереи – останется только добавить в него информацию. В сервисе есть базовые пустые макеты (каталог, оповещение, приветственное письмо), а есть тематические на разные случаи (дайджест, Черная пятница, 8 марта).

  Базовые шаблоны писем в сервисе Sendsay

  Тематические шаблоны писем в сервисе Sendsay

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

Пример верстки рассылки в блочном редакторе сервиса Sendsay

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

  Интерфейс и набор инструментов блочного редактора сервиса Sendsay

Добавьте нужное количество колонок исходя из прототипа. Самая простая структура – одна-две колонки. Большинство браузеров и приложений корректно отображают  такие письма.

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

Выберите нужные элементы и перетащите в тело письма. Настройте отображение: расположение, цвет, размеры.

  Следующий этап верстки писем для email-рассылки на примере сервиса Sendsay

Добавьте иллюстрации, впишите текст, вставьте ссылки для кнопок, баннеров, иконок.

Письмо почти готово

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

Так сверстанное письмо будет выглядеть на вертикальном экране смартфона

На что обратить внимание при верстке

Не упустите несколько ключевых моментов:

• Не забудьте, что почтовые клиенты не любят тяжелые письма. Если вес письма будет небольшим – больше вероятности, что оно отобразиться и не попадет под кнопку «Показать содержимое». Величина письма, самой верстки и вложенных файлов, должна быть не более 102 Кб и 5 Мб.
• Добавляйте кнопки действий и ссылки на соцсети или для перехода на сайт.
• Учтите, если блоки несимметричны, они могут некорректно перестроиться в мобильной версии письма. Если так и произошло – поправьте расположение элементов, установив отступы вручную. Симметричные рассылки в большинстве случаев адаптируются под разные устройства корректно.

В финале проверьте, как письмо отображается в разных браузерах и почтовых клиентах (Outlook, Gmail, Yandex, Mail.ru), сделав тестовую рассылку. По умолчанию верстка, выполненная в блочном редакторе, корректно отображается в большинстве популярных почтовых клиентов. Если ваша аудитория пользуется экзотическими почтовыми программами, стоит проверить, как в них отображается письмо.

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

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

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

Первый шаг в верстке HTML-письма – создание макета. На данном этапе создается дизайн и продумывается структура будущей рассылки. Подробнее можно почитать в нашей статье «Гид по дизайну в электронной рассылке».

На платформе рассылок Sendsay простой и удобный редактор кода. Чтобы в него попасть, кликните «Создать выпуск», выберите Email и среди предложенных вариантов по созданию письма – в HTML-редакторе.

  Создание рассылки в сервисе Sendsay

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

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

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

Как верстать HTML-письма: основные правила

При верстке email-рассылок в HTML-редакторе нужно соблюдать несколько принципов:

• Использовать табличную верстку. При таком способе блоки с контентом помещаются внутрь одной общей таблицы. Благодаря этому сообщения нормально отображаются в почтовиках и браузерах, которые не поддерживают новые версии HTML и CSS.
• Применять универсальные HTML-теги и атрибуты. Для верстки рассылок нужно использовать универсальные элементы кода, потому что не все браузеры считывают даже некоторые стандартные теги.
• Использовать встроенные стили CSS. Это атрибуты, которые отвечают за оформление адаптивного письма в HTML. Их можно прописать в коде или отдельно и вставить в код ссылку на правила оформления. Но чтобы email-письма корректно отображались всеми клиентами, нужно описать CSS как атрибут в элементах HTML (inline-CSS), либо прописать общие стили для всего письма в head документа.
• Указывать конкретные атрибуты для некоторых элементов HTML. Для таблиц прописывать ширину, расстояние от рамки до содержимого, отступ между ячейками. Для текста цвет, размер, межстрочный интервал, для изображений – ширину и так далее. Так почтовик не поставит эти значения по умолчанию, а возьмет из кода, и верстка не рассыпется.
• Указывать фиксированную ширину письма. В среднем – от 600 px до 700 px. Благодаря этому на мобильных устройствах письмо нужно будет листать вниз, а не в бок.
• Использовать стандартные шрифты. Чтобы текст везде отображался одинаково, пользуйтесь шрифтами, которые поддерживают все почтовые клиенты и устройства, например, Helvetica или Arial.

Для верстки почтовых рассылок подходит доктайп 4.01 (поддерживает все актуальные элементы и атрибуты) и кодировка UTF-8 (наиболее распространенная общепринятая кодировка).

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

Как может выглядеть адаптивная страница на разных устройствах

Для создания адаптивных писем используют:

• Гибридную верстку. Контент заключают в теги <center>, по горизонтали располагают теги <span> с указанной шириной. Тогда 2-3 колонки в письме на мобильном устройстве перестроятся в одну.
• Медиа-запросы. Это команды, которые подстраивают письмо под разрешение устройства. Пользователю будет комфортно читать сообщение с любого экрана. Однако не все почтовые клиенты их поддерживают.
• Mobile First. Принцип, при котором письмо сначала верстают под мобильные гаджеты, а потом адаптируют для компьютеров.

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

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

Делаем выводы и повторяем главное

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

Что нужно вспомнить перед тем, как верстать рассылку:

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

Мы разобрали основные нюансы верстки адаптивного письма. Как сделать рассылку с нуля от стратегии и текста до анализа эффективности, рассказали в этой статье – «Как сделать рассылку по email с нуля: инструкция».

Над статьёй работали:

Похожие статьи

9 полезных советов и 12 сценариев email-рассылок для интернет-магазинов

19.

10.2019

Как определить лучшее время для маркетинговой рассылки

09.06.2017

Присоединяйтесь к нам в соцсетях

Верстка html-писем для рассылки: разбираем основные ошибки

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

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

К чему приводит неправильная вёрстка письма

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

• письмо будет отображаться по-разному в почтовых клиентах: какой-то блок может исчезнуть, какой-то окажется не на своем месте;
• фоновое изображение может пропасть;
• рукописные и нестандартные шрифты превратятся в безопасные Arial или Times New Roman;
• письмо будет долго загружаться в почтовике;
• какие-то элементы письма могут отличаться от макета. Некоторые почтовики, накладывают свои стили поверх прописанных, удаляют или игнорируют стили.

На что обращать внимание при вёрстке писем, чтобы избежать проблем

Лучше не использовать <div>

Тег <div> неправильно позиционируется некоторыми почтовыми клиентами, из-за чего блоки могут разъезжаться по странице. Поэтому, когда речь идёт о письмах, где важен дизайн и ровное расположение блоков, безопаснее верстать таблицами: они отображаются без искажений.

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

Пример расположения колонок в табличной вёрстке письма

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

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

Пример одноколоночного макета

Ограничить размер макета

Ширина макета не должна превышать 700px, чтобы письмо могло полностью отобразиться в Яндекс.Почте на ноутбуках, диагональ которых равна или меньше 15″. Если макет будет шире, он не поместится и частично скроется из-за колонок по бокам экрана. Читать такое письмо неудобно.

Быть готовым, что нестандартные шрифты отобразятся не на всех устройствах

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

• Arial,
• Courier,
• Georgia,
• Helvetica,
• Lucida Sans,
• Tahoma,
• Times New Roman,
• Trebuchet MS,
• Verdana.

Не сокращайте стили и не встраивайте их через внешние ссылки

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

<div>Пример текста</div>

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

• Premailer.io;
• inlinestyler.torchbox.com.

Они автоматически переведут все внешние стили во встроенные. Помимо внешних, проблемы могут возникнуть и с сокращенными стилями. Например, лучше не использовать:
padding: 1px 2px 3px 4px. 

А заменить код на:  padding-left: 1px; padding-right: 2px; padding-top: 3px; padding-bottom: 4px.

Сокращайте длину кода

Если размер письма превысит 100Кб, Gmail и Yahoo обрежут письмо. Тогда у пользователя на экране появится кнопка-ссылка с предложением открыть полную версию письма. Читатель может не понять, что происходит, и закрыть письмо.

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

Осторожно используйте фоновые изображения

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

Письмо с фоновой картинкой и текстом сверху

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

Телефоны и адрес почты прописывайте ссылкой

Если этого не сделать, то это сделают почтовые сервисы. Они применят свои стили по умолчанию, в результате чего оформление номера телефона может отличаться от задуманного.

Подробнее о html-вёрстке писем можно узнать в блоге Email Soldiers.

Что можно использовать при вёрстке писем

Картинки 

Изображения помогают запоминать до 65% информации, в то время как текст — только 10% — согласно исследованиям Hubspot. Вот несколько советов, как вставить картинки в письма и не испортить макет:

Gif-анимация

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

Не забывайте следить за размером gif. Чем больше файл анимации, тем дольше он загружается у пользователей. Делайте анимацию до 3 Мб, максимум — 5 Мб.

Прехедер

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

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

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

Расскажем о сервисах, которые помогут с вёрсткой писем.

EmailOnAcid

Особенности:
Сервис позволяет проверить отображение письма в 112 почтовиках: мобильных версиях, десктопных и веб. Минимальная подписка обойдётся 73 доллара за месяц.

Достоинства:

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

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

Litmus

Особенности:
Сервис позволяет проверить письмо в 90 почтовых сервисах. Из дополнительных функций — веб-ide, который позволяет редактировать код, система аналитики email-рассылки, функции тестирования производительности, проверка на «спамность». Минимальная подписка обойдётся 80 долларов в месяц.

Достоинства:

• Инспектор обработанного кода. Выделяйте любой участков письма, просматривайте код и сразу же его правьте.
• Тестовый период. Доступен в течение 7 дней. Можно проверить большую часть функционала сервиса.
• Анализ кода и предложения по его улучшению. Сервис проверяет код по 1000 правил, которые нацелены улучшить его совместимость с почтовыми клиентами.
• Отчёт проверки. С подробными пояснениями и визуальным оформлением.

Недостатки:
Некоторые функции доступны только в подписках Pro и Enterprise. Например, советы, как избежать спам-фильтра и попасть в папку «Входящие».

Вёрстка писем: подведём итог

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

Чтобы облегчить процесс вёрстки писем, нужно придерживаться некоторых правил и тестировать код на ошибки в специальных сервисах — EmailOnAcid или Litmus.

Если же вёрстка email-рассылок всё равно не радует ни вас, ни клиентов, можно пройти электронный курс по вёрстке, который поможет получить недостающие знания по HTML и CSS, научит обходить особенности почтовых сервисов и создавать красивые адаптивные письма с уникальным дизайном. 

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

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

HTML и обычный текст: в чем разница?

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

Вот пример обычного текстового письма:

А вот пример электронного письма в формате HTML:

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

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

Плюсы и минусы каждого типа электронной почты

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

Профессионалы электронной почты с обычным текстом

• Все почтовые клиенты одинаково отображают сообщения с обычным текстом, что обеспечивает постоянную доставку.
• Сообщение выглядит более личным, а не автоматическим.
• Некоторые устройства, такие как Apple Watch, обрабатывают обычный текст лучше, чем HTML.

Минусы электронной почты в виде обычного текста

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

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

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

Минусы электронной почты в формате HTML

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

Профи гибридной электронной почты

• Сообщение по-прежнему отображается как личное и написанное от руки.
• Легче сканировать получателей.
• Сохраняет возможность отслеживания HTML.

Минусы гибридной электронной почты

• Все еще HTML, поэтому некоторые почтовые клиенты могут плохо его обрабатывать. К счастью, вместе с HTML-версией легко отправить текстовую версию.

Сравнение производительности

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

HubSpot провел собственное A/B-тестирование и пришел к интересным выводам. Они сравнили гибридные электронные письма (называемые простым текстом) и различные типы электронных писем в формате HTML. Вот их выводы:

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

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

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

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

В последнем тесте HubSpot они сравнили количество кликов по электронным письмам в зависимости от количества изображений внутри. Хотя есть несколько падений и подъемов, тенденция ясна: больше изображений = меньше конверсий. Но почему это? В конце концов, изображения в социальных сетях работают намного лучше, чем просто текстовые сообщения, и обычно считаются «магнитами для кликов».

Объяснение более низкой производительности электронных писем в формате HTML

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

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

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

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

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

Итак, ответ заключается в использовании простых текстовых сообщений электронной почты?

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

Существует вероятность снижения уровня вовлеченности при использовании гибридных электронных писем или электронных писем с обычным текстом. Дерек Халперн из DIYThemes делится: «По моему опыту, когда вы отправляете полный текст, вы получаете меньше комментариев, меньше репостов в социальных сетях и в целом МЕНЬШЕ взаимодействуете со своими подписчиками».

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

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

Заключение

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

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

• Обычный текст против GIF
• Обычный текст и изображения/графика (легкий HTML)
• Легкий HTML против тяжелого HTML
• и низкое количество изображений по сравнению с большим количеством изображений

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

P.S. Если вы нашли это полезным, вам понравится наш тестер строки темы электронной почты

Настройка потоков электронной почты с помощью Power Automate — Power Automate

Редактировать

Твиттер LinkedIn Фейсбук Электронная почта

• Статья
• 09.02.2023
• 3 минуты на чтение

Вот основные практические сценарии для электронной почты в Microsoft Power Automate с примерами их реализации.

1. Отправьте красиво оформленное электронное письмо.

2. Добавьте изображение в сообщение электронной почты.

3. Отправить письмо в список рассылки.

4. Отправка автоматических ответов из общего почтового ящика.

5. Изменение формата даты и времени электронной почты.

Отправить красиво оформленное электронное письмо

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

Вариант 1. Запись HTML непосредственно в поток

1. Нажмите кнопку в текстовом редакторе в конструкторе Power Automate.

2. Введите любое содержимое HTML в тело сообщения электронной почты.

Вариант 2. Скопируйте HTML из электронной почты Outlook

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

1. Создайте электронное письмо в Outlook, применив цвета, заполнители содержимого, изображения и таблицы.

2. Отправить электронное письмо самому себе.

3. Откройте электронное письмо, которое вы отправили себе в Outlook. Обязательно используйте новое окно; не используйте окно предварительного просмотра в Outlook.

4. На вкладке Сообщение выберите Дополнительные команды ( … ) > Действия > Другие действия > Просмотр исходного кода .

   HTML-представление электронной почты открывается в текстовом редакторе.

5. Найти в файле.

6. Скопируйте содержимое между и .

7. Вернувшись в Power Automate, нажмите кнопку в текстовом редакторе действия Отправить электронное письмо (версия 2) , а затем вставьте содержимое, скопированное из Outlook.

8. Выберите Сохранить в нижней части шагов потока, чтобы сохранить поток.

9. Обязательно протестируйте поток, чтобы убедиться, что он работает должным образом.

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

1. Загрузите изображение в облачное хранилище, например Google Диск или OneDrive для бизнеса.

2. Получить URL-адрес анонимного посетителя изображения.

3. В Power Automate Отправить электронное письмо действие, выполните следующие действия:

   1. Перейдите в раздел HTML редактора форматированного текста.

   2. Найдите  в HTML.

   3. Измените значение свойства src на URL-адрес изображения из поставщика облачного хранилища, куда вы загрузили изображение.

      Ваш src  должен быть похож на: png»/> .

   Важно

   Размер встроенных изображений ограничен 100 КБ. Это может повлиять на качество изображения.

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

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

1. Добавьте действие Получить членов группы из соединителя Azure AD, а затем выберите список рассылки.

2. В действии Azure AD — Получить членов группы добавьте Применить к каждому действию .

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

Это можно сделать в веб-версии Outlook.

1. Войдите в веб-версию Outlook на странице https://outlook.office365.com, используя свои учетные данные Office 365.

2. Выберите изображение своего профиля (или изображение-заполнитель) в правом верхнем углу.

3. Выбрать Открыть другой почтовый ящик .

4. Введите имя или адрес электронной почты общего почтового ящика, а затем выберите его.

5. Выберите Настройки в правом верхнем углу, а затем выберите Автоматические ответы .

6. Настройте автоматический ответ.

Изменение формата даты и времени в электронном письме

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