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

Десктопные ибраузерные клиенты: 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 наАндроиде

С мобильными клиентами могут твориться странные вещи. Email-маркетолог Кортни Фантино (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 Mail8.
• Вторую группу образуют Yahoo, Gmail иайпад.
• Мобильные приложения стоят отдельно, атретий круг образуют старые Аутлуки, которые используют движок Word для отображения HTML-кода.

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

***

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

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