Почему 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 Mail 8.
• Вторую группу образуют Yahoo, Gmail и айпад.
• Мобильные приложения стоят отдельно, а третий круг образуют старые Аутлуки, которые используют движок Word для отображения HTML-кода.

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

***

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

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