Рендеринг электронной почты Outlook: как я научился перестать беспокоиться и полюбить Outlook

Исправьте проблемы с масштабированием DPI

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

К счастью, есть исправление. Во-первых, вам нужно добавить пространство имен XML в тег HTML:

Затем добавьте код для исправления масштабирования изображения прямо перед тегом </head>:

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

✗ Только не это с width = ”600 ″ :

Да, вот так со style = ”width: 600px;” :

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

Outlook 2013 с разрешением 120 точек на дюйм (без исправления)	Outlook 2013 с разрешением 120 точек на дюйм (с исправлением)

Какая разница, а?

Не ждите, что эффекты зависания сработают

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

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

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

Не используйте интерактивный контент без запасного варианта

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

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

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

Outlook удаляет отступы и поля с изображений. Вместо этого не забудьте добавить отступ к ячейке таблицы вокруг изображения. Или, если изображение находится в той же ячейке, что и копия, добавьте поля к тегу вокруг копии (<h1>, <h2>, <p> и т. Д.).

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

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

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

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

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

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

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

• Outlook 2000 = MSO 9
• Outlook 2002 = MSO 10
• Outlook 2003 = MSO 11
• Outlook 2007 = MSO 12
• Outlook 2010 = MSO 14
• Outlook 2013 = МСО 15
• Outlook 2016, Outlook 2019 и рабочий стол Office 365 = MSO 16

А затем вы можете усложнить задачу, настроив таргетинг на круг клиентов с числом меньше (lt), больше (gt), меньше или равно (lte) или больше или равно (gte). Например:

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

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

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

Но есть способы настроить таргетинг на веб-клиенты, но нельзя настроить таргетинг на один веб-клиент Outlook поверх другого. Таким образом, когда вы нацеливаетесь на Outlook.com, вы также нацеливаетесь на веб-клиент Office 365 (но не на настольный клиент).

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

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

Свойства MSO

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

мсо-скрыть: все;

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

мсо-линия-высота-правило: точно;

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

mso-padding-alt

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

мсо-анси-размер шрифта

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

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

VML

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

Обязательно включите объявление пространства имен VML. Обычно я добавляю его в элемент <html> в моем стандартном шаблоне, чтобы я мог использовать VML всякий раз, когда мне нужно:

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

Этот код создаст синий прямоугольник размером 200 на 50 пикселей. Возможно, это не то, что вы действительно можете использовать в электронной почте, но вы можете использовать VML для добавления кнопок с закругленными углами в ваш код, фоновые изображения и фоновые градиенты. В Campaign Monitor есть два инструмента, созданных Стигом, которые помогут вам создавать фоновые изображения или кнопки с закругленными углами. Я обнаружил, что это отличный способ добавить VML, когда вы только учитесь.

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

Живите долго и пишите

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

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

Проверьте свою электронную почту в Outlook с помощью Litmus Посмотрите, как ваши электронные письма будут выглядеть в Outlook, и устраните все проблемы, прежде чем нажать кнопку «Отправить». С Litmus вы можете быть уверены, что создаете электронные письма, идеально подходящие для ваших подписчиков. Начать бесплатную пробную версию →