### Столкнулись с уникальной проблемой рендеринга в Outlook?

Решение: Используйте код, специфичный для Outlook

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

### Маленькие изображения или ячейки таблицы отображаются некорректно?

Решение: Добавьте высоту строки (`line-height`)

Outlook устанавливает минимальную высоту для ячеек таблицы и изображений. Если вы используете ячейку таблицы в качестве разделителя или имеете небольшое изображение, убедитесь, что вы добавили атрибут `line-height` к элементу, равный желаемой высоте. Например:

### Проблемы с масштабированием DPI?

Решение: Добавьте XML-пространство имен и CSS-свойства

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

К счастью, есть решение. Сначала вам нужно добавить XML-пространство имен к тегу ``:

Затем добавьте некоторый код для исправления масштабирования изображений перед тегом ``:

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

✗ Не так, с `width=»600″`:

✔ Да, вот так, с `style=»width:600px;»`:

Это решит большинство ваших проблем для клиентов со 120 DPI. Взгляните на это сравнение таблиц до и после этого исправления:

Какая разница!

### Где мой эффект при наведении?

Решение: К сожалению, Outlook не поддерживает псевдокласс `hover` 🙁

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

### Почему мой GIF не анимируется?

Решение: Пусть первый кадр отображает изображение, которое вы хотите показать в Outlook

Некоторые настольные клиенты Outlook не поддерживают анимированные GIF-файлы. Outlook 2016 и Outlook 2019 *теперь* поддерживают GIF-файлы, но другие версии — нет. Поэтому сначала проверьте свою версию Outlook!

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

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

### Где мой отступ изображения?

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

Outlook удаляет отступы и поля у изображений. Добавьте отступ к ячейке таблицы вокруг изображения, или если изображение находится в той же ячейке, что и текст, добавьте поле к тегу вокруг текста (`

`, `

`, `

` и т. д.).

**Часть 3:** Фрагменты кода

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

У нас есть код, который вам нужен, чтобы противостоять вашим страхам перед HTML-письмами в Outlook!

Создание отличного письма для настольных клиентов Outlook требует выхода за рамки «обычного» HTML и CSS. Существует три типа кода, которые помогут вашим письмам сиять в этих клиентах: условное кодирование, MSO-свойства и VML.

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

### Условное кодирование

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

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

Однако Outlook далеко не прост, поэтому номера версий не соответствуют названию почтового клиента:

— Outlook 2000 = mso 9

— Outlook 2002 = mso 10

— Outlook 2003 = mso 11

— Outlook 2007 = mso 12

— Outlook 2010 = mso 14

— Outlook 2013 = mso 15

— Outlook 2016, Outlook 2019 и Office 365 Desktop = mso 16

Вы можете получить более сложный подход, нацеливаясь на диапазон клиентов с помощью «меньше чем» (lt), «больше чем» (gt), «меньше или равно» (lte) или «больше или равно» (gte). Например:

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

Вы также можете использовать условные комментарии, чтобы скрыть контент от Outlook, сказав «if !mso», что означает «если не mso»:

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

Хотя существуют способы нацеливания на веб-клиенты, нет способа нацелиться на один веб-клиент Outlook по сравнению с другим. Поэтому, когда вы нацеливаетесь на Outlook.com, вы также будете нацеливаться на веб-клиент Office 365 (но не на настольный клиент).

Вы можете нацелиться на веб-клиенты Outlook, используя тот факт, что Outlook добавляет «x_» ко всем именам классов, но не делает этого для селектора атрибутов. Поэтому, если у вас есть класс «foo» и вы хотите обрабатывать его по-разному для веб-клиентов Outlook, вы можете нацелиться на него с помощью этого кода:

(Спасибо Марку Роббинсу за это исправление и Дилану Смиту за howtotarget.email.)

### MSO-свойства

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

`mso-hide: all;`

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

`mso-line-height-rule: exactly;`

Это свойство гарантирует, что Outlook отображает высоту строки в соответствии с тем, что вы указываете в свойстве `line-height`. Без него Outlook не обязательно уважает ваши высоты строк. Если вы работаете в отрасли, где точность имеет решающее значение, вы, вероятно, очень хорошо знакомы с этим свойством.

`mso-padding-alt`

Это немного менее распространено, но позволяет объявить отступы, специфичные для Outlook. Если обычный отступ, который у вас есть в ячейке, не отображается должным образом в Outlook, вы можете использовать **mso-padding-alt** для установки значений, соответствующих вашему дизайну для Outlook.

`mso-ansi-font-size`

Это позволяет установить размеры шрифтов, специфичные для Outlook. Если Outlook отображает ваш шрифт немного крупнее, чем в других почтовых клиентах, и в итоге вы получаете короткую последнюю строку текста, которую не хотели, добавьте **mso-ansi-font-size** и установите размер шрифта, который позволит вашему тексту поместиться.

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

### VML

VML расшифровывается как Vector Markup Language. Это версия SVG от Microsoft, но язык был устарел и очень редко используется (ура, электронная почта!). Microsoft имеет документацию по VML в архиве онлайн, поэтому вы все еще можете найти, как использовать ее для создания векторов в Outlook, где она по-прежнему поддерживается. Теоретически, когда Microsoft перейдет на свою модель «One Outlook», мы сможем отказаться от VML.

Убедитесь, что вы включили объявление VML-пространства имен. Я обычно добавляю его к элементу `` в моем шаблоне-заготовке, чтобы я мог использовать VML, когда мне это нужно:

После этого вы можете добавить любой VML в свой код внутри MSO-условий:

Этот код создаст синий прямоугольник размером 200×50 пикселей. Возможно, вы не сможете использовать это в письме, но вы можете использовать VML для добавления кнопок со скругленными углами в ваш код, фоновых изображений и градиентов. Вы также можете использовать VML для создания псевдо-абсолютного позиционирования, эффектов тени или резервной копии для поддержки CSS-арта в Outlook. Есть много вещей, которые вы можете сделать с VML, когда вы погрузитесь.

## Тестируйте, чтобы обеспечить бесперебойное отображение ваших писем в Outlook!

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

Изучите ресурсы, представленные в этом посте, чтобы укрепить свои навыки кодирования для Outlook, и протестируйте их в своих письмах с помощью Litmus Builder и Email Previews. (И, конечно же, не забудьте защитить эти прекрасные письма с помощью Email Guardian!)

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

**Никогда больше не отправляйте «ой»-письмо**

Защитите свои письма во всех клиентах (включая Outlook!) с помощью передовых технологий ИИ от Litmus. Предотвратите ошибки в письмах и защитите репутацию своего бренда с помощью Email Guardian!

Related Posts

• Бесят синие ссылки в email? Избавьтесь от них навсегда
• Почему рендеринг электронных писем так сложен?
• Почему тестирование отображения каждого отправляемого письма повышает ваш ROI
• Какие почтовые клиенты стоит тестировать?
• Почему ломается HTML-письмо при пересылке?
• Понимание медиазапросов в email-рассылках

Iconic One Theme | Powered by Wordpress