363 2

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

Письмо может выглядеть не совсем так, как задумывал дизайнер. Внешний вид рассылок зависит по большей части от движка почтового клиента и незначительно — от операционной системы. Рендеринг — это то, как движок отображает код на экране. Объясняем подробнее, что на него влияет.

Десктопные и браузерные клиенты: Apple mail, Gmail, Outlook

В декабре 2017 года Литмус проанализировал 1,2 миллиарда писем и выяснил, что 93% людей просматривали почту в 10 клиентах. Считались просмотры через браузер, десктопное и мобильное приложение.

  1. Apple iPhone — 28%
  2. Gmail — 26%
  3. Apple Ipad — 11%
  4. Apple Mail — 7%
  5. Outlook — 6%
  6. Samsung Mail — 5%
  7. Outlook.com — 4%
  8. Google Android — 3%
  9. Yahoo! Mail — 2%
  10. Windows Live Mail — 1%

От почтовых клиентов зависит скругление углов HTML-таблиц, отображение шрифта, вертикальное выравнивание элементов, подчёркивание ссылок, поддерживаемые теги и стили, которые влияют на внешний вид писем на разных экранах. Например, медиазапросы.

Сравнение письма в стандартных почтовиках Mac OS и Windows

Отображение различается, несмотря на одинаковую ОС Windows.
Сравнение письма в Inbox и стандартном почтовике

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

Мы тестируем письма в Литмусе. Там можно наглядно посмотреть, как письмо будет выглядеть в разных клиентах и на разных операционных системах.

Литмус показывает письмо в разных Аутлуках

Мобильные клиенты: Apple iPhone, Gmail, iPad, Samsung, Google

Если верить исследованию Blue Hornet, 70% пользователей немедленно удаляют письмо, если оно плохо отображается в их смартфоне. Это проблема, потому что мобильные почтовые клиенты рендерят рассылки совсем не так, как десктопные.

У смартфонов сравнительно небольшой экран, поэтому можно предположить, что все они будут отображать письма одинаково. Давайте посмотрим, как все выглядит на самом деле на примере шестого айфона и Gmail для Андроида.

Сравнение письма в Apple Mail на айфоне и Gmail на Андроиде

С мобильными клиентами могут твориться странные вещи. Имейл-маркетолог Кортни Фантино (Courtney Fantinato) в январе 2017 года заметила, что в Аутлуке для Андроида перестали корректно работать медиазапросы и даже инлайновые стили. Со временем клиент в iOS тоже перестал поддерживать медиазапросы, но инлайновые стили продолжили работать. В ходе тестов выяснилось ещё более странное: работа медиазапросов зависела от почтового аккаунта. Почтовые ящики на Yahoo и Aol поддерживали медиазапросы, а Hotmail, Gmail и Outlook (имеется в виду почта @outlook.com, не клиент) — нет.

Приложение Аутлука на Андроиде. Слева почтовый аккаунт Hotmail, медиазапросы не работают. Cправа аккаунт Aol, медиазапросы работают. Источник

Как сообщает Литмус, в сентябре 2017 года Аутлук добавил поддержку медиазапросов в приложениях для Андроида и iOS, но в октябре опять выключил до конца года — из-за ошибок при рендеринге писем. Если верить Campaign Monitor, сейчас всё работает.

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

Операционные системы

От системы зависят: шрифты и их рендеринг, цвета и обновления программ.

В ранних версиях Windows стандартным почтовым клиентом был Outlook Express. Начиная с Windows XP, его сменил Windows Mail. Стандартный клиент Mac OS — Apple Mail.

Движки для рендеринга

Почтовые клиенты могут быть отдельной программой, вкладкой в браузере или мобильным приложением. В почтовых клиентов из топ-10 Литмуса используется четыре движка: WebKit, Blink, Gecko, Word.

WebKit — разработка Apple. Он отлично рендерит рассылки и поддерживает HTML5, CSS3, анимацию, медиазапросы и фоновое видео. На нём работает любой браузер и почтовый клиент, который запускается в Mac OS или iOS. Хром, приложение Gmail и другие — оболочки для WebKit. Политика компании запрещает использовать альтернативы.

Движок Blink — это разработка Гугла на основе WebKit. С рассылками он справляется хуже. Клиенты на нём не поддерживают встроенные стили, медиазапросы и вырезают тег style, если это не Гугл-аккаунт, а, например, Yahoo, Яндекс. Во многих письмах можно заметить кнопки, в которых ссылка работает только при наведении на текст, нет поддержки анимации и видео. На нём работают Хром, Опера 15+, Яндекс.Браузер, мобильные приложения Gmail и Inbox.

Движок Gecko используют Thunderbird и Firefox — продукты Mozilla. Вы можете использовать медиазапросы, но с префиксом -moz вместо -webkit. Для встроенных стилей нужно указывать moz-text-html после тега. Формы и радиокнопки требуют своих хаков. Если у вас есть подписчики, которые пользуются Thunderbird или Firefox, тщательно тестируйте рассылку перез запуском. Сейчас Mozilla экспериментирует с новым движком Quantum, в два раза быстрее старого.

Аутлуки 2000-2003 используют движок Internet Explorer, Аутлуки 2007-2016 и Windows Mail — Word. Десктопные клиенты не поддерживает почти ничего. Мобильные приложения на основе WebKit работают хорошо и не поддерживают только видео и формы.

На шестом, восьмом и девятом месте в рейтинге Литмуса стоят приложения Андроида, Самсунга и Yahoo. Gmail стал нативным клиентом с пятого Андроида. Самсунг работает на собственном движке на основе WebKit, поэтому он отлично рендерит рассылки и поддерживает даже внешние CSS. Yahoo хорошо поддерживает только фоновые изображения, таблицы и формы.

Как тестировать отображение рассылок

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

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

  • Аутлук 2015 использует для отображения движок Apple — WebKit, поэтому письма будут выглядеть почти как в Apple Mail 8.
  • Вторую группу образуют Yahoo, Gmail и айпад.
  • Мобильные приложения стоят отдельно, а третий круг образуют старые Аутлуки, которые используют движок Word для отображения HTML-кода.

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

***

Письма будут немного различаться от клиента к клиенту, поэтому каждую рассылку нужно тестировать. Сильнее всего разница видна в старых Аутлуках, почтовике Windows 10 и на мобильных клиентах. Главное, чтобы письмо хорошо читалось, шрифт не был слишком мелким на смартфоне, изображения и текст помещались в блоки. Округлые кнопки всегда можно сделать картинками, а рендерингом шрифтов— пренебречь.

Пишите, на что вы обращаете внимание в рассылках.

Поделиться
Отправить
  • Eugenius

    Ребята, с итогами вы очень опечалили. Какие старые версии Оутлук? Самый актуальный сейчас Outlook из пакета Office 365 по прежнему использует Word для рендеринга. А новее Outlook нет. Outlook 2015 for Mac — какой процент пользователей? Их ничтожное количество. Вообще опираться на глобальную статистику Litmus бессмысленно — статистика клиентов по вашей базе может отличаться совершенно. Как правило по России будет очень большая доля Outlook.

  • Eugenius

    И в дополнение: «Округлые кнопки всегда можно сделать картинками, а рендерингом шрифтов— пренебречь». Очень круто делать кнопки картинками, когда Outlook их не грузит по умолчанию, а у многих загрузка картинок запрещена. Кнопка будет вообще не видна. Нельзя ставить дизайн выше функциональности.