Где нужно тестировать вёрстку email и почему руками

На каких устройствах и почтовых клиентах нужно тестировать корректность отображения email и почему для этого недостаточно сервисов автоматической проверки, рассказывает верстальщик из Inbox Marketing.

Inbox Marketing, inbox-marketing.ru

Где нужно тестировать вёрстку email и почему руками

Код и дизайн вашего письма могут быть сколь угодно идеальными, но какой в этом толк, если подписчики пользуются Outlook-ом с отключенными картинками

Тесты помогают изучать особенности почтовых клиентов

Благодаря тестам отображения писем мы узнаём, какие особенности отображения есть в разных почтовиках. Задать условия отображения писем для каждого почтового клиента невозможно, поэтому приходится искать такое решение, которое будет оптимально выглядеть везде или добавлять какие-нибудь мелочи в код специально для определенного почтовика — но так, чтобы это не вредило верстке в целом и в остальных клиентах всё выглядело хорошо.

«Например. Outlook умеет отображать гифки только из пакета Office 365 и в онлайн-версии. Чтобы изображения не „мылились“ на ретина-дисплеях, мы используем изображения в двойном размере, но из-за этого возникает следующая ситуация.

Если прописать у картинки только ширину, а высоту оставить по умолчанию, то большинство почтовиков сами нормально подстраивают картинку под нужные размеры. Но в Outlook гифки ломаются: ширина отрисовывается в одинарном размере (с ней все хорошо), а вот высота принимает полный двойной размер, т. е. растягивается.

Это легко лечится, если добавить в код гифки параметр высоты. Однако теперь у нас в Yahoo на iOS гифка будет адаптироваться неправильно: ширина подстроится под размер экрана, а высота будет соответствовать заданной нами в коде.

Чтобы гифка корректно отображалась везде, нужно дополнительно в инлайн-стилях прописать „height:auto“. На отображение в Outlook и других почтовиках это не повлияет, зато пользователи Yahoo на мобильных устройствах тоже смогут полюбоваться гифкой».

Леся, верстальщик Inbox Marketing

Но иногда выход один — заверстать часть письма картинками.

Сервисы Litmus, Email on Acid и аналоги не отменяют ручной проверки

Litmus, Email on Acid и аналоги — это сервисы, которые позволяют проверить, как email выглядит на различных устройствах и в разных почтовиках. Они полезны, если нам важно посмотреть, как письмо выглядит в Outlook или Gmail.

Но так как сервис зарубежный, там вообще не представлен Yandex. В аналогах Email on Acid встречается Yandex, но в очень урезанном виде. Mail.ru можно посмотреть только в десктопной версии и только в светлой теме — этого недостаточно. Многие пользователи наших клиентов могут читать письма через Yandex и Mail.ru, поэтому дополнительные мануальные тесты становятся необходимостью.

Такие сервисы проверки платные, и для российских компаний это не всегда целесообразное вложение: большого охвата популярных в России почтовиков нет, зато есть проверка во многих западных почтовиках, но российская аудитория ими не пользуется.

Список для тестирования верстки email

Мы в Inbox Marketing тестируем все письма по этому списку.

Десктоп, веб-версии

Яндекс.Почта.
Mail.ru (+ темная тема).
Yahoo.
Gmail.

Десктоп, приложение

Outlook MS Office 365.

Мобильные устройства. Android 9 с диагональю 6,3 дюйма и Android 6 с диагональю 5 дюймов, приложения

Яндекс.Почта (+ темная тема).
Mail.ru (+ темная тема).
Gmail.
Outlook.

Мобильные устройства. iOS 12.4.7 с диагональю 4 дюйма, приложения

Яндекс.Почта (+ темная тема).
Mail.ru (+ темная тема).
Gmail (+ темная тема).
Outlook (+ темная тема).
Spark.
Yahoo.
Встроенный почтовый клиент «Почта».

Если нет пометки про темную тему, то либо ее нет в приложении, либо она есть, но условная: код письма и цвета в нем не меняются, только интерфейс становится темным.

В среднем, тестирование одного письма занимает 10−20 минут. Сложные случаи — до 40 минут.

Тесты — не самая интересная часть работы, но они помогают развиваться, находить любопытные решения и делают нас сильнее!

Скачивайте полный чек-лист email-верстальщика — он поможет сделать письма красивыми в темной и светлой темах на всех популярных в России устройствах и почтовых клиентах.