Проблемы отображения писем в Outlook и способы их решения

### Основные выводы

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

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

— Использование надежных методов кодинга, таких как условные комментарии (conditional comments), свойства MSO и VML, дает возможность поддерживать высокое качество дизайна даже в самых сложных версиях Outlook.

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

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

То, что Outlook некорректно отображает HTML-письма, уже давно стало классикой «списка раздражителей» в email-маркетинге. Но должно ли так быть? Узнайте, как преодолеть препятствия Outlook и создавать динамичные, привлекательные письма, которые будут выглядеть великолепно… даже в Outlook!

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

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

**Часть 1: Определите свою версию Microsoft Outlook**

**Найдите свою версию Microsoft Outlook и узнайте её тайны**

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

### Outlook 2007-2019

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

Разрешение 120 DPI (точек на дюйм) добавляет сложности. Пользователи Windows могут выбрать 120 DPI для увеличения разрешения экрана. Если они это сделают, десктопные клиенты будут учитывать эту настройку и увеличат изображения и текст. К сожалению, для вашего письма это может закончиться катастрофой.

### Outlook для Mac

Это десктопная версия Outlook для Mac. Она использует движок Webkit. Это означает, что она обычно работает наравне с Apple Mail и iOS в плане рендеринга писем. Если письмо хорошо выглядит в браузере, есть большая вероятность, что оно будет отлично смотреться и в Outlook для Mac.

### Outlook.com и мобильные приложения Outlook

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

### Outlook Office 365

Существует две разные версии Outlook Office 365:

— Десктопный почтовый клиент

— Веб-почтовый клиент

Десктопная версия похожа на Outlook 2007-2019 и использует Word в качестве движка (что затрудняет работу). Веб-версия использует Webkit или Blink и отображает письма аналогично Outlook.com (что значительно проще).

### Новый Outlook

В январе 2021 года Microsoft анонсировала стратегию «One Outlook», призванную заменить десктопные клиенты единым решением. По состоянию на апрель 2023 года новая версия доступна в магазине приложений Windows. Просто ищите текст «Попробовать новый Outlook».

Этот новый Outlook для Windows основан на текущих веб-приложениях. Главное отличие от старых десктопных версий в том, что новый клиент не использует Microsoft Word, а работает на движке веб-браузера. (Ура!) Цель — единообразие. К сожалению, старые десктопные клиенты не исчезнут в одночасье, поэтому их придется поддерживать еще некоторое время.

**Часть 2: Типичные проблемы отображения писем в Outlook**

**Узнайте о типичных проблемах рендеринга Outlook и способах их решения**

Главный вывод заключается в том, что мы имеем дело с двумя разными движками — Word и Webkit. С Webkit работать проще, с Word — сложнее. Ни один из них не является плохим или хорошим, они просто требуют разных подходов.

Рассмотрим типичные проблемы в десктопных версиях Outlook.

### Странные размеры изображений?

Решение: добавляйте атрибуты width и height к изображениям.

Outlook не поддерживает CSS-стили для ширины и высоты. Если вы не укажете атрибуты, Outlook отобразит изображение в реальном размере. Если вы используете Retina-изображения (что рекомендуется), это приведет к появлению гигантских картинок, которые сломают верстку.

### Вместо картинки отображается сообщение о безопасности?

Решение: добавляйте ALT-текст.

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

### Outlook игнорирует ваши теги?

Решение: используйте таблицы!

Хотя многие современные клиенты поддерживают блоки