Чек-лист. Где нужно тестировать верстку email «руками»
Где нужно тестировать email и почему руками, а не с помощью сервисов рассказала Леся, верстальщик Inbox Marketing.
Cодержание
Тесты помогают изучать особенности почтовых клиентов
Благодаря тестам отображения писем мы узнаём, какие особенности отображения есть в разных почтовиках. Задать условия отображения писем для каждого почтового клиента невозможно, поэтому приходится искать такое решение, которое будет оптимально выглядеть везде или добавлять какие-нибудь мелочи в код специально для определенного почтовика — но так, чтобы это не вредило верстке в целом и в остальных клиентах всё выглядело хорошо.
«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-рассылку
Кроме этого списка, мы подготовили большой чек-лист email-верстальщика. В формате статьи он нечитабелен, но его можно скачать у нас на сайте.