Jak radzić sobie z trybem ciemnym w Gmailu dla liczników odliczających

Spędzasz godziny, projektując idealną kampanię e-mailową. W narzędziu podglądu wygląda bezbłędnie. Następnie wysyłasz test do Gmaila, włączasz tryb ciemny i zaczynasz panikować. Twój licznik odliczający wygląda na rozmazany, ma dziwne białe kontury lub jest całkowicie zepsuty.

Nie jesteś sam. To najczęstszy problem wizualny, z jakim borykają się dzisiaj marketerzy e-mailowi.

Dlaczego tryb ciemny Gmaila psuje obrazy

Tryb ciemny Gmaila jest agresywny. W przeciwieństwie do innych klientów poczty, które po prostu zamieniają czarny tekst na biały, Gmail stosuje złożony algorytm inwersji do całego kodu e-maila.

Ważne informacje:

• Gmail nie zapewnia niezawodnego sposobu wykrywania trybu ciemnego wewnątrz e-maila
• Gmail może odwracać kolory tła lub stosować filtry
• Obrazy są traktowane jako statyczne zasoby i nie mogą dostosować się do trybu ciemnego
• Nadawcy nie mają kontroli nad dokładnymi regułami renderowania Gmaila

Pomyśl o trybie ciemnym Gmaila jako o środowisku, którego nie można kontrolować. Twoim celem nie jest idealna stylizacja. Twoim celem jest stabilna czytelność.

Główny problem: przezroczystość GIF

Wszystkie animowane liczniki odliczające w e-mailach to obrazy GIF. Format GIF ma ścisłe ograniczenie techniczne dotyczące przezroczystości: piksel musi być w 100% przezroczysty lub w 100% nieprzezroczysty. Nie ma średniej drogi.

Aby zakrzywione liczby wyglądały gładko na przezroczystym tle, projektanci używają antyaliasingu. Dodaje on półprzezroczyste piksele do krawędzi, aby wtopić je w tło.

Ponieważ GIF-y nie obsługują półprzezroczystości, te piksele są "wypiekane" z określonym kolorem matte (zwykle białym). Gdy Gmail przełącza tło na ciemne, te "wypiekane" białe piksele pozostają widoczne.

Efekt białej "aureoli" widoczny w trybie ciemnym

Porównanie rozwiązań

Przetestowaliśmy tysiące kampanii, aby znaleźć to, co naprawdę działa. Oto jak wypadają różne metody:

Jeśli chcesz, aby Twój licznik wyglądał dokładnie tak samo w trybie jasnym i ciemnym, to jest standardowe podejście w branży.

Musisz użyć szablonu licznika zaprojektowanego bez antyaliasingu. Te projekty używają litych kształtów lub stylów "pixel art", gdzie każdy piksel jest w pełni nieprzezroczysty. Ponieważ nie ma półprzezroczystych pikseli na krawędziach, Gmail nie ma czego zniekształcać.

Dlaczego to jest lepsze:

• Całkowicie eliminuje efekt "aureoli"
• Pozwala na prawdziwą przezroczystość
• Działa w każdym kliencie poczty, nie tylko w Gmailu
• Licznik wygląda tak samo w trybie jasnym i ciemnym

Szablony pikselowe z rozwiązania 1 działają świetnie, ale mają specyficzną blokową estetykę. Jeśli wolisz inny design licznika, dodanie kontrastowego konturu (obrysu) wokół liczb może pomóc zmniejszyć efekt aureoli w niektórych szablonach.

Gdy Gmail odwraca kolory w trybie ciemnym, kontur może zapewnić wizualny bufor, który maskuje efekt "aureoli". Na przykład, jeśli Twoje liczby są ciemne z jasnym obrysem, inwersja może zachować czytelność liczb i sprawić, że artefakty antyaliasingu będą mniej widoczne.

Jak to działa:

• Obrys tworzy kontrastową granicę, która oddziela liczbę od tła
• Gdy Gmail odwraca kolory, obrys może pomóc zachować czytelność liczb
• Efekt "aureoli" może być częściowo ukryty za konturem
• Wyniki różnią się w zależności od szablonu i kombinacji kolorów

Obrys tekstu pomaga zachować czytelność na obu tłach

Jeśli Twój projekt wymaga konkretnej gładkiej czcionki, której style "blokowe" nie mogą zapewnić, następna najlepsza opcja to wyłączenie przezroczystości.

Ustaw kolor tła licznika tak, aby pasował do kontenera w Twoim e-mailu. Jeśli tło e-maila jest białe, ustaw tło licznika na białe.

Możesz:

• Użyć ciemnoszarego lub jasnoszarego tła
• Dopasować kolor tła do layoutu e-maila
• Zaprojektować licznik jako samodzielny blok

Czasami absolutnie potrzebujesz przezroczystości i gładkiej czcionki. W takim przypadku możesz zminimalizować szkody, wybierając neutralny kolor matte.

Zamiast stosować antyaliasing względem bieli (która wygląda okropnie na ciemnym tle) lub czerni (która wygląda okropnie na jasnym tle), renderuj licznik względem średniej szarości (np. #888888). Artefakty nadal będą istniały, ale będą mniej rażące dla oka w obu trybach.

Dodatkowe wskazówki, które pomagają

• Zwiększ rozmiar licznika.
  Większe liczby sprawiają, że artefakty wizualne są mniej widoczne.
• Włącz Retina (wysoka rozdzielczość).
  Wyższa gęstość pikseli poprawia jakość krawędzi.
• Zawsze wstaw ponownie kod osadzenia po wprowadzeniu zmian.
  Stary kod może nadal odwoływać się do poprzednich ustawień.
• Testuj na Gmail Web, Gmail iOS i Gmail Android.
  Renderowanie może się nieznacznie różnić na różnych platformach.

Lista kontrolna: Co robić, a czego unikać

Czego oczekiwać w rzeczywistości

Nawet przy wszystkich środkach ostrożności:

• Tryb ciemny Gmaila może nadal nieznacznie zmienić wygląd
• Małe różnice między użytkownikami są normalne
• Żaden serwis e-mailowy nie może w pełni kontrolować renderowania Gmaila

Celem nie jest perfekcja na każdym zrzucie ekranu. Celem jest czytelność, spójność i projekt, który pozostaje akceptowalny zarówno w trybie jasnym, jak i ciemnym.

Często zadawane pytania

Czy mogę wykryć tryb ciemny Gmaila w e-mailu?

Nie w sposób niezawodny. Gmail nie zapewnia stabilnego sygnału, który pozwoliłby e-mailowi przełączać obrazy w zależności od trybu ciemnego. Istnieją pewne obejścia z zapytaniami mediów CSS, ale są niespójne i nie są zalecane do użycia produkcyjnego.

Czy użycie PNG zamiast GIF rozwiąże ten problem?

Sam licznik jest animowany, więc powszechnie używa się GIF. PNG obsługuje przezroczystość alfa, ale animowane PNG (APNG) mają słabe wsparcie w klientach poczty. Podstawowy problem pozostaje taki sam: Gmail może zmienić tło, podczas gdy Twój obraz pozostaje statyczny.

Dlaczego licznik wygląda dobrze w Apple Mail, ale nie w Gmailu?

Różni klienci poczty obsługują tryb ciemny w różny sposób. Gmail jest bardziej agresywny w zmienianiu kolorów i stosowaniu filtrów. Apple Mail ma tendencję do częstszego zachowywania oryginalnych kolorów. Dlatego Gmail jest zazwyczaj miejscem, gdzie artefakty pojawiają się jako pierwsze.

Jaka jest najbezpieczniejsza konfiguracja?

Szablon z ostrymi krawędziami (bez antyaliasingu) lub licznik ze stałym tłem. Te dwie opcje unikają klasycznego problemu aureoli w większości przypadków. Dodanie konturu wokół liczb może również pomóc zmniejszyć artefakty w niektórych szablonach.

Ostateczne rekomendacje

Traktuj tryb ciemny Gmaila jako ograniczenie, wokół którego projektujesz, a nie coś, co możesz w pełni kontrolować.

• Wybieraj szablony z litymi kształtami i ostrymi krawędziami.
  Te szablony nie polegają na antyaliasingu, więc pozostają stabilne w obu trybach.
• Spróbuj konturu wokół liczb, jeśli wolisz inne style szablonów.
  Obrys może pomóc zmniejszyć efekt "aureoli" w niektórych szablonach.
• Używaj przezroczystości tylko na prostym, jednolitym tle.
  Jeśli tło e-maila zmienia się w trybie ciemnym, przezroczyste liczniki mogą ujawnić artefakty krawędzi.
• Preferuj neutralne kolory, jeśli potrzebujesz efektu "wtapiania".
  Tła w średnich tonach zmniejszają kontrast i sprawiają, że kontury są mniej widoczne.
• Zwiększ rozmiar i włącz Retina.
  Wyższa gęstość pikseli poprawia czytelność i ukrywa drobne problemy z krawędziami.
• Testuj w trybie ciemnym Gmaila przed wysłaniem.
  Szybki podgląd chroni przed niespodziankami po uruchomieniu kampanii.