Ограничения почтовых клиентов

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

OutlookOutlook

Поддерживаемые версииПоддерживаемые версии

Поддерживаются все актуальные версии Outlook начиная с 2017 года, которые Microsoft официально поддерживает. Актуальный список версий смотрите в документации Microsoft.

1. Не поддерживаются сложные стили1. Не поддерживаются сложные стили

Outlook не отображает:

• градиенты,
• тени на текстах и кнопках.

Рекомендации:

• Используйте простые фоновые цвета вместо градиентов;
• Используйте PNG или JPEG изображения вместо SVG.

2. Ограничения при работе с фоновыми изображениями2. Ограничения при работе с фоновыми изображениями

Outlook по-разному обрабатывает фоновые изображения в зависимости от того, где они применены:

• Фоновое изображение письма не отображается. Вместо него Outlook покажет замещающий цвет.
• Фоновые изображения блоков, строк и колонок (элемент блока) отображаются корректно, но не работают одновременно со скруглением углов. Outlook покажет либо фоновое изображение, либо скругление.

Рекомендации:

• Для фонового изображения письма задавайте замещающий цвет. Его можно установить в общих настройках в поле «Цвет под изображением»:

  

• Не применяйте скругление углов к блокам, строкам или колонкам с фоновым изображением;

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

3. Не поддерживаются Google Fonts и сторонние шрифты3. Не поддерживаются Google Fonts и сторонние шрифты

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

Рекомендации:

• Используйте безопасные системные шрифты: Arial, Times New Roman, Verdana, Tahoma;
• Всегда указывайте резервный шрифт в настройках текста:

4. Изображения и GIF могут не загрузиться4. Изображения и GIF могут не загрузиться

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

Рекомендации:

• Добавляйте alt-тексты ко всем изображениям — они отобразятся, если картинка не загрузится;
• Используйте изображения шириной до 600 px;
• Используйте PNG или JPEG вместо SVG. Outlook не поддерживает SVG изображения;
• Не ставьте изображения в качестве фона блока, строки или колонки — только как самостоятельный элемент-картинку;
• Не используйте элемент «Таймер» для получателей в Outlook — он работает на GIF и не анимируется.

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

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

Рекомендации:

• Создавайте письма шириной не более 600 px;
• Настройте размер шрифта и кнопок так, чтобы их было удобно читать и нажимать на маленьких экранах.

---

Яндекс ПочтаЯндекс Почта

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

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

Рекомендации:

• Создавайте письма шириной не более 600 px;
• Настройте размер шрифта и кнопок так, чтобы их было удобно читать и нажимать на маленьких экранах.
• Если у вас есть готовая HTML-верстка с ручной адаптивностью под Яндекс Почту, вы можете добавить ее через блок «HTML» в конструкторе.

2. Нестабильная работа с фоновыми изображениями и SVG2. Нестабильная работа с фоновыми изображениями и SVG

Яндекс Почта может не отобразить изображение, если оно используется как фон блока или задано в SVG-формате.

Рекомендации:

• Добавляйте alt-тексты ко всем изображениям — они отобразятся, если картинка не загрузится;
• Используйте изображения шириной не более 600 px;
• Используйте PNG или JPEG вместо SVG для важного контента;
• Не используйте изображения в качестве фона блока, строки или колонки для критически важного контента — добавляйте их как отдельный элемент;
• Если используете фоновые изображения, тестируйте письмо на реальных устройствах перед массовой отправкой.

---

Mail.ruMail.ru

1. Нестабильная работа с фоновыми изображениями и SVG1. Нестабильная работа с фоновыми изображениями и SVG

Mail.ru может не отобразить изображение, если оно используется как фон блока или задано в SVG-формате.

Рекомендации:

• Добавляйте alt-тексты ко всем изображениям — они отобразятся, если картинка не загрузится;
• Используйте изображения шириной не более 600 px;
• Используйте PNG или JPEG вместо SVG для важного контента;
• Не используйте изображения в качестве фона блока, строки или колонки для критически важного контента — добавляйте их как отдельный элемент;
• Если используете фоновые изображения, тестируйте письмо на реальных устройствах перед массовой отправкой.

2. Частичная поддержка Google Fonts и сторонних шрифтов2. Частичная поддержка Google Fonts и сторонних шрифтов

Mail.ru может не загрузить внешний шрифт (например, Google Fonts). В этом случае отобразится резервный шрифт, заданный в настройках письма.

Рекомендации:

• Используйте безопасные системные шрифты: Arial, Times New Roman, Verdana, Tahoma;
• Всегда указывайте резервный шрифт в настройках текста:

---

GmailGmail

1. Письма весом больше 100 КБ обрезаются1. Письма весом больше 100 КБ обрезаются

Gmail обрезает письма, превышающие лимит в 100 КБ. Получатель увидит обрезанное письмо со ссылкой «Показать письмо целиком».

Конструктор показывает текущий вес письма прямо в интерфейсе — следите за этим показателем при верстке и старайтесь не превышать 100 КБ.

Важные нюансы:

• Если используются блоки с динамическим выводом продуктов, итоговый вес письма у получателя может отличаться от того, что показывает конструктор. Финальный размер зависит от количества выведенных продуктов.
• Если в письме используется собственная HTML-верстка через блок «HTML», его вес не оптимизируется автоматически.

Рекомендации:

• Оптимизируйте вес изображений перед добавлением в письмо;
• Сокращайте текстовый контент, если вес письма превышает 100 КБ;
• При использовании динамических блоков отправьте тестовое письмо на почту Gmail, чтобы проверить вес письма при выводе продуктов.

2. Ограничения при использовании HTML-блока2. Ограничения при использовании HTML-блока

При использовании собственной HTML-верстки через блок «HTML» не задавайте ширину <table> в пикселях (px) — это нарушит отображение всех остальных блоков письма.

Рекомендации:

• Используйте процентные значения для ширины таблиц;
• Не задавайте ширину явно, если это возможно.