Встроенный темный режим в Stripo: как Stripo помогает быстрее тестировать письма

Пользуетесь темным режимом на компьютере или смартфоне? Наверное, вы включаете его вечером, чтобы глаза отдохнули? Исследования показывают, что более 82,7% людей используют темный режим хотя бы на одном устройстве, поэтому оптимизация писем для темного режима стала обязательной для всех, кто создает маркетинговые письма.

Поэтому в Stripo теперь есть встроенный темный режим превью прямо в редакторе. При разработке письма можно переключаться между светлым и темным режимами и быстро проверять уровень контрастности, читаемость и поведение изображений, прежде чем приступать к полноценному тестированию.

Важно отметить: почтовые клиенты по-разному работают в темном режиме, поэтому инструменты превью в темном режиме, даже в Stripo, показывают приблизительный результат. Превью помогает выявить потенциальные проблемы на ранней стадии проектирования, еще до полного тестирования.

Почему важно проверять правильность отображения писем в темном режиме прямо в редакторе?

Темный режим, инвертирующий цвета текста, фона и кнопок, может привести к следующим конфликтам:

1. Чтобы обеспечить надлежащую контрастность цветов для доступности и читаемости. Контрастность цветов важна в email-маркетинге в целом, но она также является требованием для доступности писем. Сильная контрастность цветов обеспечивает удобство чтения писем на любом устройстве и при любом освещении.

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

Низкая контрастность цветов

(Источник: шаблон письма Stripo)

Высокая контрастность цветов

2. Чтобы проверить изображения и логотипы на визуальную целостность в темном режиме. Если вы плохо обрезали изображения и «сгладили» все фоном, все эти недостатки станут очень заметны в темном режиме.

Поддержка темного режима в Stripo

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

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

• если вы заметили проблемы с контрастностью или читаемостью в темном режиме в Stripo, то аналогичные проблемы, скорее всего, возникнут и в некоторых почтовых клиентах;
• если в редакторе все выглядит читаемо и сбалансированно, то письмо в целом будет отображаться корректно в темном режиме, хотя точный рендеринг может отличаться.

Финальное тестирование в реальных почтовиках или с помощью таких инструментов, как Email on Acid, по-прежнему необходимо, но теперь оно проводится после предварительной проверки, а не до нее.

Как переключаться между темным и светлым режимами в области редактирования письма во время процесса дизайна

Итак, переходим в область редактирования письма. На скриншоте видно, как шаблон письма отображается в обычном светлом режиме.

В правом верхнем углу верхней панели, рядом с кнопкой для переключения между просмотром на компьютере и мобильном устройстве, находится кнопка развертывания. При клике на нее появляется выпадающее меню. Последний пункт в выпадающем меню — эмуляция темы. Это наш переключатель между темным и светлым режимами.

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

Как проверить темный режим в превью

Теперь, если требуется увидеть, как будет выглядеть письмо в режиме превью, достаточно кликнуть на кнопку «Превью» на верхней панели редактора.

Мы перешли в режим превью. Переключатель для перехода между светлым и темным режимами находится в верхней центральной части экрана. В режиме превью можно одновременно просматривать письма в версии для десктопа и мобильной версии.

Вам также может понравиться

Темный режим для писем: что это и как правильно оптимизировать письма

Тестирование темного режима: что видят подписчики

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

Поэтому мы решили проверить, как выглядят письма в темном режиме в редакторе Stripo и в наиболее распространенных почтовых клиентах.

Некоторые почтовые клиенты на самом деле не поддерживают темный режим. Их интерфейс может выглядеть темным, но само письмо остается на светлом фоне. К ним относятся Yahoo! Mail, AOL Mail, Apple Mail и Gmail на десктопе / в вебверсии. 

Согласно отчету Litmus Email Client Market Share Report, тремя самыми популярными почтовыми клиентами являются:

• мобильное приложение Gmail (Android);
• мобильное приложение Gmail (iOS);
• Outlook Office 365.

Для тестирования мы выбрали четыре шаблона писем: одно со светлой темой, одно с темной темой, одно нейтральное и письмо с интерактивным контентом.

*Мы протестировали письма, уделяя особое внимание контрастности фона и текста. Для этого использовался инструмент Accessible Color. Минимальный требуемый коэффициент контрастности составляет 4,5.

Письмо 1: оформлено в светлых тонах

Оригинальная версия в светлом режиме: просмотреть вебверсию	Темный режим в редакторе Sripo (Коэффициент контрастности цветов: 7,61)	В Gmail на iOS 26, iPhone 16 (Коэффициент контрастности цветов: 11,88)

Во всех протестированных нами почтовых клиентах темный режим изменял цвета. В Gmail цвета были частично изменены, а в Outlook Office 365 на Windows 10 они были не инвертированы, а приглушены.

В Gmail и Outlook реальные почтовые клиенты показали более низкую контрастность цветов, чем редактор Stripo. Это следует учитывать в процессах дизайна и тестирования. В то же время iOS показал значительно более высокую контрастность цветов.

Этот инструмент имитирует работу следующих почтовых клиентов:

• Outlook 2021 Windows 11;
• Outlook Office 365 Windows 10;
• Outlook Microsoft 365 Windows 11.

Перейдите по ссылке, чтобы увидеть результаты тестов, которые мы провели с помощью Email on Acid.

Письмо 2: оформлено в нейтральных тонах, ни темных, ни светлых

Оригинальная версия в светлом режиме: просмотреть вебверсию	Темный режим в редакторе Sripo (Коэффициент контрастности цветов: 8,7)	Gmail App Pixel 10 Android 16 (Коэффициент контрастности цветов: 10,54)

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

Контрастность цветов в редакторе Stripo была близка к той, которую отображали реальные почтовые клиенты, или даже ниже, поэтому проверке контрастности в Stripo можно доверять.

Этот инструмент имитирует работу следующих почтовых клиентов:

• Yahoo на Windows 10 (Edge и Firefox).

Перейдите по ссылке, чтобы увидеть результаты тестов, которые мы провели с помощью Email on Acid.

Письмо 3: оформлено в темных тонах

Оригинальная версия в светлом режиме: просмотреть вебверсию	Темный режим в редакторе Sripo (Коэффициент контрастности цветов: 13,99)	Gmail App Pixel 10 Android 16 (Коэффициент контрастности цветов: 16,22)

В тестируемых почтовых клиентах темный режим изменял цвета и контрастность по-разному по сравнению с редактором Stripo. В Android Gmail сменил фон с черного на темно-серый, снизив контрастность текста. В iOS Gmail полностью инвертировал цвета, что сохранило читаемость текста, но привело к исчезновению белого логотипа на белом фоне. В Outlook на Windows цвета были выборочно скорректированы, что снизило визуальную глубину.

Этот инструмент имитирует работу следующих почтовых клиентов:

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

Исключениями были:

• Outlook 2021 Windows 11;
• Outlook Office 365 Windows 10;
• Outlook Microsoft 365 Windows 11.

Перейдите по ссылке, чтобы увидеть результаты тестов, которые мы провели с помощью Email on Acid.

Письмо 4: с интерактивным контентом

Оригинальная версия в светлом режиме: просмотреть вебверсию	Темный режим в редакторе Sripo (Коэффициент контрастности цветов: 14,02)	Outlook Office 365 Windows 10 (Коэффициент контрастности цветов: 14,55)

Для анализа этого письма мы уделили особое внимание интерактивной части. В большинстве почтовых клиентов контрастность текста была выше, чем в редакторе Stripo. Это означает, что если ваше письмо прошло проверку контрастности цветов во время дизайна, то в реальной почте контрастность будет еще лучше.

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

Этот инструмент имитирует работу следующих почтовых клиентов:

• Outlook Office 365 Windows 10;
• Outlook 2021 Windows 11;
• Yahoo, Windows 10.

Перейдите по ссылке, чтобы увидеть результаты тестов, которые мы провели с помощью Email on Acid.

Наши тесты показали, что рендеринг в темном режиме действительно отличается в редакторе Stripo и в реальных почтовых клиентах, но превью дает довольно точное представление о том, как будет выглядеть письмо в реальности. Если редактор указывает на проблему с контрастностью или изображением, то с большой вероятностью эта же проблема возникнет и в реальных почтовых клиентах. А если письмо выглядит сбалансированным и читабельным в превью темного режима редактора, то с большей вероятностью оно будет хорошо отображаться на всех устройствах, хотя точные цвета и детали все равно могут отличаться. Как и всегда, финальное тестирование в реальных почтовиках с помощью таких инструментов, как Email on Acid, остается необходимым, но теперь большинство проблем можно обнаружить гораздо раньше в процессе дизайна.

В завершение

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

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

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