Темна тема для листів: що це і як оптимізувати розсилки

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

Що таке темний режим?

У темних темах до темного фону застосовуються тексти, іконки та елементи інтерфейсу світлого кольору. 

Як це працює? Хтось вважає, що темна тема переводить кольори у контрастні (тобто на протилежні у кольоровому колі), якщо email відкривається на пристрої з темним режимом.

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

Як це відбувається насправді? Email-клієнт визначає колір фону листа. Далі він застосовує темний фон (якщо він не був встановлений) і контрастні відтінки діючих кольорів контенту.

(Email у світлому режимі)

(Email у темному режимі)

Однак, коли фон набуває чорного кольору — темна тема перетворює його на білий в Gmail на iOS та Android. А темно-сірий стає світло-сірим і т. д. 

Чому темні теми такі популярні?

Ця функція набуває популярності через декілька причин:

• вона рекомендована офтальмологами

Вважається, що світлий текст на темному фоні зменшує навантаження на очі. Однак офтальмологи все ще сперечаються з цього приводу;

• це новий тренд

Так. Це правда. Багато людей вмикають її, тому що це щось новеньке, що хочеться спробувати;

• це просто комфортно

Деяким користувачам набагато комфортніше читати на темному екрані, особливо, коли за вікном темна ніч;

• це економить заряд акумулятору

Google підтвердив, що темний режим економить заряд батареї пристроїв на Android. Однак це стосується лише OLED-екранів.

Wired стверджує, що темна тема не впливає на час роботи батареї, якщо мова йде про LCD-дисплеї, які використовуються в продукції Apple. До речі, Apple пообіцяли повністю відмовитись від LCD-екранів та перейти на технологію OLED.

Список email-клієнтів, які підтримують темний режим, та відображення листів в них

Темні теми тільки набувають популярності. Лише останні версії ОС підтримують їх та відображають листи коректно.

• Gmail app на Android (Android 10)

Він повністю інвертує кольори: не тільки для інтерфейсу користувача, але й для всього листа.

Ми протестували велику кількість листів. На початку в одному з них був темний фон та біла стрічка меню. 

Android 10 не інвертував темні кольори в світлі, але замінив білий рядок на темний.

(Email на Android 10, темна тема)

Важливо зазначити:

Як ми й казали, тільки остання версія Android — Android 10 — відображає листи у темному режимі. Але існують й інші обов’язкові умови, на які потрібно звернути особливу увагу, якщо ви бажаєте побачити email в темній темі. Вони наступні:

1. Ви маєте завантажити Gmail app з Google PlayStore, а не використовувати версію, яка встановлена дефолтно (іноді смартфони Samsung можуть мати таку).

2. У вас повинна бути остання версія Gmail app, бажано мати оновлення листопаду 2019 року і пізніші. 

• Gmail app на iOS (iOS 13)

Що робить Gmail app на iOS?

Мій оригінальний email був з темним фоном та світлою стрічкою меню. iOS інвертував темні кольори в світлі, а світлі у темні відповідно.

Важливо зазначити:

Gmail все ще «запускає» темну тему для листів на iOS. Реліз має завершитися для всіх користувачів приблизно за 2 тижні. Але такий самий запуск для Android зайняв у Google приблизно два місяці замість двох тижнів. Потрібно запастися терпінням.

• iPhone Native Mail App (рідний поштовик на iOS)

Додаток дозволяє увімкнути темний режим для інтерфейсу користувача, зокрема, для електронної пошти. Якщо ви виставили прозорий колір фону, iPhone Mail перетворить його на темний.

В іншому випадку ваші електронні листи будуть виглядати абсолютно однаково в темному та світлому режимах. 

• Apple Mail на macOS 

Тут така сама ситуація. Додаток дозволяє вмикати темний режим для інтерфейсу користувача, але це не впливає на дизайн ваших HTML-листів у темному режимі.

• Gmail на macOS та Windows

В ньому кольори не інвертуються зовсім або роблять це частково — називайте як завгодно.

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

• Outlook app (2019) на Android 

Кажуть, що кольори тут інвертуються частково. Маю зізнатися, я не змогла це перевірити, тому що на моєму смартфоні немає додатка Outlook 2019.

• Outlook app (2019) на iOS

Передбачаю, що і тут кольори інвертуються частково. Але також не маю Outlook 2019 на iPhone.

• Outlook 2019 на macOS

Інвертує кольори. І робить це на зразок Android 10 — залишає темний дизайн таким, як він є, а світлий фон змінює на темний.

• Outlook.com

Ситуація з Outlook.com дуже цікава.

Передбачається, що в ньому кольори інвертуються частково. Але коли я відправляю email з темним дизайном, Outlook.com змінює кольори на світлі у нічному режимі. А коли відправляю email у світлих тонах — Outlook.com інвертує кольори в темні.

Цікаві факти про темний режим в Outlook.com:

1. Outlook.com зовсім не впливає на дизайн елементів AMP у листах.

Якщо ви виставите білий фон — ось що користувач побачить у цьому конкретному email-клієнті, навіть з увімкнутим темним режимом.

2. Outlook.com надає вам можливість переглянути email в обох режимах, не змінюючи кольору інтерфейсу користувача.

Щоб переключити режим перегляду із світлого у темний і навпаки, вам лише потрібно натиснути на цю кнопку:

3. Outlook не інвертує кольори рамок.

Поради з оптимізації листів для темного режиму

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

Тож, щоб оптимізувати email-шаблон для темного режиму, вам слід:

1. Попрацювати над зображеннями

a) Використовуйте іконки та зображення з прозорим фоном або впевніться, що їх фони співпадають за розміром, щоб не було подібних неприємностей:

Погодьтеся, що це не найкращий приклад листа з темною темою, оскільки зображення з різними розмірами фону руйнують все враження?

b) Будьте обережні з прозорими картинками

Ви повинні використовувати зображення з прозорими фонами для карток товарів.

Однак фото людей будуть виглядати краще на модифікованому фоні.

2. Зверніть увагу на логотипи

a) Ваші логотипи не повинні мати фону для запобігання схожої ситуації.

b) Нехай ваші логотипи будуть написані не чорним кольором, щоб добре відображатися на темній та світлій темах.

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

Ми перевірили — це не допомагає, а тільки робить код усього листа більш навантаженим.

c) Додайте світлі тіні до чорних логотипів

Якщо ваш логотип написаний чорним кольором, додайте до нього світлу тінь. Це буде виглядати красиво та відповідати дизайну вашого бренду.

3. Налаштуйте фонові кольори для контейнерів

Якщо ви не хочете, щоб контент вашого листа мав темний фон, можете налаштувати кастномний колір за допомогою Stripo.

Колір, який ви встановите як «Колір фону контент», залишиться таким самим у темному режимі.

Потім виберіть «прозорий» колір фону стрічки — в цьому випадку вибраний колір фону буде застосований до контенту, але не до всієї області листа.

Обов’язково налаштуйте однакову гаму кольорів для всіх стрічок/рядків.

4. Протестуйте ваші листи

Завжди тестуйте свої HTML-листи у світлому та темному режимах.

5. Не використовуйте додаткові елементи коду

Незважаючи на деякі рекомендації щодо додавання спеціальних елементів коду у ваші шаблони, які, як кажуть, дозволяють відображати ваші електронні листи в темному режимі, ці зразки коду наразі не вирішують жодних проблем. Принаймні, так показують численні тести.

До того ж, email-шаблони працюють у більшості поштових клієнтів достатньо добре.

Отже, не потрібно якихось специфічних знань та навичок для оптимізації листів у темній темі — достатньо лише опрацювати їх зовнішній вигляд. Вже не потрібно порпатися у коді.

Як темний режим впливає на plain-text листи?

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

Але чи це правда? Давайте перевіремо:

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

2. Gmail в iOS та Android відображає світлий текст на темному фоні.

3. Outlook також інвертує кольори нашого plain-text листа у темному режимі.

4. Вбудовані додатки iPhone та Apple Mail перетворюють кольори фону зі світлого на темний, а кольори тексту — навпаки, якщо мова йде про особисті листи в темному режимі.

Однак є деякі речі щодо plain-text повідомлень в Apple Mail та в поштовику iPhone, про які варто згадати:

• він інвертує кольори, лише якщо це єдиний або перший email у ланцюжку. Іноді другий та всі наступні листи матимуть білий фон та темний текст.

• навіть якщо це перший email в ланцюжці, він може стати білим, якщо в ньому є зображення. Логотип вашої компанії, який включений у ваш email, також вважається зображенням;

• персональні листи, які були вам переадресовані, також можуть мати білий фон. 

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

Звичайно, враховуючи, що лише невелика частка користувачів може бачити темний режим, ми маємо задати собі питання: чи темна тема дійсно варта витрачених на неї зусиль? Відповідь: так, авжеж! По-перше, люди використовують цю функцію з якихось причин. Ми повинні поважати це та оптимізувати дизайн наших листів для цього режиму.

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