Почему имейл-рассылки везде выглядят по-разному
Десктопные и браузерные клиенты: Apple mail, Gmail, Outlook
В декабре 2017 года Литмус проанализировал 1,2 миллиарда писем и выяснил, что 93% людей просматривали почту в 10 клиентах. Считались просмотры через браузер, десктопное и мобильное приложение.
- Apple iPhone — 28%
- Gmail — 26%
- Apple Ipad — 11%
- Apple Mail — 7%
- Outlook — 6%
- Samsung Mail — 5%
- Outlook.com — 4%
- Google Android — 3%
- Yahoo! Mail — 2%
- 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 и на мобильных клиентах. Главное, чтобы письмо хорошо читалось, шрифт не был слишком мелким на смартфоне, изображения и текст помещались в блоки. Округлые кнопки всегда можно сделать картинками, а рендерингом шрифтов пренебречь.