Знакомо многим: то, что отлично выглядит в Gmail, может поехать в Outlook и криво отобразиться в Yandex. Чтобы этого избежать — важно тестировать письма до запуска.

Вот 4 сервиса, которые помогут проверить отображение в разных почтовиках:

1️⃣ Litmus

• Подробный предпросмотр писем в более чем 100+ почтовых клиентах и устройствах
• Множество вспомогательных сервисов - тестирование на спам, блочный редактор, сервис аналитики и т.д.
• Для теста необходимо отправить письмо из вашей платформы

2️⃣ Email on Acid

• Подробный предпросмотр писем в более чем 100+ почтовых клиентах и устройствах
• Проверка ссылок, картинок, кода на возможные проблемы и ошибки
• Имеет встроенную проверку на спам (анализ заголовков, контента и т.д.)
• Не поддерживает российские почтовые сервисы

3️⃣ Testi@

• Предпросмотр писем в более чем 100+ почтовых клиентах и устройствах
• Есть бесплатный тарифный план (2 почтовых клиента, 1000 предпросмотров в месяц)
• Тестирование на спам
• Может работать нестабильно при больших нагрузках

4️⃣ Email Preview Service

• Cкриншоты отображения писем в более чем 50 почтовых клиентах и устройствах
• Включает инструменты для анализа спам-оценки, проверки на черные списки, а также тестирования SPF, DKIM и DMARC записей
• Ограниченная поддержка русскоязычных почтовых клиентов
• Небольшой набор почтовых клиентов и устройств относительно других сервисов

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

А использование инструментов ⚡️ Pixcraft (https://pixcraft.io/) поможет создавать изначально письма, которых хорошо отображаются во всех почтовых клиентах

Медиа-запросы (media queries) — это CSS-правила, которые позволяют менять стили в зависимости от устройства получателя (ширины экрана, ориентации, плотности пикселей и других параметров).

Они помогают адаптировать письмо под разные варианты отображения, но работают не во всех почтовых клиентах.

• Mail.ru — наиболее полная поддержка медиа-запросов.
• Gmail — медиа-запросы поддерживаются в моб.приложениях (Android/iOS) и на десктопе в веб-интерфейсе. Но в мобильном веб-интерфейсе они не работают.
• Яндекс.Почта — несмотря на свою популярность, медиа-запросы не поддерживает.

Более подробную информацию можно найти на сайте caniemail.

Что делать?

Оптимальное решение — резиновый подход с блочным перестроением: блоки автоматически подстраиваются под ширину контейнера или перестраиваются друг под друга. Медиа-запросы при этом используются как вспомогательный инструмент — для точной настройки отступов, размеров и выравнивания в мобильной версии.

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

Именно он лежит в основе Pixcraft и обеспечивает надежное отображение писем в любом почтовом клиенте.