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

Десктопные ибраузерные клиенты: Apple mail, Gmail, Outlook
Вдекабре 2017 года Литмус проанализировал 1,2 миллиарда писем ивыяснил, что
- 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 и стандартном почтовике
Поверсии Литмуса, нужно
Мытестируем письма в
Литмус показывает письмо вразных Аутлуках
Мобильные клиенты: Apple iPhone, Gmail, iPad, Samsung, Google
Усмартфонов сравнительно небольшой экран, поэтому можно предположить, что все они будут отображать письма одинаково. Давайте посмотрим, как всё выглядит насамом деле напримере шестого айфона иGmail для Андроида.
Сравнение письма вApple Mail наайфоне иGmail наАндроиде
С мобильными клиентами могут твориться странные вещи. Email-маркетолог Кортни Фантино (Courtney Fantinato) в январе 2017 года
Приложение Аутлука на Андроиде. Слева почтовый аккаунт Hotmail, медиазапросы не работают. Cправа аккаунт Aol, медиазапросы работают.
Вместе сприложениями Аутлука иGmail медиазапросы поддерживают большинство мобильных клиентов. Теперь верстальщикам не приходится использовать хаки иобходные пути, чтобы письма выглядели хорошо вмобильной идесктопной почте.
Операционные системы
От системы зависят: шрифты иих рендеринг, цвета иобновления программ.
В ранних версиях Windows стандартным почтовым клиентом был Outlook Express. Начиная с Windows XP, его сменил Windows Mail. Стандартный клиент Mac OS — Apple Mail.
Движки для рендеринга
Почтовые клиенты могут быть отдельной программой, вкладкой вбраузере или мобильным приложением. Впочтовых клиентов изтоп-10 Литмуса используется четыре движка: WebKit, Blink, Gecko, Word.
WebKit— разработка Apple. Онотлично рендерит рассылки и
Движок Blink— это разработка Гугла наоснове WebKit. Срассылками онсправляется хуже. Клиенты нанём неподдерживают встроенные стили, медиазапросы ивырезают тег style, если это не Гугл-аккаунт, а,например, Yahoo, Яндекс. Вомногих письмах можно заметить кнопки, вкоторых ссылка работает только при наведении натекст, нет поддержки анимации ивидео. Нанём работают Хром, Опера15+, Яндекс.Браузер, мобильные приложения Gmail и Inbox.
Движок Gecko используют Thunderbird иFirefox— продукты Mozilla. Выможете использовать медиазапросы, носпрефиксом -moz
вместо -webkit
. Для встроенных стилей нужно указывать moz-text-html
после тега. Формы ирадиокнопки
Аутлуки 2000–2003 используют движок Internet Explorer, Аутлуки 2007–2016 иWindows Mail— Word. Десктопные клиенты неподдерживает почти ничего. Мобильные приложения наоснове WebKit работают хорошо инеподдерживают только видео иформы.
Нашестом, восьмом идевятом месте
Как тестировать отображение рассылок
Проверить код навсех устройствах, совсеми операционными системами ивовсех комбинациях сложно. Литмус, конечно, облегчает задачу, нонегарантирует полное совпадение. Используйте его для тестирования, адля подстраховки проверяйте водном приложении изкаждой почтовой группы.
- Аутлук 2015 использует для отображения движок Apple— WebKit, поэтому письма будут выглядеть почти как вApple Mail8.
- Вторую группу образуют Yahoo, Gmail иайпад.
- Мобильные приложения стоят отдельно, атретий круг образуют старые Аутлуки, которые используют движок Word для отображения HTML-кода.
Протестировав письмо втрёх десктопных идвух мобильных приложениях изэтих групп, вы, скорее всего, избавитесь неприятных сюрпризов.
***
Письма будут немного различаться отклиента кклиенту, поэтому каждую рассылку нужно тестировать. Сильнее всего разница видна встарых Аутлуках, почтовике Windows10инамобильных клиентах. Главное, чтобы письмо хорошо читалось, шрифт небыл слишком мелким насмартфоне, изображения итекст помещались вблоки. Округлые кнопки всегда можно сделать картинками, арендерингом шрифтов пренебречь.