Czym jest dark mode
Dark mode (po polsku tryb ciemny) to ustawienie wyświetlania, w którym urządzenie lub aplikacja używa ciemnego tła i jasnego tekstu zamiast standardowej jasnej kombinacji. Szczególnie popularny jest na urządzeniach mobilnych. Użytkownicy włączają go, aby oszczędzać baterię, odciążyć wzrok lub po prostu z powodów estetycznych.
W kontekście e-mailingu problem pojawia się w momencie, gdy klient poczty stosuje dark mode do przychodzących wiadomości. Efekt zależy od konkretnego klienta i różni się w Gmailu, Apple Mailu, Outlooku czy Samsung Mailu. Niektóre klienty jedynie odwracają kolory, inne zmieniają tylko część e-maila, a jeszcze inne nie ingerują w niego wcale.
Jak dark mode wpływa na e-maile
Każdy klient poczty podchodzi do dark mode inaczej.
Ogólnie można wyróżnić trzy podejścia:
- Brak zmian – klient nie stosuje dark mode do e-maili i wyświetla je dokładnie tak, jak zostały zaprojektowane.
- Częściowa zmiana – klient zmienia kolor tła, ale zachowuje kolory tekstu i obrazów.
- Pełna inwersja – klient odwraca wszystkie kolory, w tym tekstu, przycisków i grafiki.
To właśnie pełna lub częściowa inwersja może spowodować nieczytelny tekst (na przykład jasny tekst na jasnym tle), zepsutą grafikę albo niewidoczne logo.
Dlaczego warto pamiętać o dark mode przy tworzeniu szablonów
Odsetek użytkowników korzystających z dark mode od dłuższego czasu rośnie. Według dostępnych danych aktywnie używa go ponad jedna trzecia użytkowników urządzeń mobilnych. Ignorowanie go przy projektowaniu szablonów e-maili oznacza ryzyko, że znacząca część odbiorców otrzyma e-mail z popsutą grafiką. A przecież podstawowe środki ostrożności nie są skomplikowane i wyraźnie zmniejszają ryzyko problemów.
Jak projektować szablony z myślą o dark mode
Kilka sprawdzonych zasad, które zmniejszają ryzyko problemów:
- Loga i ikony z przezroczystym tłem Pliki PNG z przezroczystym tłem przy inwersji wyświetlają się z ciemnym obrysem lub znikają całkowicie, jeśli są to jasne barwy na jasnym tle. Rozwiązaniem jest umieszczenie logo na kolorowym lub ciemnym bloku tła albo przygotowanie wariantu logo dopasowanego do ciemnego tła.
- Jawne definiowanie kolorów tekstu Jeśli kolor tekstu nie jest jawnie zdefiniowany w szablonie HTML, klient poczty może go zmienić według własnego uznania. Zawsze ustawiaj kolor tekstu bezpośrednio w kodzie szablonu.
- Przyciski o stałych kolorach Przyciski z przezroczystym tłem lub kolorem zdefiniowanym wyłącznie przez klasę CSS są podatne na inwersję. Używaj stylów inline z jawnie określonym kolorem tła i tekstu.
- Testowanie przed wysyłką Dark mode zachowuje się różnie w różnych klientach. To, co działa w Gmailu, nie musi działać w Outlooku. Testowanie w rzeczywistych środowiskach lub w narzędziach do podglądu e-maili jest niezbędne.
Dark mode a szablony e-maili w Leadhubie
W Leadhubie tworzysz szablony e-maili w edytorze, w którym pracujesz bezpośrednio z kolorami, blokami i stylami. Aby zapewnić maksymalną zgodność z dark mode, zalecamy, by zawsze jawnie definiować kolory tekstu i tła oraz umieszczać loga na kolorowym bloku.
