Najlepsze praktyki projektowania poczty e-mail w trybie ciemnym

Czego się dowiesz?

Dowiedz się więcej o trybie ciemnym, ustawieniu urządzenia, które niektórzy użytkownicy włączają, aby przyciemnić wyświetlacz. To ustawienie wpływa na sposób wyświetlania wiadomości e-mail. Tryb ciemny to ustawienie użytkownika końcowego wybierane na poziomie urządzenia, a Klaviyo nie ma bezpośredniej kontroli nad tym, jak tryb ciemny jest wdrażany na każdym urządzeniu.

Dlaczego ludzie używają trybu ciemnego?

Tryb ciemny stał się popularny, ponieważ uważa się, że ma wiele zalet. Użytkownicy mogą wybrać tryb ciemny, aby:

• Zminimalizuj zmęczenie oczu.
• Wspieraj zdrowsze nawyki snu.
• Wydłuż czas pracy baterii urządzenia.
• Popraw dostępność.

Według Litmus liczba osób wyświetlających e-maile w trybie ciemnym wzrosła z 28% w 2021 roku do 34% w 2022 roku.

Tryb ciemny i Twój branding

Tryb ciemny wpływa na branding e-maili, dostosowując kod HTML używany do wyświetlania ich w skrzynce odbiorczej. Zmiany mogą być tak niewielkie, jak odwrócenie kolorów w wiadomościach e-mail zawierających tylko tekst (pozostawiając wiadomości e-mail HTML bez zmian), lub tak znaczące, jak dostosowanie każdego koloru w w pełni zaprojektowanym szablonie e-mail.

Jeśli podczas projektowania e-maili nie uwzględnisz trybu ciemnego, może to skutkować trudnym do odczytania tekstem, kolorami, które nie pasują do stylu Twojej marki, i nie tylko.

Rozważ logo SWAK Cosmetics. Na białym tle wygląda świetnie.

Jednak podczas wyświetlania na urządzeniu w trybie ciemnym nie da się tego odczytać.

Zwróć uwagę na zmiany w tym nagłówku e-maila między trybem jasnym i ciemnym. Kolor tła wiadomości e-mail, kolor tekstu i kolor paska linków zostały odwrócone.

Urządzenia i systemy operacyjne oferujące tryb ciemny

Szczegóły zmian w trybie ciemnym różnią się w zależności od urządzeń i systemów operacyjnych. Litmus udostępnia zasób na temat urządzeń, które oferują tryb ciemny, oraz sposobu, w jaki traktują e-maile HTML.

Ogólnie rzecz biorąc, skrzynki odbiorcze dzielą się na 1 z 2 kategorii: te, które wprowadzają minimalne zmiany lub nie wprowadzają ich wcale, oraz te, które odwracają kolory w wiadomościach e-mail.

Minimalne zmiany

Niektóre skrzynki odbiorcze, np. Apple Mail na komputerze, nie wprowadzają zmian bezpośrednio w treści wiadomości e-mail (chyba że uwzględnisz metatagi trybu ciemnego). W tej skrzynce odbiorczej jedyną zmianą, jaką zobaczysz między wiadomością w trybie ciemnym a jasnym, jest kolor tła za informacjami o nadawcy.

Odwrócenie kolorów

Inne skrzynki odbiorcze, takie jak Outlook na komputerze, częściowo odwracają kolory. Oznacza to, że niektóre jaśniejsze kolory są zamieniane na ciemniejsze odcienie, a niektóre ciemniejsze kolory są zamieniane na jaśniejsze (np. ciemny tekst, który wcześniej był na jasnym tle). Efektem końcowym jest e-mail zauważalnie ciemniejszy niż oryginał.

Strategie łagodzenia skutków

Istnieje kilka strategii pozwalających utrzymać spójność z brandingiem przy jednoczesnej optymalizacji pod kątem trybu jasnego i ciemnego. Wybierz tę, która najlepiej odpowiada możliwościom zespołu i potrzebom brandingu.

Projektuj z myślą o trybie jasnym i ciemnym

Jeśli do wysyłania wiadomości e-mail korzystasz z edytora Klaviyo typu „przeciągnij i upuść”, ta strategia sprawdzi się najlepiej. Twórz szablony wiadomości e-mail, mając na uwadze zmiany, jakie przejdą na urządzeniach w trybie ciemnym:

• Używaj logo i obrazów, które świetnie wyglądają na jasnym i ciemnym tle, jak ten dla wypieków Bola.
  

• Możesz też dodać jasny cień do ciemnego logo z przezroczystym tłem, aby wyróżniało się w trybie ciemnym.
  

• Alternatywnie użyj plików obrazów zawierających kolory tła, zamiast używać przezroczystego tła. Jeśli wybierzesz tę opcję, upewnij się, że obraz całkowicie wypełnia przestrzeń, którą zajmuje (np. 600 px szerokości dla obrazów o pełnej szerokości).
  

• Tam, gdzie to możliwe, używaj tekstu zamiast obrazów zawierających tekst. Pozwala to na pełne odwrócenie kolorów (a do tego jest lepsze pod kątem dostępności).

Niestandardowy kod — wersje ciemna i jasna

Jeśli masz zespół deweloperski, który potrafi od podstaw przygotować niestandardowy kod HTML Twoich e-maili, możesz dostarczyć CSS, który wykrywa, czy odbiorca używa trybu ciemnego czy jasnego, i odpowiednio dostosowuje projekt. Może to zastąpić niektóre domyślne ustawienia trybu ciemnego w niektórych skrzynkach odbiorczych, dzięki czemu zyskujesz większą kontrolę.

W kodzie e-maila możesz użyć @media (prefers-color-scheme: dark) i [data-ogsc], aby kierować treści konkretnie do użytkowników trybu ciemnego. Dowiedz się więcej o tym, które klienty pocztowe obsługują te znaczniki oraz jakiego kodu używać we własnych projektach.

Korzystaj z wiadomości e-mail zawierających wyłącznie obraz

Nie zalecamy używania e-maili zawierających wyłącznie obrazy z różnych powodów:

• Bez tekstu alternatywnego Twoja wiadomość e-mail może wyglądać podejrzanie dla skrzynek odbiorczych i trafić do folderu spamu.
• Wiadomości e-mail zawierające wyłącznie obraz nie są najlepszą praktyką w zakresie dostępności, ponieważ wielu osobom oraz czytnikom ekranu trudno je odczytać.
• Używanie e-maili zawierających wyłącznie obrazy, aby wymusić wygląd w trybie jasnym, omija preferencje subskrybentów.

Jednak wiele marek stosuje tę strategię, więc warto o niej tutaj wspomnieć. E-maile składające się wyłącznie z obrazów nie opierają się na HTML w kwestii kolorów, czcionek, odstępów i innych elementów. Oznacza to, że nie można ich odwrócić, więc skrzynki odbiorcze będą wyświetlać e-mail, który ogólnie jest zgodny z Twoim pierwotnym projektem.