W wielu klientach poczty elektronicznej ustawiony jest tryb ciemny, co może prowadzić do niespójności w wyglądzie Twoich emaili marketingowych w klientach z włączonym trybem jasnym.
Aby sprawdzić, jak będzie wyglądał Twój e-mail, gdy kontakt otworzy go w przeglądarce lub kliencie z włączonym trybem ciemnym:
Gdy podglądasz swoją wiadomość e-mail w różnych klientach trybu ciemnego, pamiętaj, że każdy z nich może wyświetlać ją inaczej. Na przykład, jeśli Twój kontakt otworzy Twoją wiadomość za pomocą Apple Mail, będzie ona wyglądała dokładnie tak samo, niezależnie od tego, czy włączył tryb ciemny, czy nie. Jeśli natomiast Twój rozmówca włączy tryb ciemny w takich aplikacjach jak Gmail czy Outlook w systemie Windows, możesz zauważyć bardziej drastyczne różnice w stylizacji wiadomości, takie jak odwrócone kolory tła.
Aby upewnić się, że stylizacja wiadomości e-mail jest spójna pomiędzy różnymi klientami, zapoznaj się z poniższymi wskazówkami.
Konwertuj swoje obrazy na pliki PNG przed ich załadowaniem i dodaniem do wiadomości e-mail, co pomoże Ci upewnić się, że będą one dobrze widoczne w klientach poczty, które automatycznie odwracają kolor tła wiadomości w trybie ciemnym. Jeśli na obrazku znajduje się tekst, np. logo, możesz dodać półprzezroczysty kontur wokół tekstu, aby go wyróżnić.
Zaprojektowanie treści emaila w taki sposób, aby była ona dostępna jest ważne niezależnie od tego, jakiego klienta poczty używa Twój odbiorca. Przestrzeganie standardów dostępności, takich jak sprawdzanie kontrastu kolorystycznego tekstu, pomoże w poprawnym renderowaniu wiadomości w trybie ciemnym. Dowiedz się więcej o kolorach dostępnych w sieci na blogu HubSpot.
Kilka klientów poczty e-mail, w tym Apple Mail i Outlook.com, oferuje ograniczone wsparcie dla wykrywania i dodawania niestandardowej stylizacji za pomocą zapytania o media. Jeśli korzystasz ze zaktualizowanego klasycznego edytora poczty e-mail i masz zasoby programistyczne do wprowadzania zmian CSS w swoich wiadomościach, możesz dodać zapytanie o media za pomocą funkcji prefers-color-scheme
media, aby skonfigurować, jak obrazy i tekst będą wyglądać w trybie ciemnym i jasnym.