Где нужно тестировать вёрстку email и почему руками
На каких устройствах и почтовых клиентах нужно тестировать корректность отображения email и почему для этого недостаточно сервисов автоматической проверки, рассказывает верстальщик из Inbox Marketing.
Код и дизайн вашего письма могут быть сколь угодно идеальными, но какой в этом толк, если подписчики пользуются 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, поэтому дополнительные мануальные тесты становятся необходимостью.
Такие сервисы проверки платные, и для российских компаний это не всегда целесообразное вложение: большого охвата популярных в России почтовиков нет, зато есть проверка во многих западных почтовиках, но российская аудитория ими не пользуется.
Но так как сервис зарубежный, там вообще не представлен Yandex. В аналогах Email on Acid встречается Yandex, но в очень урезанном виде. Mail.ru можно посмотреть только в десктопной версии и только в светлой теме — этого недостаточно. Многие пользователи наших клиентов могут читать письма через Yandex и Mail.ru, поэтому дополнительные мануальные тесты становятся необходимостью.
Такие сервисы проверки платные, и для российских компаний это не всегда целесообразное вложение: большого охвата популярных в России почтовиков нет, зато есть проверка во многих западных почтовиках, но российская аудитория ими не пользуется.
Список для тестирования верстки email
Мы в Inbox Marketing тестируем все письма по этому списку.
Десктоп, веб-версии
-
Яндекс.Почта.
-
Mail.ru (+ темная тема).
-
Yahoo.
-
Gmail.
Десктоп, приложение
Мобильные устройства. 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-верстальщика — он поможет сделать письма красивыми в темной и светлой темах на всех популярных в России устройствах и почтовых клиентах.
Рекомендуем!
Популярные новости
17 декабря 2024, 13:05
16 декабря 2024, 17:15
16 декабря 2024, 15:46
16 декабря 2024, 13:56
16 декабря 2024, 10:05
