Najlepsze praktyki projektowania wiadomości 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świetlacze. To ustawienie wpływa na sposób wyświetlania wiadomości e-mail. Tryb ciemny jest ustawieniem użytkownika końcowego, które jest wybierane na poziomie urządzenia, a Klaviyo nie ma bezpośredniej kontroli nad sposobem implementacji trybu ciemnego 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.
• pomagaj w utrzymaniu zdrowych nawyków snu.
• Wydłuż czas pracy baterii urządzenia.
• Popraw dostępność. 

Według Litmus liczba osób przeglądających wiadomości e-mail 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 twojej wiadomości e-mail poprzez dostosowanie kodu HTML używanego do renderowania jej w skrzynce odbiorczej. Dostosowania te mogą być tak małe, 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 całkowicie zaprojektowanym szablonie e-mailowym.

Jeśli nie uwzględnisz trybu ciemnego podczas projektowania wiadomości e-mail, może to skutkować trudnym do odczytania tekstem, kolorami, które nie są zgodne ze stylem Twojej marki i nie tylko. 

Weź pod uwagę logo SWAK Cosmetics. Na białym tle wygląda świetnie.

Ale gdy oglądasz go na urządzeniu w trybie ciemnym, nie da się go odczytać.

Zwróć uwagę na zmiany w nagłówku tej wiadomości e-mail 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

Specyfika zmian trybu ciemnego różni się w zależności od urządzenia i systemu operacyjnego. Litmus oferuje zasoby dotyczące urządzeń oferujących tryb ciemny i sposobu, w jaki traktują one wiadomości e-mail 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 wiadomości e-mail.

Minimalne zmiany

Niektóre skrzynki odbiorcze, takie jak Apple Mail na komputery stacjonarne, nie wprowadzają zmian bezpośrednio w treści wiadomości e-mail (chyba że dołączysz metatagi trybu ciemnego). W tej skrzynce odbiorczej jedyną zmianą, jaką zobaczysz między wiadomością w trybie ciemnym lub jasnym, jest kolor informacji o nadawcy.

Inwersja kolorów

Inne skrzynki odbiorcze, takie jak Outlook na komputerze, częściowo odwracają twoje 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 znajdował się na jasnym tle). Efektem końcowym jest wiadomość e-mail, która jest znacznie ciemniejsza niż oryginał. 

Strategie łagodzenia skutków

Istnieje kilka strategii, dzięki którym zachowasz swój branding podczas optymalizacji dla trybu jasnego i ciemnego. Wybierz tę, która najlepiej odpowiada możliwościom Twojego zespołu i potrzebom branding. 

Twórz projekty z myślą o trybie jasnym i ciemnym

Jeśli używasz edytora przeciągnij i upuść Klaviyo do wysyłania wiadomości e-mail, ta strategia jest najlepsza. Rozwijaj swoje szablony e-mailowe, pamiętając o tym, jakie zmiany zostaną wprowadzone na urządzeniach z trybem ciemnym: 

• Używaj logotypów 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 graficznych 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. 600px szerokości dla obrazów o pełnej szerokości).
  
• Używaj tekstu wszędzie tam, gdzie to możliwe, zamiast obrazów zawierających tekst. Pozwala to na pełną inwersję kolorów (plus, jest to lepsze dla dostępności).

Niestandardowy kod w wersji ciemnej i jasnej

Jeśli masz zespół programistów, który może od podstaw kodować wiadomości e-mail HTML, możesz zapewnić CSS, który wykrywa, czy przeglądarka korzysta z 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 masz większą kontrolę. 

Możesz użyć @media (prefers-color-scheme: dark) i [dane-ogsc], aby kierować reklamy na użytkowników trybu ciemnego w kodzie wiadomości e-mail. Dowiedz się więcej o tym , którzy klienci poczty e-mail pomagają tym znacznikom i jakiego kodu używać we własnych projektach.

Używaj wiadomości e-mail zawierających tylko obrazy

Z wielu powodów nie zalecamy korzystania z wiadomości e-mail zawierających wyłącznie obrazy: 

• Bez tekstu alternatywnego Twoja wiadomość e-mail może wyglądać podejrzanie w skrzynkach odbiorczych i wylądować w folderze spamu. 
• Wiadomości e-mail zawierające wyłącznie obrazy nie są najlepszą praktyką w zakresie dostępności, ponieważ są trudne do odczytania dla wielu osób i czytników ekranu.
• Korzystanie z wiadomości e-mail zawierających tylko obrazy w celu wymuszenia wyglądu w trybie podświetlenia jest obejściem preferencji Twoich subskrybentów.

Jednak wiele marek stosuje tę strategię, więc warto o niej wspomnieć. Wiadomości e-mail zawierające tylko obrazy nie opierają się na HTML w zakresie 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ć wiadomości e-mail, które zasadniczo są zgodne z oryginalnym projektem. 

Dodatkowe źródła

• Przewodnik po edytorze szablonów e-mailowych 
• Dostępność w wiadomościach e-mail i formularzach - najlepsze praktyki 
• Szkolenie: Rozpocznij projektowanie wiadomości e-mail