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

0 0

Знание основ 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 даже не заикаемся. Нету.

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

813 показов 110 открытий 1 репост

Источник: vc.ru

Оставьте ответ

Ваш электронный адрес не будет опубликован.