Рендеринг электронных писем между почтовыми клиентами: проблемы и обходные пути

Опубликовано: 2019-01-15

В этой статье

Как бренд, использующий электронный маркетинг, вы должны убедиться, что ваши электронные письма для подписчиков отображаются именно так, как вы планировали .

Большинство писем, полученных во входящем ящике, содержат следующее:

В почтовом клиенте отображается сообщение «Щелкните здесь, чтобы загрузить изображения» или «Показать изображения: для этого сообщения / всегда для этого отправителя».
Электронное письмо со ссылкой «Просмотреть письмо в браузере» или «Щелкните здесь, чтобы просмотреть электронное письмо в Интернете» вверху.

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

Но в этом и есть вызов.

Почтовые клиенты играют по своим правилам и по-другому обрабатывают электронные письма!

Доля рынка почтовых клиентов Litmus показывает, что Apple Mail ( 44%, включая почту iOS для iPhone и iPad), за ней следуют Gmail ( 29%, включая настольные и мобильные устройства), Outlook ( 12%, включая Outlook и Outlook.com) и Yahoo. ! Почта ( 6%, включая настольные и мобильные) являются наиболее часто используемыми почтовыми клиентами по состоянию на октябрь 2018 года. Все эти почтовые клиенты сталкиваются с некоторыми проблемами при отображении электронной почты в том виде, в котором она изначально была задумана.

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

Электронные клиенты: проблемы и обходные пути

Apple iPhone

Apple iPhone поддерживает интерактивные элементы электронной почты, такие как синемаграф, GIF, видео, обратный отсчет, слайдеры, изображения сетчатки глаза и т. Д., И, следовательно, обеспечивает безупречный пользовательский интерфейс . Таким образом, это самый популярный почтовый клиент.

Проблемы с отображением в обновленных моделях: когда модели iPhone обновляются с экранами большего размера, это приводит к проблемам с отображением электронной почты. Чтобы преодолеть это и гарантировать, что электронное письмо отображается на всех устройствах iPhone, обновите любой из ваших медиа-запросов, используя точку останова 320 пикселей до 414 пикселей для iPhone 8 плюс. Помимо сохранения фиксированной ширины устройства, вы даже можете сохранить ее плавной.

Отсутствует поддержка селектора ~ при использовании с: hover или: checkedselectors: iOS9 не поддерживает общий селектор-родственник ~, когда он комбинируется с селекторами псевдокласса: checked и: hover. Чтобы получить аналогичные результаты, можно использовать соседний родственный селектор + вместо ~.

Размер текста изменяется: размер крошечного текста автоматически изменяется. Минимальный размер шрифта должен составлять 22 пикселя для заголовков и 14 пикселей для основного текста.

Адаптивные электронные письма автоматически масштабируются в iOS10 и iOS11: автоматическое масштабирование в ответных электронных письмах приводит к тому, что электронные письма отображаются смещенными по центру или уменьшенными. Чтобы решить эту проблему, добавьте padding: 0; к тегу <body> и для отключения автомасштабирования используйте <metaname = ”x-apple-disable-message-regatting”>.

Gmail

Gmail поддерживает GIF-файлы и другие визуальные элементы, которые добавляют эстетической привлекательности электронным письмам. Gmail - один из самых удобных почтовых клиентов как для настольных компьютеров, так и для мобильных устройств с точки зрения удобства использования.

Gmail для рабочего стола

Обрезка сообщений: Gmail обрезает сообщения размером более 102 КБ и скрывает содержимое за ссылкой «Просмотреть сообщение целиком». Чтобы избежать этого, держите размер сообщения ниже 102 КБ и избегайте использования ненужных атрибутов стиля и тегов.

Селектор атрибутов не поддерживается: Селектор атрибутов, используемый для выбора элементов, не поддерживается. Вместо этого используйте селектор .class.

Удаляет CSS в блоке <style>: если блок <style> превышает 8142 символа или включает вложенные @declarations, Gmail удаляет его. Чтобы решить эту проблему, используйте короткие и безошибочные встроенные стили.

Фоновые изображения не поддерживаются для идентификаторов, отличных от Gmail: если в Gmail настроен идентификатор, отличный от Gmail, он не поддерживает фоновые изображения. Убедитесь, что вы используете подходящий резервный вариант для фона для таких случаев.

Размер шрифта увеличился на 50%. Размер шрифта в Gmail увеличился почти на 50%. В качестве обходного пути используйте контент для мобильных устройств с большими изображениями и лаконичными меню и придерживайтесь макета в один столбец без необходимости увеличения или уменьшения масштаба.

Поля, отступы, числа с плавающей точкой и абзацы не поддерживаются: Gmail не отображает абзацы и плавающие элементы. Чтобы отобразить поля и отступы, используйте макет на основе таблицы с <td>.

Gmail для мобильных устройств

<style> и <link> не поддерживаются в заголовке: иногда заголовок не поддерживает теги <style> или <link>. Чтобы решить эту проблему, перезапишите цвет ссылки по умолчанию, добавив цветовой стиль к каждому тегу <a> в коде.

Изображения, нарезанные белой линией: между двумя или более нарезанными изображениями появляется белая линия. Используйте «display: block» в теге изображения, чтобы удалить белую линию.

Даты и числа становятся синими на iPhone: Gmail для iPhone автоматически превращает числа и даты в синий цвет. Используйте не соединяющий элемент нулевой ширины, «text-decoration:» и укажите окружение «text-decoration: none». Кроме того, чтобы избежать синей линии, определите важное, чтобы переопределить встроенный стиль.

Плавные электронные письма выглядят отталкивающе: в приложении Gmail плавные электронные письма выглядят не впечатляюще. Чтобы решить эту проблему, создайте иллюзию плавающих элементов, используя «display: inline-block» вместе с «text-align: center».

Перспективы

Outlook и Outlook.com - широко используемые почтовые клиенты в корпоративной среде . Эти почтовые клиенты сталкиваются с рядом проблем с рендерингом, что усложняет задачу для разработчиков электронной почты .

Нет поддержки max-width и min-width: Outlook не поддерживает max-width и min-width в CSS. Чтобы преодолеть это, используйте гибкие макеты с фиксированной шириной в медиа-запросе.

CSS не поддерживается в разделе заголовка : CSS, используемый в разделе заголовка HTML, удаляется автоматически. Встроенный CSS для решения этой проблемы.

Удаляет интервалы между абзацами и полями: Outlook удаляет интервалы полей абзацев из кода. Используйте макет на основе таблицы и td / tr, чтобы добавить дополнительное пространство.

GIF не поддерживается: Outlook отображает только первый кадр GIF в сообщениях электронной почты. Убедитесь, что первый кадр передает сообщение, или установите соответствующий запасной вариант, используя статическое изображение.

Границы RGB не поддерживаются в Outlook.com: для цвета фона используйте HEX-код вместо границ RGB.

Добавлены ненужные пробелы: Outlook.com добавляет ненужные пробелы после изображений. Чтобы удалить заполнение, установите свойство display как «img {display: block;}».

Yahoo! Почта

min-device-width и max-device-width не поддерживаются в Mediaqueries: Forwebmail, а также приложение для Android, используйте атрибут ширины и / или стиль вместо min или max-device-width. Это будет контролировать макет.

Теги с плавающей запятой не работают: теги с плавающей запятой не работают для Yahoo! Mail. Чтобы решить эту проблему, присвойте соответствующему изображению align = "top".

Причина таких расхождений между разными почтовыми клиентами

Механизм рендеринга является основной причиной того, что разные почтовые клиенты по-разному обрабатывают одно и то же письмо. Механизм рендеринга - это мозг любого почтового клиента. Когда почтовый клиент получает электронное письмо, это длинная стена HTML-кода, окруженная CSS-анимацией. Механизм визуализации создает структуру на основе кода, указанного в HTML, и добавляет определенный стиль в соответствии с CSS. Любой ненужный код удаляется и не отображается на этапе постобработки.

Некоторые почтовые клиенты, такие как Apple Mail, Microsoft Outlook (до 2003 г.), адаптировали проприетарный механизм рендеринга, который они используют в своих браузерах. Веб-почта использует гибрид собственного механизма визуализации, смешанного с браузером, в котором он открыт. В связи с этим один и тот же код должен быть написан с разными синтаксисами, чтобы избежать исключения.

Ниже перечислены популярные почтовые клиенты и механизмы рендеринга, используемые каждым из них:

Apple Mail → Motore Safari Webkit
Почта iOS → Motore Safari Webkit
Outlook 2000 - 2003 → Internet Explorer 6.x (Trident)
Lotus Notes 6.5 e 7 → Internet Explorer 6.x (Trident) e Notes Rich Text (только для IMAP / POP3)
Outlook 2007 e versioni последовательные → Microsoft Word
Outlook для MAC → Motore Safari Webkit
Mozilla Thunderbird → Motore Mozilla Gecko
Gmail e Yahoo! Почта → Собственный двигатель рендеринга, объединенный с движком рендеринга браузера

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

Избегайте фонового изображения за важным CTA : фоновое изображение не поддерживается в большинстве почтовых клиентов. Неподдерживаемые почтовые клиенты заменяют изображение цветом фона. Это особенно проблематично, если цвет фона соответствует цвету шрифта текста на переднем плане.
Встроенный CSS каждый раз : некоторые почтовые клиенты удаляют все таблицы стилей, указанные между тегом <style>, в то время как почти все поддерживают встроенные стили CSS. Так что всегда безопасно, вставляя свой CSS-код.
Outlooks поддерживает размеры изображения в процентах, а остальную поддержку в пикселях: к счастью, специальный код Outlooks может быть добавлен между условным кодом Outlook, т.е. <! - [ifgte mso 9]>… .. Код здесь …… </endif>, который игнорируется другими почтовыми клиентами .
Кодируйте электронную почту с использованием <table> вместо <div>: хотя кодирование веб-сайтов продвинулось до создания структуры с использованием <div>, некоторые почтовые клиенты, такие как Outlook2007, по-прежнему испытывают проблемы с отображением <div>, и поэтому разработчики электронной почты по-прежнему придерживаются безотказного метода кодирования < таблица> макет. Хотя это неудобно, продолжайте кодировать электронную почту, как будто это 1999 год ...

Заключение

Короче говоря, ваши электронные письма не будут выглядеть одинаково в каждом почтовом клиенте. Примите во внимание эти проблемы и обходные пути при создании следующей кампании по электронной почте, чтобы максимально использовать ее .