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