Как вставить html в электронное письмо в Outlook

Обновлено: 06.07.2024

Допустим, вы используете Microsoft Outlook и вам нужно создать и отправить электронное письмо в формате HTML (например, информационный бюллетень в формате HTML с текстом и изображениями). Прежде всего, вы быстро поймете, что если вы создаете письмо с помощью Outlook или Word, исходный код письма будет плохо отображаться в других почтовых клиентах. Это происходит потому, что Outlook генерирует исходный код электронной почты, используя в основном VML (язык векторной разметки), который плохо поддерживается другими почтовыми клиентами. Так как же вставить HTML-код в электронные письма Outlook?

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

Outlook всегда изменяет импортированный HTML-код, если только вы не используете файл шаблона OFT, трюк с макросом или Bells & Whistles для Outlook


Чтобы вставить собственный HTML-код электронной почты, в Интернете есть множество статей, в которых рекомендуется перетаскивать HTML-файл через Outlook или вставлять HTML-файл с помощью функции «вставить как текст». Ну, они просто неправы. Вскоре вы обнаружите, что Outlook изменяет/преобразует ваш HTML-код: нет возможности вставить собственный чистый HTML-код в Outlook, просто выполнив операцию копирования/вставки или перетаскивания.

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

<р>1. сохраните свой HTML-файл в качестве шаблона электронной почты Outlook OFT, а затем предварительно загрузите свое электронное письмо с помощью шаблона OFT (см. это руководство о том, как создать шаблон Outlook OFT из HTML);

<р>2. использовать макрос-скрипт для загрузки HTML-кода непосредственно в электронное письмо Outlook;

<р>3. используйте Bells & Whistles для Outlook: он добавляет кнопку «Вставить HTML» в редактор электронной почты Outlook, что упрощает выбор HTML-файла и вставку его HTML-кода в электронную почту Outlook.

Как вставить чистый HTML-код в Outlook

Как вставить html в Outlook с помощью надстройки

Предполагая, что вы загрузили Bells & Whistles (ссылка для скачивания), все, что вам нужно сделать, это открыть новое электронное письмо Outlook, затем перейти в меню Bells, нажать большую синюю кнопку «Вставить HTML» и выбрать файл HTML, который будет загружен в вашу электронную почту. Вот и все!

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

Убедитесь, что вы не используете пробную версию Office с истекшим сроком действия (режим разработчика отключен в пробных версиях Office с истекшим сроком действия). Следующая процедура была протестирована в Microsoft Outlook 2010 и 2013.

настроить ленту Outlook

<р>1. Включите режим разработчика Outlook, щелкнув правой кнопкой мыши ленту Outlook (область меню) -> выберите «Настроить ленту» -> отметьте / включите «Разработчик»;

Макробезопасность Outlook

<р>2. Во вкладке «Разработчик» перейдите в «Безопасность макросов» -> включите «Уведомление для всех макросов»;

Word library

<р>3. На вкладке «Разработчик» нажмите «Visual Basic» -> «Инструменты» -> «Ссылки» -> включите «Библиотека объектов Microsoft WORD 15.0» (не путайте ее с «Библиотекой объектов Microsoft Office 15.0»). Если вы используете Office 2010, найдите Word 14.0 (15.0 означает Office 2013);

новый макрос Outlook

<р>4. В меню «Макросы разработчика» -> «Макросы» введите имя нового макроса (например, InsertHTMLFile), затем нажмите «Создать»;

<р>5. В редакторе макросов скопируйте и вставьте следующий исходный код между строками Sub End Sub:

Затемнить insp как инспектор
Установить insp = ActiveInspector
Если insp.IsWordMail, то
Затемнить wordDoc как Word.Document
Установить wordDoc = insp.WordEditor
wordDoc. Application.Selection.InsertFile "e:\test.html", False, False, False
End If

<р>6. Замените «e:\test.html» фактическим путем к нужному файлу HTML, который вы хотите вставить в тело сообщения электронной почты Outlook. Убедитесь, что вы используете абсолютный путь к файлу HTML (например, «C:\MyDocs\outlook-file.html», а не «MyDocs\outlook-file.html»);

<р>7. Сохраните макрос. На всякий случай перезапустите Outlook, чтобы активировать изменения;

вставить чистый HTML в Outlook

<р>8. Создайте новое электронное письмо Outlook, затем перейдите на вкладку «Разработчик» -> «Макросы» и выберите только что созданный макрос. Он вставит неизмененный HTML-код в вашу электронную почту Outlook 🙂

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

Ограничения Outlook HTML

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

Outlook известен своим HTML-рендерингом. Система относительно враждебно относится к кодированию, поэтому «Отправить HTML по электронной почте в Outlook» является распространенным поисковым запросом. Учитывая разнообразие версий, как вы можете сделать это правильно? Маркетологи адаптируют свои сообщения к Outlook. Эта система используется миллионами. Вы можете быть уверены, что часть вашей аудитории читает сообщения в Windows. Получателей почты раздражают битые ссылки и отсутствующие изображения. Это может вызвать поток отписок. То, что началось как продуманная маркетинговая кампания, может привести к сокращению вашей аудитории. Простой текст не привлечет много внимания. Вот почему профессионалы используют HTML в Outlook. Красочные сообщения в формате HTML стали маркетинговым стандартом. Если у вас есть готовый шаблон, вставить HTML в Outlook несложно.

Шаблон электронной почты HTML

Как поместить HTML в электронную почту с помощью шаблонов

Следующая последовательность поможет вам вставить HTML в Outlook 2016 и другие версии. С помощью шаблона процесс выполняется быстро и просто.

  1. Нажмите «Новое электронное письмо» в Outlook. Или используйте сочетание клавиш Ctrl+N. Появится новое окно.
  2. Нажмите правой кнопкой мыши в верхней части окна, чтобы добавить параметр «Прикрепить файл». Или используйте кнопку меню «Вставить и прикрепить файл» на ленте.
  3. Поместив курсор в окно сообщения, нажмите только что добавленную кнопку, чтобы прикрепить свой шаблон.
  4. Перейдите к расположению HTML-файла. Чтобы встроить текст, нажмите на стрелку рядом с кнопкой "Вставить".
  5. Выберите «Вставить как текст».

Опция вложения также может быть добавлена ​​на панель быстрого доступа. Для этого откройте параметры через «Файл». Вы увидите «Панель быстрого доступа» в списке слева. Выберите «Прикрепить файл». Это позволяет быстро встраивать HTML в Outlook.

Важные советы по HTML в Outlook

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

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

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

2. Убедитесь, что шрифты правильные

Одним из основных недостатков является то, что MS Outlook распознает ограниченный набор шрифтов. Все незнакомое автоматически преобразуется в Times New Roman, что может выглядеть ужасно. На всякий случай используйте стандартные варианты, такие как «Курьер», «Ариал», «Веранда» или «Грузия».

Но какой у вас шрифт, который является частью имиджа бренда? В этом случае заставьте систему использовать приемлемый стандартный шрифт вместо Times New Roman. Это послужит вашим запасным вариантом.

3. Столы удобны

Этот формат помогает структурировать шаблон сообщения. Вы можете легко разделить содержимое, выбрать фон, стиль текста и т. д. Используйте таблицы, чтобы все получатели видели одно и то же представление независимо от их почтовой системы. Не забудьте добавить align="left", чтобы сделать сообщение отзывчивым. Таким образом, ящики будут удобно отображаться как на широком, так и на маленьком экране. В первом случае они будут выровнены рядом друг с другом. Во втором случае они будут размещены друг над другом.

4. Не слишком широкий!

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

Тестирование имеет решающее значение

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

Более 1,1 миллиарда человек используют Office. Это 1 из 7 человек на планете.Microsoft Outlook — это популярный почтовый клиент для бизнеса, и огромное количество пользователей используют его в повседневной работе. Это очень мощный почтовый клиент, но иногда эта мощь является недостатком.

Одним из таких случаев является использование Microsoft Outlook для отправки информационных бюллетеней или форм в формате HTML. «Но Outlook позволяет мне создавать сообщения в формате HTML, используя множество элементов управления и стилей», — можете сказать вы и будете правы на 100 %. Но как только вы попробуете создать HTML-сообщение с помощью специального программного обеспечения и использовать полученный HTML-код в качестве исходного текста для своего сообщения, вы удивитесь: Outlook не позволяет использовать собственный исходный HTML-код для построения сообщения! «Хорошо, но это не большая проблема», — скажете вы, и снова вы можете быть правы, потому что вы можете открыть полученное HTML-сообщение с помощью Internet Explorer и скопировать и вставить данные через буфер обмена в сообщение Outlook. Да, это можно сделать, но вас ждет сюрприз.

Начиная с Office 2007, Outlook поддерживает только Microsoft Word в качестве механизма создания и отображения сообщений в формате HTML. Предыдущие версии Microsoft Outlook использовали Internet Explorer в качестве механизма HTML. Эти технические изменения вызывают существенные отличия как во внешнем виде результирующего сообщения, так и в самом HTML-коде, который подвергается изменениям и исправлениям. На первый взгляд это не кажется большой проблемой… но только на первый взгляд.

Почему так важно сохранять первоначальный HTML-код электронных писем?

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

Что такое HTML-тело сообщения?

Мы создадим простой файл HTML:


Привет, мир!

Размер файла составляет 36 байт. Мы открываем этот файл в Microsoft Word как HTML и сохраняем его как HTML с другим именем. Видим, что размер полученного файла 35,8Кб! Просто так размер файла увеличился в 1000 раз! Но выглядит точно так же, как и раньше. Чтобы прояснить различия, давайте посмотрим на исходный код этого нового HTML-файла:

Вставьте код HTML в сообщение Outlook

Посетите домашнюю страницу «Отправить лично для Outlook» и загрузите надстройка для отправки писем с исходным кодом HTML!

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

Почему Word меняет исходный HTML-код в теле письма?

Эти изменения связаны с тем, что Microsoft Word не является редактором HTML; он позволяет импортировать только файлы этого формата. Это означает, что исходный текст был импортирован в Microsoft Word, а затем экспортирован обратно как HTML, созданный во время сохранения документа, и минимальный размер файла для этого HTML составляет 35 Кб. Но это когда при сохранении выбирается формат HTML. На самом деле в Microsoft Word существует способ сохранения в другом формате, называемом HTML-filtered, который отфильтрует большую часть добавленного мусора. Этот метод приводит к файлу размером 5 КБ, что все равно в 10 раз больше исходного файла.

Обратите внимание, что хотя мы обсуждаем Microsoft Word, все это касается и Microsoft Outlook, поскольку в обоих продуктах используется один и тот же HTML-движок. Формат с фильтрацией HTML используется при создании электронных писем в формате HTML для Outlook. Это означает, что простой Microsoft Outlook не позволяет нам создать сообщение в формате HTML размером менее 5 КБ (и это пустое сообщение).

Это преобразование сообщения редактором Outlook — еще один недостаток продукта. Представьте себе ситуацию, когда шаблон еженедельного информационного бюллетеня создается с помощью HTML-редактора, чтобы не нарушать HTML-форматирование документа при его импорте и экспорте с помощью Word. Когда этот документ помещается в тело сообщения в редакторе Outlook (используя опцию «копировать-вставить»), наш HTML-код будет трансформирован и сильно усложнен, что может разрушить исходное форматирование и некорректно отобразить документ при его получают другие почтовые клиенты и браузеры.

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

Как сохранить исходный код HTML?

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

Отправить лично для Outlook

Эта программа добавляет Вставить HTML на ленту в разделе редактора сообщений; эта опция появляется, когда мы создаем новое электронное письмо или отвечаем на существующее электронное письмо. Когда мы нажимаем кнопку Вставить HTML, открывается окно, показывающее источник HTML текущего сообщения. В этом окне мы можем создать HTML-код для сообщения и отредактировать его. Даже если мы только что создали новое электронное письмо и еще ничего не написали в теле сообщения, мы можем нажать на кнопку Вставить HTML и увидим, что Outlook уже вставил все «необходимые ' Кодирование HTML в:

Вставьте код HTML в Outlook

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

HTML-код в сообщении электронной почты Outlook

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

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

Отправить лично для Outlook

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

HTML-код сообщения электронной почты в Outlook

  1. Электронное письмо можно редактировать только в окне редактирования HTML. Это справедливо для любой модификации. Outlook изменит «наш» HTML на собственный HTML, даже если мы просто изменим учетную запись пользователя, из которой отправляется электронное письмо.
  2. Сообщение должно быть отправлено с помощью кнопки "Отправить лично", а не "Отправить".

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

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

15 мыслей на тему "Как вставить HTML-код в сообщение электронной почты и не допустить, чтобы Outlook его испортил"

Все это по-прежнему работает с Windows 10/11 и Office 365? Этот пост датирован 2014 годом, в примечаниях к выпуску говорится только о «Windows 2000», а дата авторского права в примечаниях к выпуску — 2003-2008. … Итак, это дополнение все еще актуально?

Здравствуйте. Да, надстройка «Отправить лично» совместима с последними версиями Outlook 365 для Windows и Outlook 2021.

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

Привет! Мне нужно, чтобы html-формат электронной почты Outlook был таким, чтобы я мог видеть этот символ проверки или правильный/да символ в самой почте. Теперь в текущей ситуации мне нужно перейти в режим браузера Action-view, а затем появится все символы да/правильно. Есть ли какое-либо положение, чтобы я мог видеть его в исходной почте, когда кто-то перенаправляет меня на почту?

Здравствуйте, в программе «Отправить лично» для Outlook доступен «Режим предварительного просмотра», но он применим только к новым сообщениям в режиме создания/редактирования. Для предварительного просмотра HTML в существующих сообщениях вам может потребоваться сохранить каждое из них (в Outlook выберите сообщение > Файл > Сохранить как... > HTML), нажмите «Новое электронное письмо», затем нажмите кнопку надстройки «Вставить HTML», а затем "Загрузить из файла", чтобы выбрать экспортированные HTML-сообщения.

Здравствуйте, это кажется очень интересным для того, что я должен сделать. вы ясно объясняете, но у меня все еще есть вопрос: я использую адаптивный html-шаблон. Защитив мой код с помощью Личной отправки, можете ли вы гарантировать, что я отправлю ответное электронное письмо? Есть ли способ попробовать?

Я только что узнал, что доступна 30-дневная пробная версия, извините за глупый второй вопрос…

Здравствуйте, Brauwan, спасибо за вопрос.
Утилита для вставки HTML-кода в форму тела сообщения Outlook — работает со всеми кодами, просто сохраняет ваши данные без каких-либо изменений и позволяет отправлять их через Outlook таким образом, с вашим исходным кодом.
Поэтому ваши адаптивные шаблоны также должны быть вставлены в сообщения электронной почты и отправлены Outlook «как есть» без обновления вашего HTML-кода.
И да, вы можете попробовать бесплатную пробную версию в течение 30 дней — и мы будем признательны за ваши дополнительные вопросы и замечания.

"Размер файла – 36 байт". Действительно. Вы только что потеряли всякое доверие… Далее.

Здравствуйте, спасибо за ваше замечание! Мы исправили наши «36 укусов», и искренне надеемся, что ни комары, ни клопы не сильно разозлятся на эту опечатку в статье. Мы ценим ваше внимание и заботу об этом случае. Пожалуйста, дайте нам знать, если мы можем быть вам чем-то полезны.

Здравствуйте, здесь я не могу поместить html-контент.

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

Привет. Мне нужно, чтобы html-формат электронной почты Outlook был таким, чтобы я видел этот символ проверки или правильный/да символ в самой почте. Теперь в текущей ситуации я должен перейти в режим браузера Action-view, и тогда появится все символы да/правильно. Есть ли какое-либо положение, чтобы я мог видеть его в исходной почте, когда кто-то перенаправляет меня на почту?

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


< /p>

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

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

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

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

Зачем использовать HTML в сообщениях электронной почты Outlook?

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

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

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

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

Так с какой стати вы хотите использовать HTML в электронной почте Outlook?

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

Согласно нашему недавнему отчету об использовании почтовых клиентов, 5,1 % людей используют Outlook 2013, 4,7 % используют Outlook 2010 и почти 20 % клиентов используют различные другие почтовые клиенты (включая множество различных версий Outlook).< /p>

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

Основные советы по вставке HTML в сообщения электронной почты Outlook

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

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

В большинстве случаев, вероятно, нет.

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

1. Устраните проблемы с изображением, добавив замещающий текст и удалив отступы.

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

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

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

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

Чтобы этого не произошло, просто добавьте: div в тег вашего электронного письма.

2. Убедитесь, что пользовательские шрифты не заменены шрифтами Times New Roman.

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

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

  • Курьер
  • Новый курьер
  • Ариал
  • Черный шрифт Arial
  • Веранда
  • Тахома
  • Грузия

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

Для этого используйте:

Это условный код, который предотвратит игнорирование Outlook любого из этих шрифтов и не позволит ему отображать ваш текст в Times New Roman.

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

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

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

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

Просто не забывайте, чтобы все было плавно и быстро реагировало, добавив:

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

Электронная почта Apple Watch Series 4

4. Помните о ширине письма.

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

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

Если вы используете макеты с фиксированной шириной, убедитесь, что они подходят для браузеров и мобильных устройств. Итак, 580 или 680 пикселей для браузера и максимум 480 пикселей для мобильного.

Конечно, с Outlook не всегда все так просто: иногда почтовый клиент игнорирует параметр max-width. Некоторые из ваших изображений могут растянуться, поэтому всегда следите за тем, чтобы ваш тег IMG SRC четко определял ширину вашего изображения (в пикселях).

Кроме того, если вы хотите сделать еще один шаг и настроить таргетинг на определенные версии Outlook (и клиентов), вы можете применить к этим версиям определенную ширину.

Для клиентов, использующих Outlook 2000 или более позднюю версию, будет применяться ширина 500 пикселей. «gte» переводится как «больше или равно», а «mso» означает «Microsoft Office».

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

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

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

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

антропологическая электронная почта в формате HTML в Outlook

6. Скрыть определенные элементы из Outlook.

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

К счастью, вы можете скрыть стили CSS и элементы HTML из Outlook с помощью простого кода:

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

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

7. Тестируйте, тестируйте и еще раз тестируйте.

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

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

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

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

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

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

Отправляйте транзакционные электронные письма с уверенностью

Отправляйте свои транзакционные и маркетинговые электронные письма прямо в Campaign Monitor. Сохраняйте целостность своего бренда независимо от того, какое сообщение вы отправляете.

Читайте также: