Вбудований темний режим у 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: оформлений у світлих тонах

У всіх протестованих нами поштових клієнтах темний режим змінював кольори. У 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: оформлений у нейтральних тонах, ані темних, ані світлих

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

Контрастність кольорів у редакторі Stripo була близькою до тієї, яку відображали реальні поштові клієнти, або навіть нижчою, тому перевірці контрастності в Stripo можна довіряти.

Цей інструмент імітує роботу таких поштових клієнтів: 

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

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

Лист 3: оформлений в темних тонах

У досліджуваних поштових клієнтах темний режим змінював кольори та контрастність по-різному порівняно з редактором 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: з інтерактивним контентом

Для аналізу цього листа ми приділили особливу увагу інтерактивній частині. У більшості поштових клієнтів контрастність тексту була вищою, ніж у редакторі Stripo. Це означає, що якщо ваш лист пройшов перевірку контрастності кольорів під час дизайну, то в реальній пошті контрастність буде ще кращою.

Кольори рейтингу товарів залишилися незмінними у всіх поштових клієнтах, за винятком Gmail, де яскраво-зелений колір відображався у світлішому відтінку.

Цей інструмент імітує роботу таких поштових клієнтів:

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

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

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

На завершення

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

Stripo дозволяє перемикатися між світлим і темним режимами безпосередньо в редакторі в процесі дизайну, допомагаючи на ранньому етапі виявити потенційні проблеми темного режиму, як-от контрастність, читабельність або поведінка зображень. Результати, що відображаються в редакторі, є приблизними, а не точними, оскільки поштові клієнти по-різному реалізують темний режим, і кінцевий рендеринг може відрізнятися. Виявляючи проблемні зони на ранньому етапі, можна поліпшити якість листа загалом, перш ніж переходити до повноцінного тестування.

Чіткі та зрозумілі листи полегшують взаємодію з підписниками і сприяють їхній довгостроковій лояльності.