Такое не нагуглишь: особенности отображения писем в разных почтовиках
Знание основ html-верстки не защитит вас от внезапно разъехавшегося email на тестах. Тут надо еще нюансы каждого почтовика учитывать. Собрали ультимативный сборник с уникальным портретом Mail, Gmail, Yandex и Outlook. Сохраняйте, пересылайте знакомым верстальщикам и email-маркетологам.
Особенности отображения писем в Mail
Единственный, кто понимает код box-shadow и может сделать тени или свечение для блока.
Линкует всё, что похоже на телефон или адрес, и красит в синий цвет. Решение: пролинковать это самим.
В приложении и браузере письмо будет немного отличаться, так как они по-разному интерпретируют код письма.
Игнорирует неразрывные пробелы, письмо всегда отображается с подвисшими предлогами. Решения нет, просто смириться.
- Внезапно может отформатировать текст так, что каждая буква в слове будет стоять на отдельной строчке сверху вниз (как на китайских плакатах). Фиксится золотыми руками верстальщика.
Особенности отображения писем в Gmail
Один из самых консервативных почтовиков, после 2019 года у него не было серьезных изменений.
Обрезает письмо, если оно слишком длинное или просто много весит. Об этом важно помнить на этапе создания ТЗ дизайнеру.
Обычно AMP не инвертируется, но в этом почтовике на андроиде появится темная тема. Решение: действовать аналогично с обычными письмами и предусмотреть адаптацию.
Присоединяйтесь к нашему сообществу неравнодушных к AMP-письмам. Там теория верстки для технических специалистов и классные кейсы динамических писем для маркетологов.
Если тестируете письмо много раз, удаляйте предыдущие тесты. Иначе почтовик соединит письма в одну ветку и сожмет их так, что вы увидите косяки, которых нет.
Особенности отображения писем в Yandex
Почтовик не сильно дружелюбный к рассылкам и промо-коммуникациям вообще. И на этапе верстки к нему тоже есть вопросики.
Линкует всё, что похоже на телефон или адрес, и красит в жёлтый цвет. Решение: пролинковать это самим.
Мобильной версии нет, везде отображается десктопная.
Нужно прописывать у картинок не только alt, но и title. Иначе, если картинка не прогрузится, нельзя быть уверенным, что пользователь получит альтернативный текст.
Меняет межбуквенный интервал: сжимает или разжимает в зависимости от шрифта. Например, текст, который в других почтовиках помещается только в три строчки, здесь будет в две. Решение: добавлять отступы вручную.
Особенности отображения писем в Outlook
Почтовик капризный на отображение картинок, анимаций, шрифтов, стилей и т. п. Письмо может разъехаться от неправильно заполненного vml-кода. Убедитесь, что верстальщик качественно протестировал письмо. А еще для Outlook работает правило «чем проще, тем лучше».
Не понимает стиль border-radius (скругления не работают).
Темная тема и мобильная версия поддерживается только версиями Outlook 2019 и новее.
Фоны работают плохо, отображаются по-разному в зависимости от версии почтовика. Решить эту проблему можно отдельным vml-кодом. Только и тут есть свои нюансы. Фон визуально будет стоять за контентом, а технически — перекрывать его. Это сделает неактивными ссылки в блоках.
На старых версиях гифка может не прогрузиться. Решение: ключевой кадр гифки должен быть первым, тогда получатель увидит главное, даже если анимация не запустится.
AMP даже не заикаемся. Нету.
Что-нибудь забыли или все по делу?
Не раскрыта тема почтовика „Эппл“
мы описали четыре самых используемых почтовика в России, но если будем готовить следующий пост, то напишем про IOS почтовик
Особенности отображения писем в Outlook- там все работает плохо не только картинки и видео
если мы говорим про старые версии Outlook, то да, там могут быть проблемы с отображением всего в двух случаях:
1. вы не занесли отправителя в список надежных отправителей, а значит не дали согласие на показ контента
2. ваша компания или вы настроили систему безопасности, которая ограничивает показ контента
Раньше был такой почтовый клиент The Bat, интересно, существует еще или нет)
существует и вроде даже обновляется
но не уверена что он пользуется большой популярностью
Супер-полезно, спасибо)