Najlepsze praktyki projektowania poczty e-mail w trybie ciemnym
Czego się dowiesz?
Dowiedz się więcej o trybie ciemnym — ustawieniu, które użytkownicy mogą włączyć na swoim urządzeniu lub w aplikacji poczty e-mail, aby przyciemnić ekran. To ustawienie wpływa na sposób wyświetlania wiadomości e-mail. Klaviyo nie ma bezpośredniej kontroli nad tym, jak poszczególne skrzynki odbiorcze stosują tryb ciemny.
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.
Aplikacje i urządzenia do obsługi poczty e-mail, które oferują tryb ciemny
Szczegóły zmian w trybie ciemnym różnią się w zależności od aplikacji e-mail, urządzenia i systemu operacyjnego. Litmus udostępnia materiał na temat klientów pocztowych, które oferują tryb ciemny, i tego, jak 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, takie jak Apple Mail na komputerze, pozostawiają kolory w w pełni zaprojektowanych e-mailach HTML bez zmian, chyba że dodasz metatagi trybu ciemnego. E-maile w formacie tylko tekstowym też mogą zmieniać się w trybie ciemnym. Gdy treść e-maila pozostaje taka sama, kolor zmienia tylko otoczenie skrzynki odbiorczej.
Odwrócenie kolorów
Inne skrzynki odbiorcze, takie jak Outlook.com, częściowo odwracają kolory. Oznacza to, że niektóre jaśniejsze kolory są zastępowane ciemniejszymi odcieniami, a niektóre ciemniejsze kolory są zastępowane jaśniejszymi (np. ciemny tekst, który wcześniej był na jasnym tle). W efekcie końcowym powstaje e-mail, który jest wyraźnie ciemniejszy niż oryginał.
Niektóre skrzynki odbiorcze stosują pełne odwrócenie kolorów, zmieniając zarówno jasne, jak i ciemne tła. Na przykład Outlook 2021 dla systemu Windows może zmienić ciemne tło na jasne.
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ę.
Każda skrzynka odbiorcza, urządzenie i system operacyjny są inne, dlatego podczas projektowania wersji wiadomości e-mail w trybie ciemnym i jasnym trzeba wziąć pod uwagę bardzo zróżnicowane grono odbiorców.
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.
Unikaj e-maili składających się wyłącznie z obrazów
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.
Wiele marek korzysta z e-maili zawierających wyłącznie obrazy, ponieważ pliki graficzne zachowują kolory i czcionki wbudowane w obraz. Jednak e-maile zawierające wyłącznie obrazy nadal opierają się na HTML-u w zakresie układu, odstępów i otaczających te elementy teł. Skrzynka odbiorcza może zmienić te otaczające kolory w trybie ciemnym, więc takie podejście nie gwarantuje, że cały e-mail będzie pasować do Twojego oryginalnego projektu.
Przetestuj swój e-mail w trybie jasnym i ciemnym
Przed wysłaniem sprawdź, czy Twoje logo, tekst i linki są czytelne w obu trybach. Testowanie skrzynki odbiorczej jest dostępne dla płatnych kont Klaviyo i obejmuje 100 testów na użytkownika miesięcznie. Każdy podgląd skrzynki odbiorczej, który wygenerujesz, liczy się jako jeden test.
- W edytorze e-maili typu „przeciągnij i upuść” kliknij Podgląd, a następnie wybierz Testowanie skrzynki odbiorczej.
- Wybierz profil do podglądu. W przypadku wiadomości e-mail, która korzysta z danych zdarzeń, wybierz odpowiednie zdarzenie, aby sprawdzić spersonalizowaną treść.
- W sekcji Wybierz testy skrzynki odbiorczej rozwiń Tryb ciemny i wybierz skrzynki odbiorcze używane przez Twoich subskrybentów. Wybierz wersje trybu jasnego do porównania i usuń wstępnie wybrane skrzynki odbiorcze, których nie potrzebujesz.
- Kliknij Uruchom test. Gdy podglądy będą gotowe, kliknij każdy kafelek, aby go sprawdzić.
- Kliknij Gotowe, aby wrócić do edytora. Wprowadź potrzebne zmiany w projekcie, a następnie uruchom nowe testy, aby sprawdzić zaktualizowaną wiadomość e-mail.
Dowiedz się więcej o korzystaniu z testów skrzynki odbiorczej. Możesz też wysłać testowego e-maila do skrzynek odbiorczych, do których masz dostęp, i porównać go w trybie jasnym i ciemnym.
Dodatkowe źródła
- Przewodnik po edytorze szablonów e-mailowych
Dowiesz się więcej o edytorze szablonów e-maili Klaviyo typu „przeciągnij i upuść”, w tym o tym, jak używać stylów szablonów i konfigurować każdy typ bloku.
- Ułatwienia dostępności w e-mailach i formularzach – najlepsze praktyki
Dowiedz się, jak sprawić, by Twoje e-maile i formularze rejestracyjne były bardziej dostępne. Podczas projektowania e-maili i formularzy rejestracyjnych upewnij się, że Twoje projekty są dostępne dla wszystkich odbiorców.
- Get started with email design