Рассылка html писем: бесплатные инструменты для маркетолога — Журнал Mindbox о разумном бизнесе

разбираемся в особенностях создания интерактивных писем

В статье рассказывается: 

1. Зачем вставлять HTML в письмо
2. Важные правила работы с HTML в письме
3. Этапы создания HTML-письма
4. Как вставить HTML в Outlook
5. Способы отправки HTML-письма

6. Пройди тест и узнай, какая сфера тебе подходит:
   айти, дизайн или маркетинг.

   Бесплатно от Geekbrains

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

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

Зачем вставлять HTML в письмо

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

Зачем вставлять HTML в письмо

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

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

Важные правила работы с HTML в письме

Как вставить HTML в письмо таким образом, чтобы ваше сообщение корректно работало? Тут нужно учитывать несколько важных правил:

• Изображения, которые вы используете, обязательно должны быть в общем доступе в интернете. То есть, на веб-странице им быть не обязательно, но в сети – нужна именно общедоступность.
• В атрибуте должен быть прописан URL-адрес целиком. И прежде чем отправлять письмо, проверьте, корректно ли открывается картинка.
• Для ссылок – то же правило. Указывайте полный URL-адрес, не пишите в ссылках относительные пути.

• Что касается CSS, то они либо с элементом встраиваются в HTML, либо нужно давать на них ссылку (опять же, URL-адрес писать полностью).
• JavaScript использовать не рекомендуется. Многие пользователи из предосторожности их отключают. Но если без JavaScript не обойтись, то встраивать обязательно нужно с элементом.
• Какие бы ресурсы вы ни отображали в своем HTML (картинки или что-то еще), всегда указывайте полный интернет-адрес. Получатель должен точно видеть, где в Интернете есть в свободном доступе присланные ему материалы.

Когда хотите вставить HTML-код в письмо, учитывайте еще и то, что не во всех почтовых сервисах есть возможности для поддержания расширенных функций вроде Ajax, CSS или HTML5.

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

Важные правила работы с HTML в письме

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

Этапы создания HTML-письма

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

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

• HTML Email Templates.
• Really Simple Responsive HTML Email Template.
• Litmus Templates.
• Envato Elements .

Топ-30 самых востребованных и высокооплачиваемых профессий 2022

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ ресурсов об IT-сфере

Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT

ТОП 50+ сервисов и приложений от Geekbrains

Безопасные и надежные программы для работы в наши дни

pdf 3,7mb

doc 1,7mb

Уже скачали 16373

Для начала следует уяснить, что любое HTML-письмо обычно включает в себя две составляющие, а именно – шапку (head) и тело (body).

Шапка письма

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

Тип документа обозначен атрибутом <!DOCTYPE>. По нему движок браузера «понимает», как именно нужно считывать HTML и CSS, чтобы страница выдавалась в корректной форме. Есть ряд почтовых сервисов (вроде Gmail, Outlook, Yahoo! Mail), которые вместо данного кода вставляют в письма некий свой, однако специалисты советуют указывать в письмах именно <!DOCTYPE>.

По <meta http-equiv=”Content-Type” /> становится понятно, как именно программа должна обрабатывать и расшифровывать содержание тела письма.

Элемент «text/html» говорит о том, что текст нужно рассматривать как HTML.

Заголовок обозначен символикой <title></title>. Это то, что видит адресат во вкладке поисковика, открыв полученное письмо.

Шапка письма

Для составления адаптивного HTML-письма используют <meta name = ”viewport” />. Здесь содержится информация о масштабировании для устройства, на котором получатель откроет письмо.

Содержание тела письма

Это, собственно, само содержание e-mail-послания, то, что вы хотите донести до адресата.

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

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

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

В качестве главной таблицы выступает именно контейнер шаблона. Ширина тут задается 100 %-ая, чтобы занять всё пространство письма. Отступы (margin, padding, cell padding, cell spacing) специалисты советуют делать равными нулю. Тогда внутри таблицы не получится лишних «белых пятен».

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

Дальше работайте по шаблону, добавляйте все, что в нем предусмотрено: изображения, тексты, кнопки (СТА), меняйте на свое усмотрение цветовое оформление (есть и такая возможность). Размещайте все это по выбранным ячейкам. Оформление текста выберите строчное стилизированнное.

Интенсив «Путь в IT» поможет:

• За 3 часа разбираться в IT лучше, чем 90% новичков.
• Понять, что действительно ждет IT-индустрию в ближайшие 10 лет.
• Узнать как по шагам c нуля выйти на доход в 200 000 ₽ в IT.

При регистрации вы получите в подарок:

«Колесо компетенций»

Тест, в котором вы оцениваете свои качества и узнаете, какая профессия в IT подходит именно вам

«Критические ошибки, которые могут разрушить карьеру»

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

Тест «Есть ли у вас синдром самозванца?»

Мини-тест из 11 вопросов поможет вам увидеть своего внутреннего критика

Хотите сделать первый шаг и погрузиться в мир информационных технологий? Регистрируйтесь и смотрите интенсив:

Только до 19 декабря

Осталось 17 мест

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

Содержание тела письма

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

Как вставить HTML в Outlook

Вот последовательность шагов для того, чтобы вставить HTML в письмо в Outlook (для версии 2016 года). Все делается очень просто по шаблону.

1. Войдите в Outlook и кликните там «Новый email-адрес». Либо можно открыть новое окно через Ctrl + N.
2. Опция «Прикрепить файл» появляется после щелчка правой кнопкой мыши по верхней части этого окна. Либо через Вставить ® Прикрепить файл.
3. Чтобы прикрепить собственный шаблон, кликните по появившейся кнопке в окне сообщения.
4. Теперь нужно определить местоположение файла HTML, нажать на кнопку со стрелкой (рядом с «Вставить»).
5. В завершение кликнуть «Вставить текст».

Можно вывести функцию вложения на панель быстрого доступа. Для этого зайдите в раздел «Файл», там слева выпадет список, в нем выберите «Панель быстрого доступа» и далее «Прикрепить файл». Так вы сможете быстрее вставлять HTMLв письма в Outlook.

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

• Обязательно каждую картинку дополняйте замещающим текстом.

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

• Проверьте правильность всех используемых шрифтов.

Имейте в виду, что MS Outlook нормально «видит» лишь определенные, заданные шрифты. Остальные автоматически заменяет на Таймс Нью Роман, и результат может быть, мягко говоря, не очень хорошим. Поэтому лучше сразу пользуйтесь стандартами вроде Ариал, Джорджия. Если же у вас есть собственный, брендовый шрифт, то лучшее, что тут можно сделать, это задать для использования подходящий стандартный шрифт, но только не Times New Roman.

• Пользуйтесь таблицами.

Это позволяет придавать письму четкую структуру, разделять его содержание, задавать желаемый фон, стиль и т.п. Благодаря таблицам, все адресаты увидят именно то, что вы хотели до них донести, и тут не важно, какими почтовыми системами они пользуются. Чтобы сообщение получилось интерактивным, обязательно нужно добавить align = «влево». Боксы с информацией будут появляться в корректной форме и на широком экране (следуя рядами), и на узком (разместившись один над другим).

• По возможности выдерживайте размер 550-600 пикселей.

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

Способы отправки HTML-письма

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

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

Google-почта

Вот как вручную вставляется HTML-письмо в Gmail:

1. Кликните «Написать». Появится форма для нового письма. Наведите курсор на поле для текста и в меню под правой кнопкой мыши нажмите «Проверить».
2. Система выделит синим цветом код поля для текста письма. По нему нужно щелкнуть правой кнопкой мыши, найти в появившемся списке «Редактировать как HTML», тоже кликнуть по этому пункту правой кнопкой мыши и снова выбрать «Редактировать как HTML».
3. Далее элемент <br> нужно убрать и на его место поставить HTML-код. Теперь можно закрыть окно консоли. В поле для текста письма в Googl-почте появится ваше письмо.
4. Останется ввести адрес получателя и заполнить строку «Тема».
5. Для проверки отправьте это письмо. Если, к примеру, в HTML-шаблоне вы не указали ссылку на картинку, то когда она откроется в Gmail, там в углу (на самой картинке) отобразится надпись «Скачать» (в виде кнопки).

Почта Mail.ru

HTML-письмо вставляется вручную на почте Мail.ru следующим образом:

1. Откройте форму для нового письма. Нажмите правую кнопку мыши в любой точке поля для текста, далее — пункт «Проверить».
2. Синим цветом будет показан код поля для текста письма. Нужно щелкнуть по нему правой кнопкой мыши и нажать «Редактировать как HTML».
3. Далее элемент <br> нужно убрать и на его место поставить HTML-код. Теперь можно закрыть окно консоли. В поле для текста письма в почте Mail.ru появится ваше письмо.
4. Укажите адрес, на который хотите отправить письмо и заполните строку «Тема».
5. Остается выполнить отправку текстового письма, чтобы увидеть возможные ошибки.

Яндекс-почта

Вот как вручную вставляется HTML-письмо в Yandex:

1. В первую очередь необходимо включить панель оформления, потому что по умолчанию она отключена, а это не позволит вставить в письмо HTML-код.
2. Откройте форму для нового письма. Наведите курсор на поле для текста, щелкните правой кнопкой мыши, далее – «Проверить».
3. Синим высветится строка с кодом поля для текста письма. По нему нужно нажать правой кнопкой мыши и далее – «Редактировать как HTML».
4. Далее элемент <br> нужно убрать и на его место поставить HTML-код. Теперь можно закрыть окно консоли. В поле для текста письма в Яндекс-почте появится ваше письмо.
5. Подправьте HTML-шаблон, если в нем нарушилось форматирование, обнаружились пустые строки, например, или ненужные отступы.
6. Введите электронный адрес получателя, заполните строку «Тема».
7. Остается отправить письмо, чтобы выявить возможные ошибки.

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

Продвижение блога — Генератор продаж

Рейтинг: 4

( голосов 3 )

Поделиться статьей

Вёрстка писем для емейл-рассылки: 5 способов оптимизации

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

Классический подход

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

Плюсы

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

Минусы

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

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

Рассмотрим основные способы оптимизации этой схемы.

Мастер-шаблоны

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

Пример мастер-шаблона

В блоге EMAILMATRIX есть подробные статьи с нюансами создания мастер-шаблонов и емейл-гайдлайнов для компаний.

Плюсы

Мастер-шаблон заметно сокращает два самых трудозатратных этапа: дизайн и вёрстка рассылки сводятся к выбору готовых блоков и замене контента в них.

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

Минусы

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

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

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

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

Автоматическое письмо EMAILMATRIX

Плюсы

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

Минусы

Обойтись только автоматическими контентными письмами очень сложно.

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

Емейл-фреймворки

Фреймворки предполагают упрощённый синтаксис вёрстки — понятный и компактный. Затем он преобразуется в привычную HTML-вёрстку.

Обобщённо работу фреймворка можно представить следующей схемой:

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

Рассмотрим несколько фреймворков. Старший из них — Foundation for Emails — появился ещё в 2013 году. Для разметки в нём используется язык Inky HTML, а готовое письмо собирается на Gulp или с помощью сервиса инлайнера.

Следующий по старшинству — MJML. Это проект с открытым исходным кодом, который существует с 2016 года. Работает с одноимённым языком разметки, а готовую емейл-вёрстку можно получить после сборки проекта или воспользовавшись онлайн-редактором либо приложением. MJML — один из самых известных емейл-фреймворков. Среди особенностей — поддержка нетипичных компонентов вроде каруселей и аккордеонов (правда, они мало где работают) и формирование QR-кодов.

У MJML есть и существенный недостаток — по крайней мере для российских пользователей. Его разработчики делают большой акцент на использовании в письмах медиазапросов, которые не поддерживаются «Яндекс Почтой». А на неё приходится около 30% пользователей в РФ, так что применение фреймворка для рассылок российской аудитории представляется крайне сомнительным.

Самый молодой емейл-фреймворк — Ampier Framework. Он подключается как JavaScript-библиотека, после чего сразу готов к использованию. Для разметки используется язык TJML. Его ключевое отличие — из единого кода формируются и HTML-, и AMP-части письма.

Среди дополнительных возможностей Ampier Framework — проверка отображения письма в двух вариантах тёмной темы. Это классический — с инверсией светлых цветов и неизменностью тёмных — и характерный для Gmail на iOS, когда происходит полная инверсия цветов. Фреймворк не накладывает каких-либо ограничений на структуру и дизайн письма и даёт полную творческую свободу, в том числе для управления мобильной адаптацией и формирования AMP/HTML-версий.

Плюсы

Фреймворки ощутимо упрощают и ускоряют вёрстку писем для рассылки.

Минусы

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

Блочные редакторы

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

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

Интерфейс емейл-конструктора «Тильды»

В Letteros пользователь загружает свой мастер-шаблон и затем берёт блоки оттуда и наполняет контентом. Схожая функция есть у Stripo: здесь можно создавать собственные блоки.

Плюсы

Письма создаются быстрее и почти без участия верстальщика.

Минусы

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

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

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

Mailchimp и Stripo с весны 2022 года не работают в РФ. Оплатить сервисы через российские платёжные системы невозможно.

Плагины для Figma

С помощью плагинов можно реализовать nocode-подход к разработке писем. Среди них — Emailify и российские Marka и Ampier.

Интерфейсы плагинов схожи. Пользователь собирает письмо из заготовок — ассетов, заменяет контент и указывает параметры вроде темы и прехедера. После рендеринга — переход в интерфейс с дополнительными возможностями. У плагина Ampier они совпадают с фреймворком: проверка тёмной темы и мобильной адаптации, формирование AMP-кода и другие.

Интерфейс плагина Ampier for Figma

Плюсы

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

У Marka и Ampier нет никаких ограничений по структуре писем. Обязательна только их сборка с инструментом Auto Layout, который Figma активно продвигает. После недавнего обновления пользоваться им стало проще.

Минусы

В рамках Figma не получится сделать письмо со сложным AMP-интерактивом.

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

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

Три вывода

• Нет универсального решения, которое подойдёт любому бизнесу. Ориентируйтесь на свои потребности и ресурсы. Для однотипных писем достаточно блочного редактора, при большом штате умелых дизайнеров стоит рассмотреть плагины, а фреймворки полезны тем, кто хочет ускорить вёрстку, не ограничивая себя в творчестве.
• Лучший результат даёт комбинирование подходов и инструментов для разных типов задач.
• Важно пробовать новые инструменты — хотя бы на тестовых проектах. Это позволит найти оптимальные решения.

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

Время чтения 9 минут

Монитор кампании — 5 марта 2019 г.

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

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

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

Электронные письма HTML и обычный текст: обзор

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

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

В электронных письмах

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

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

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

Обычный текст электронной почты

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

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

ASCII означает Американский стандартный код для обмена информацией. Этот код, разработанный в 1960-х годах, был утвержден в качестве кодовой базы в 1986 году. Текст ASCII состоит из определенного набора определенных символов, включая все буквы нашего английского алфавита, цифры, знаки препинания и некоторые символы.

Стандартный ASCII ограничен этим набором символов. Он не предоставляет абсолютно никакой информации о шрифте, размере и цвете. Когда эти символы появляются в электронном письме, выбор способа их отображения полностью зависит от программы электронной почты. Одно и то же электронное письмо в формате ASCII может отображаться черным шрифтом Times New Roman размером 12 пунктов на одном компьютере и фиолетовым шрифтом Arial размером 10 пунктов на другом.

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

Учитывая, что первоначальным и единственным вариантом текста электронной почты был кодек ASCII, люди придумали творческий способ «украсить» свои электронные письма — искусство ASCII.

ASCII-арт — это графика, состоящая из символов ASCII. Лучше всего он работает при просмотре с моноширинным шрифтом или шрифтом фиксированной ширины, например Courier. Это шрифты, в которых каждый символ занимает одинаковое пространство по горизонтали. Пропорциональный шрифт, в котором буква P может быть шире, чем буква L, в конечном итоге разрушает интервалы для изображений ASCII.

Источник изображения: ASCII Art Archive

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

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

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

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

Минусы : Нет контроля над форматированием; нет возможности включать встроенные ссылки, изображения или мультимедиа.

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

Служба электронной почты, такая как Campaign Monitor, автоматически выполняет преобразование HTML в обычный текст.

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

Источник изображения: Campaign Monitor

HTML-письма

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

В электронных письмах

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

Звучит здорово, но нужно помнить несколько вещей.

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

Это означало бы, что маркетологам электронной почты часто приходилось бы разрабатывать свои электронные письма в формате HTML, чтобы либо обойти некоторые из блоков Gmail, либо просто вернуться к обычным текстовым электронным письмам. Каскадные таблицы стилей (или CSS) — это код, который определяет, будет ли строка текста шрифтом Verdana, красным или синим цветом.

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

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

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

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

Люди по-прежнему сообщают о проблемах с удалением CSS из электронных писем, как вы можете видеть в этой ветке форума поддержки Microsoft от ноября 2018 года.

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

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

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

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

Минусы : CSS можно удалить. Он может содержать вирусы и мошенничество и с большей вероятностью будет помещен в папку со спамом.

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

Ключевые отличия и преимущества электронной почты в формате HTML по сравнению с обычным текстом

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

Вот еще несколько вещей, которые следует учитывать:

1. Лучшая аналитика? Победитель — электронная почта в формате HTML

. Электронные письма

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

2. Проблемы с доступностью? Победитель — электронная почта в виде простого текста

.

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

3. Опасаетесь спама? Они связаны

Электронная почта

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

Подведение итогов

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

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

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

 

Как импортировать мой HTML-шаблон в Outlook?

Узнайте, как импортировать HTML-шаблон в Outlook.

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

Вы можете установить расширение Chrome, подобное этому.

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

Существует несколько версий Outlook, каждая из которых работает по-своему, поэтому, если эта версия вам не подходит, свяжитесь с нами через чат или отправьте электронное письмо по адресу [email protected] 

В этой статье вы найдете, как:

• Импорт электронных писем в формате HTML в Outlook 365

• Импорт электронных писем в формате HTML в Outlook 2016

• Советы по вставке HTML-кода в Outlook

1. Выберите дополнительные команды для настройки панели быстрого доступа » на панель инструментов

   3. Откройте окно «прикрепить файл» из панели быстрого доступа

   4. Выберите файл HTML, который необходимо импортировать, НО пока не нажимайте кнопку ВСТАВИТЬ

   5. Переключите кнопку «Вставить» кнопку с кнопкой «вставить как текст» и нажмите

   1. В меню «Файл» выберите «Параметры», чтобы отобразить «Параметры Outlook».

   2. Нажмите «Создавать сообщения в этом формате»

   3. В раскрывающемся меню выберите «HTML». Нажмите «ОК»

   
   Если это не так, как вам кажется, свяжитесь с нами через чат.

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

   • Вы должны установить цвет фона в письме и изменить шрифты там же.

   • Делайте это как можно проще.

   • Отзывчивые OFT невозможны, только фиксированная ширина.

   • OFT не подходят для работы на Mac, лучше всего работать с ними на ПК с Windows.

   • Этот плагин может быть огромным преимуществом: https://archive.codeplex.com/?p=outlookhtmleditor — он позволяет вам кодировать там, где вы обычно это делаете, а затем импортировать HTML в пустое сообщение, настраивать, добавлять темы и сохранить как OFT для распространения. Он также покажет вам, что Outlook делает с кодом после его сохранения в формате OFT. Ваш код, отвечающий на медиа-запросы, не будет работать, но в большинстве случаев его не нужно удалять, Outlook просто игнорирует его.

   • Чтобы преобразовать их, я открываю HTML-файл в Word, затем сохраняю его как документ Word 97 — это немного очищает код. Затем выберите все, скопируйте документ Word и вставьте его в новое электронное письмо, а затем сохраните его как файл .oft.

   • Придерживайтесь таблиц при создании HTML-шаблона электронной почты Outlook. Использование таблиц для компоновки не является хорошей практикой в ​​веб-мире, но по-прежнему является хорошей практикой в ​​электронной почте, особенно для поддержки Outlook.

     No related posts.