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

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

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

Темний режим відображає світлі тексти, іконки та елементи користувацького інтерфейсу на темному фоні.

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

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

Як це робиться? Поштовий клієнт визначає схему кольорів фону вмісту листа. Потім застосовує темний фон, якщо його не було задано, і застосовує контрастні відтінки кольорів вмісту листа.

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

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

Однак темний режим змінює колір на білий у Gmail на iOS та Android, коли йдеться про чорний фон. Темно-сірий колір переходить у світло-сірий тощо.

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

Темний режим для листів стає дедалі популярнішим з кількох причин:

• його рекомендують офтальмологи

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

• він зараз у тренді

Ну. Це правда. Багато людей вмикають його тільки тому, що темний режим — це щось нове, і вони хочуть його протестувати. Як результаті, тільки на телефонах темний режим є у 81,9% користувачів;

• він просто зручний

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

• він економить заряд батареї

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

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

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

Темний режим тільки набирає популярності. Лише пристрої на базі Android та iOS з останніми версіями операційних систем підтримують темний режим і коректно відображають стилі темного режиму. Тепер давайте поговоримо про те, які поштові клієнти підтримують темний режим і як вони ним керують.

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

• Додаток Gmail на Android (Android 13)

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

Ми протестували найрізноманітніші листи. Один з них спочатку мав темний фон і білий рядок/смугу з меню.

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

(Лист у темному режимі, темна тема)

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

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

1. Ваш додаток Gmail має бути завантажено з Google PlayStore, а не з додатка, який був на вашому телефоні за замовчуванням. У телефонах Samsung вони іноді зустрічаються.
2. У вас має бути остання версія застосунку Gmail.

• Додаток Gmail на iOS (iOS 13)

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

Мій лист спочатку був темним зі світлим рядком меню. iOS інвертує кольори шрифтів, а також фонів. Наприклад, світлі фони з темним кольором тексту перетворюються на темні кольори зі світлим кольором шрифту.

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

Gmail все ще впроваджує темний режим для листів на iOS. Передбачається, що він стане повністю видимим і доступним для всіх користувачів приблизно за 2 тижні. Однак аналогічний процес для Android зайняв у Google не два тижні, а близько двох місяців. Нам просто потрібно набратися терпіння.

• Рідний поштовий додаток для iPhone (рідний поштовик на iOS)

Починаючи з iOS 13 компанія Apple додала підтримку темного режиму у свій рідний поштовий додаток Apple. Цей поштовий клієнт дає змогу ввімкнути темний режим для користувацького інтерфейсу та області листів. Якщо ви встановили прозорий колір фону, то поштовик для iPhone змінить його на більш темний.

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

• Apple Mail на macOS

У нас та сама ситуація. Apple Mail дає змогу ввімкнути темний режим для користувацького інтерфейсу, але це не впливає на підтримувані колірні схеми ваших HTML-листів у темному режимі. Крім того, Apple Mail на macOS дає змогу додавати користувацький код для налаштування темного режиму на свій смак за допомогою CSS. Сюди входять мета-теги HTML, цільові CSS і оновлені властивості, які дають змогу розробникам листів змінювати кольори шрифтів, візуальних елементів, фонових зображень тощо.

• Gmail на macOS та Windows

Цей один з популярних поштових клієнтів на ОС для десктопів не інвертує кольори або робить це частково в темному режимі — називайте це як хочете.

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

• Додаток Outlook на Android

Вважається, що він частково інвертує кольори. Однак коли я тестувала темний режим на своєму пристрої Android, жодних інвертованих кольорів помічено не було. Якщо ви зіткнулися з такою проблемою або якщо ваш лист у темному режимі несумісний з Outlook на Android, просто додайте префікс data-ogsc до дублікатів стилів темного режиму. У результаті у вас має вийти щось на зразок цього:

[data-ogsc] .light-mode-image { display:none; display:none !important; }
[data-ogsc] .dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }

• Додаток Outlook на iOS

Цей поштовий клієнт повинен частково інвертувати кольори в темному режимі. Але у мене також немає додатку Outlook на моєму iPhone.

• Outlook 2019 на macOS

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

• Outlook.com

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

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

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

1. Outlook.com взагалі не впливає на дизайн AMP-листів.

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

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

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

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

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

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

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

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

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

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

б) Будьте обережні з прозорими зображеннями формату PNG

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

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

2. Працюйте над логотипами

a) У ваших логотипах не має бути фону

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

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

Ми протестували — код не допоміг. Але значно погіршив код нашого листа.

в) Використовуйте світлий фон (або біле обведення) і тіні для логотипу, призначеного для темного режиму

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

3. Додайте стилі темного режиму для @media за допомогою медіа-запиту

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

@media (prefers-color-scheme: dark ) {
.dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
.light-mode-image { display:none; display:none !important; }
}
}

Цей медіа-запит допоможе налаштувати ваші розсилки в темному режимі для більшої сумісності з поштовими клієнтами, такими як Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS) і Outlook App (iOS). Просто додайте запит (prefers-color-scheme: dark) у розділ <style></style> вашого листа, щоб створити користувацькі стилі темного режиму.

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

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

Схема кольорів, яку ви встановили як «Фоновий колір вмісту», залишиться незмінною в темному режимі в листі

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

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

4. Протестуйте свої листи

Завжди тестуйте свої HTML-листи як у звичайному світлому, так і в темному режимі відображення.

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

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

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

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

Як темний режим впливає на звичайні листи?

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

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

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

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

3. Outlook також інвертує кольори наших звичайних листів у темному режимі.

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

Однак є деякі моменти, пов'язані з повідомленнями у вигляді звичайного тексту в Apple Mail і в поштовику iPhone, про які варто згадати:

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

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

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

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

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

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