Такое не нагуглишь: особенности отображения писем в разных почтовиках

Знание основ html-верстки не защитит вас от внезапно разъехавшегося email на тестах. Тут надо еще нюансы каждого почтовика учитывать. Собрали ультимативный сборник с уникальным портретом Mail, Gmail, Yandex и Outlook. Сохраняйте, пересылайте знакомым верстальщикам и email-маркетологам.

Единственный, кто понимает код box-shadow и может сделать тени или свечение для блока.
Линкует всё, что похоже на телефон или адрес, и красит в синий цвет. Решение: пролинковать это самим.
В приложении и браузере письмо будет немного отличаться, так как они по-разному интерпретируют код письма.
Игнорирует неразрывные пробелы, письмо всегда отображается с подвисшими предлогами. Решения нет, просто смириться.
Внезапно может отформатировать текст так, что каждая буква в слове будет стоять на отдельной строчке сверху вниз (как на китайских плакатах). Фиксится золотыми руками верстальщика.

Один из самых консервативных почтовиков, после 2019 года у него не было серьезных изменений.

Обрезает письмо, если оно слишком длинное или просто много весит. Об этом важно помнить на этапе создания ТЗ дизайнеру.
Обычно AMP не инвертируется, но в этом почтовике на андроиде появится темная тема. Решение: действовать аналогично с обычными письмами и предусмотреть адаптацию.

Присоединяйтесь к нашему сообществу неравнодушных к AMP-письмам. Там теория верстки для технических специалистов и классные кейсы динамических писем для маркетологов.

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

Почтовик не сильно дружелюбный к рассылкам и промо-коммуникациям вообще. И на этапе верстки к нему тоже есть вопросики.

Линкует всё, что похоже на телефон или адрес, и красит в жёлтый цвет. Решение: пролинковать это самим.
Мобильной версии нет, везде отображается десктопная.
Нужно прописывать у картинок не только alt, но и title. Иначе, если картинка не прогрузится, нельзя быть уверенным, что пользователь получит альтернативный текст.

Альтернативный текст отобразился только там, где был title

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

Поведение разных шрифтов в Яндексе на андроиде

Почтовик капризный на отображение картинок, анимаций, шрифтов, стилей и т. п. Письмо может разъехаться от неправильно заполненного vml-кода. Убедитесь, что верстальщик качественно протестировал письмо. А еще для Outlook работает правило «чем проще, тем лучше».

Не понимает стиль border-radius (скругления не работают).
Темная тема и мобильная версия поддерживается только версиями Outlook 2019 и новее.
Фоны работают плохо, отображаются по-разному в зависимости от версии почтовика. Решить эту проблему можно отдельным vml-кодом. Только и тут есть свои нюансы. Фон визуально будет стоять за контентом, а технически — перекрывать его. Это сделает неактивными ссылки в блоках.
На старых версиях гифка может не прогрузиться. Решение: ключевой кадр гифки должен быть первым, тогда получатель увидит главное, даже если анимация не запустится.
AMP даже не заикаемся. Нету.

Что-нибудь забыли или все по делу?

10 комментариев

Филипп Гаврилов

18 апр

Не раскрыта тема почтовика „Эппл“

Ответить

Denis Gordeev

Автор

мы описали четыре самых используемых почтовика в России, но если будем готовить следующий пост, то напишем про IOS почтовик

Ирина Родионова

Особенности отображения писем в Outlook- там все работает плохо не только картинки и видео

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