Как сделать так, чтобы письма хорошо выглядели в Outlook?

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

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

Строки добавляются автоматически в письме.

Строки наследуют цвет фона в теле письма, поэтому вы можете начать с настройки цвета фона. Также помогает объединение всего содержимого в одну секцию, а не разделение на несколько секций (просто не делайте их слишком длинными). Иногда помагает также изменение размера шрифта.

Анимированные GIF-изображения не отображаются.

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

Внутренние отступы и границы не отображаются.

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

Важно учесть, что настольные версии Outlook не поддерживают стили тегов <div>, что может привести к игнорированию некоторых разрывов строк и межстрочного интервала.

Мой фон и стиль не отображаются

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

Outlook также удаляет стиль ссылки, если вы добавляете URL-адрес без http:// или https://(например, ссылки пользовательского протокола).

Outlook не поддерживает следующие стили CSS:

  • background-attachment
  • background-image
  • background-position
  • background-repeat
  • clear
  • display
  • float
  • list-style-image
  • list-style-position
  • text-transform
  • word-spacing

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

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

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

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

Мой шрифт не отображается

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

  • Courier
  • Courier New
  • New Arial
  • Arial black
  • Veranda
  • Tahoma Georgia
  • Times New Roman

Проблемы с шириной сообщения

Оптимальная для Outlook ширина составляет 550–600 пикселей — более широкие сообщения могут плохо отображаться в Outlook.

Две колонки складываются в одну

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

Изображения имеют разный размер

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

Моя ссылка не сокращена

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

Что еще нужно помнить:

  • Чем старше версия Outlook, тем меньше вероятность того, что она будет поддерживать некоторые стили HTML5.
  • Десктопные версии обновляются не так быстро, как браузерные, поэтому в зависимости от используемой версии могу быть расхождения.
  • Проверьте сообщение используя предварительный просмотр, чтобы увидеть, как оно будет отображаться в Outlook.
  • Используйте ссылки на онлайн-версию сообщения, чтобы подписчики могли просматривать неизмененное сообщение в браузере.
  • Убедитесь, что текст не был скопирован из внешнего редактора — большое количество неподдерживаемого форматирования, которое может быть не видно в редакторе, может быть прочитано Outlook и испортит дизайн письма.