Projektowanie e-maili pod tryb ciemny: czytelne logo i przyciski
Dobre projektowanie e-maili pod tryb ciemny sprowadza się do jednego: każde logo i każdy przycisk muszą pozostać czytelne zarówno na jasnym, jak i na ciemnym tle. Potem testujesz układ pod kątem każdego sposobu, w jaki klient poczty może odwrócić Twoje kolory. Wyobraź sobie czarne logo w przezroczystym pliku PNG. Subskrybent otwiera newsletter w trybie ciemnym i logo znika. Naprawa to pięć kroków: poznaj trzy wzorce odwracania kolorów, popraw logo, przebuduj przyciski, dodaj nadpisania CSS tam, gdzie klienty je respektują, i testuj przed każdą wysyłką.
Co dzieje się z e-mailem po włączeniu trybu ciemnego?
To zależy od klienta poczty. E-mail w trybie ciemnym może zachować oryginalne kolory, zostać odwrócony częściowo albo w całości. Traktowałbym to jako trzy wzorce do przetestowania, a nie reguły przypisane do konkretnych aplikacji (aplikacje zmieniają swoje zachowanie częściej, niż byś chciał):
- Bez zmian: jasny projekt wyświetla się dokładnie tak, jak go zbudowałeś, nawet w ciemnym interfejsie.
- Częściowe odwrócenie: jasne tła ciemnieją, a ciemny tekst jaśnieje. Ciemne obszary zostają bez zmian.
- Pełne odwrócenie: zmienia się każdy kolor. Tak, także kolory marki, które wybrałeś celowo.
Obrazy rządzą się innymi prawami. Klient poczty zmienia kolory teł i czcionek w HTML, ale pikseli obrazów zwykle nie rusza. Dlatego przezroczyste logo ląduje na tle, którego nigdy nie wybierałeś. Projektuj pod najgorszy scenariusz. Nie pod najlepszy.
Dlaczego przezroczyste logo znika w trybie ciemnym?
Przezroczyste logo znika w trybie ciemnym, bo jego ciemne piksele trafiają prosto na ciemne tło, które klient poczty dodaje pod spodem. Tam, gdzie w projekcie była biel, czytelnik widzi teraz kolor bliski czerni, a czarne litery po prostu się w nim rozpływają. Masz trzy sprawdzone sposoby, żeby logo było widoczne w e-mailu w trybie ciemnym:
- Dodaj cienki jasny obrys albo delikatną poświatę wokół ciemnych liter, żeby odcinały się od każdego tła.
- Wbuduj w sam obraz jednolity kształt z marginesem, na przykład jasny zaokrąglony prostokąt albo plakietkę pod znakiem.
- Przygotuj osobną, jasną wersję logo i podmieniaj ją za pomocą media query dla trybu ciemnego tam, gdzie klient je obsługuje.
Żadne z tych rozwiązań nie jest darmowe. Obrys trochę zmienia znak marki. Jednolity prostokąt może w trybie jasnym wyglądać jak naklejka. A podmiana działa tylko tam, gdzie nadpisania CSS są respektowane. Ta sama logika dotyczy ikon, ikonek mediów społecznościowych i każdej grafiki z ciemnym tekstem.
Jak zachować czytelność przycisków w e-mailu, gdy kolory są odwrócone
Buduj przyciski z żywego tekstu HTML i kolorów tła, a nie z obrazów. Dzięki temu klient poczty może przebarwić etykietę i wypełnienie razem i zachować kontrast między nimi. Ale nawet przy żywym HTML odwrócone kolory w e-mailu potrafią pójść w złą stronę. Klient może rozjaśnić tekst, a wypełnienie zostawić bez zmian. Albo zamienić kolor Twojej marki w coś, co z marką zdecydowanie nie ma nic wspólnego.
Moja rada? Wybieraj kolory marki ze średnich tonów, które trzymają kontrast w obu schematach. Czysta czerń i czysta biel odwracają się najmocniej, więc ich unikaj. Obramowanie w kontrastowym kolorze sprawia, że krawędź przycisku jest widoczna na ciemnym tle. I unikaj przycisków graficznych z tekstem wtopionym w obraz. Jeśli naprawdę się nie da (zdarza się), daj obrazowi jednolite tło i tekst alternatywny opisujący akcję, na przykład „Pobierz raport”.
prefers-color-scheme w e-mailu, czyli kontrola nad stylami trybu ciemnego
Media query prefers-color-scheme pozwala ustawić własną ciemną paletę, zamiast zdawać się na automatyczne odwracanie kolorów przez klienta poczty. Jak wyjaśnia dokumentacja MDN o prefers-color-scheme, typowy wzorzec to domyślny jasny schemat kolorów plus blok prefers-color-scheme: dark, który go nadpisuje. Odwrotny układ też działa.
W tym bloku nadpisujesz kolory tła, tekstu, linków i wypełnień przycisków oraz przełączasz, która wersja logo się wyświetla. Jest jednak haczyk. Obsługa prefers-color-scheme w e-mailach różni się w zależności od klienta poczty. Traktuj więc to zapytanie jako dodatkową warstwę nałożoną na zasoby, które i bez niego dają sobie radę. Metatagi color-scheme i supported-color-schemes mogą poinformować klienta, że Twój e-mail ma własne ciemne style.
Lista kontrolna e-maila pod tryb ciemny przed kliknięciem Wyślij
Zanim jakikolwiek szablon pójdzie w świat, przejdź z nim krótką listę kontrolną dla logo, przycisków, tekstu i obrazów, w trybie jasnym i ciemnym:
- Logo jest czytelne na bieli i na kolorze bliskim czerni.
- Żaden przezroczysty obraz nie zawiera ciemnego tekstu bez obrysu lub jednolitego podkładu.
- Przyciski są zbudowane w HTML i mają kontrastowe obramowanie.
- Tekst główny nie jest czystą czernią na czystej bieli.
- Nadpisania dla trybu ciemnego są zdefiniowane dla teł, tekstu, linków i przycisków.
- Każdy obraz ma sensowny tekst alternatywny.
Testuj każdy e-mail pod kątem wszystkich trzech wzorców (bez zmian, częściowe odwrócenie, pełne odwrócenie) na prawdziwych urządzeniach i w klientach poczty, z których Twoja lista faktycznie korzysta. Błędy trybu ciemnego lubią pojawiać się obok błędów mobilnych, więc przy okazji sprawdź układ pod kątem podstaw responsywnego projektowania e-maili.
I nie próbuj naprawiać wszystkiego obrazami. Proporcja tekstu do obrazów wpływa na filtrowanie, a e-maile przeładowane obrazami i spam idą ze sobą w parze. W MailCraft możesz budować i dopracowywać układy, korzystając z responsywnych szablonów z podglądem na żywo, a potem sprawdzić tryb ciemny na wysyłkach testowych.
Główna zasada projektowania e-maili pod tryb ciemny jest prosta. Twórz zasoby, które przetrwają na każdym tle, a potem dodawaj nadpisania tam, gdzie klient poczty je respektuje. Zacznij od logo. Potem przyciski. Potem przejdź listę kontrolną przy najbliższym newsletterze. Chcesz więcej o pracy z szablonami? Przejrzyj nasze poradniki o projektowaniu e-maili.
FAQ
Czy warto używać w e-mailu logo w przezroczystym PNG?
Tylko wtedy, gdy znak pozostaje czytelny zarówno na jasnym, jak i na ciemnym tle. Ciemne logo na przezroczystym tle może zniknąć, gdy klient poczty przyciemni obszar pod nim. W takiej sytuacji dodaj jasny obrys albo umieść logo na jednolitym kształcie z marginesem wewnątrz obrazu.
Czy mogę zablokować odwracanie kolorów przez klienty poczty?
Nie, nie da się tego zrobić niezawodnie. Tam, gdzie jest to obsługiwane, możesz zdefiniować własne ciemne style za pomocą prefers-color-scheme, żeby klient użył Twojej palety zamiast swojej. Wszędzie indziej polegasz na zasobach zbudowanych tak, by przetrwały odwrócenie.
Jak przetestować e-mail w trybie ciemnym?
Wyślij wiadomości testowe na prawdziwe konta z włączonym trybem ciemnym, na urządzeniach i w klientach poczty, z których Twoi subskrybenci faktycznie korzystają. Sprawdź wynik pod kątem wszystkich trzech wzorców odwracania kolorów. Przy każdym z nich obejrzyj logo, przyciski i kontrast tekstu, zanim zatwierdzisz wysyłkę.
