Такое не нагуглишь: особенности отображения писем в разных почтовиках
Знание основ 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 даже не заикаемся. Нету.
Что-нибудь забыли или все по делу?