Почему мои электронные письма выглядят плохо с Outlook Client?

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

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

Попробуйте это:

Если вы использовали изображение PNG с прозрачным фоном, Outlook будет в шоке! Он не знает, как отображать такие изображения. Точно так же вы можете задаться вопросом, почему ваши закругленные кнопки (созданные с использованием свойства CSS border-radius) выглядят квадратными в клиенте Outlook. Потому что Outlook не поддерживает border-radius и некоторые другие свойства CSS.

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

Почему мои электронные письма плохо выглядят в Outlook?

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

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

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

Почему изображение обрезается и загружается медленно

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

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

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

Размер изображения не изменяется

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

Фоновые изображения

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

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

Введите приведенный ниже код в <body> вашего HTML, чтобы фоновое изображение покрывало все окно электронной почты.

 <div> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="/IMAGE.png" color="#000000"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="IMAGE.png">

Приведенный выше код отлично работал при отображении фонового изображения с электронными письмами, открытыми в Outlook 2007, 2010 и 2013. Но Windows Mail 10 потребовалось некоторое изменение в коде, чтобы добавить изображение с его источником, позволяющим фоновое изображение.

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

 <td valign="top" height="700" background="Image Live URL Here" bgcolor="#f7901e"> <!--[if gte mso 9]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" src="/Image Live URL Here" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"> <v:fill opacity="0%" color="#f7901e" /> <v:textbox inset="0,0,0,0"> <![endif]--> <div> <!-- HTML Content Here --> </div> <!--[if gte mso 9]> </v:textbox> </v:fill> </v:rect> </v:image> <![endif]--> </td>

Анимированные GIF не подходят

Видео говорит больше, чем слова.

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

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

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

Рассмотрите возможность использования анимационной части в качестве дополнительного преимущества для подписчиков с другими почтовыми клиентами.

Свойство радиуса границы

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

Свойство радиуса границы — это обычное свойство CSS, но оно плохо работает с Outlook. В Outlook подписчикам предоставляются кнопки CTA с квадратными рамками.

Дополнительные пробелы

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

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

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

Проблема с основным шрифтом

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

 <!--[if mso]> <style> h1 { font-family: Primary font, Fallback font; } </style> <![endif]-->

Шаблон письма должен быть идеальным

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

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

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

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

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

Опция отписки обязательна

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

Как это сделать?

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

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

Кнопка «Отписаться» является обязательной в каждом информационном бюллетене, который мы отправляем нашим клиентам, и если наши клиенты не увидят эту кнопку,
Ожидать чего?
Нас могут спамить!

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

Ссылки изменены на подчеркнутый текст синего/фиолетового цвета.

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

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

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

Чтобы избежать этой проблемы, используйте <font> и оберните текст тегом <span> и атрибутом стиля.

Попробуйте использовать следующий код:

 <a> <span> <font color="#E3A216"> Click me </font> </span> </a>

Outlook может подойти для заполнения вашего личного почтового ящика.

Но, говоря по-деловому, смотрите нестандартно.