Jak radzic sobie z trybem ciemnym w Gmailu dla licznikow odliczajacych

Spedzasz godziny projektujac idealna kampanie e-mailowa. W narzedziu podgladu wyglada bezblednie. Nastepnie wysylasz test do Gmaila, wlaczasz tryb ciemny i zaczynasz panikowac. Twoj licznik odliczajacy wyglada na rozmazany, ma dziwne biale kontury lub jest calkowicie zepsuly.

Nie jestes sam. To najczestszy problem wizualny, z jakim borykaja sie dzisiaj marketerzy e-mailowi.

Dlaczego tryb ciemny Gmaila psuje obrazy

Tryb ciemny Gmaila jest agresywny. W przeciwienstwie do innych klientow poczty, ktore po prostu zamieniaja czarny tekst na bialy, Gmail stosuje zlozony algorytm inwersji do calego kodu e-maila.

Wazne informacje:

• Gmail nie zapewnia niezawodnego sposobu wykrywania trybu ciemnego wewnatrz e-maila
• Gmail moze odwracac kolory tla lub stosowac filtry
• Obrazy sa traktowane jako statyczne zasoby i nie moga dostosowac sie do trybu ciemnego
• Nadawcy nie maja kontroli nad dokladnymi regulami renderowania Gmaila

Pomysl o trybie ciemnym Gmaila jako o srodowisku, ktorego nie mozna kontrolowac. Twoim celem nie jest idealna stylizacja. Twoim celem jest stabilna czytelnosc.

Glowny problem: przezroczystosc GIF

Wszystkie animowane liczniki odliczajace w e-mailach to obrazy GIF. Format GIF ma scisle ograniczenie techniczne dotyczace przezroczystosci: piksel musi byc w 100% przezroczysty lub w 100% nieprzezroczysty. Nie ma sredniej drogi.

Aby zakrzywione liczby wygladaly gladko na przezroczystym tle, projektanci uzywaja antyaliasingu. Dodaje on polprzezroczyste piksele do krawedzi, aby wtopic je w tlo.

Poniewaz GIF-y nie obsluguja polprzezroczystosci, te piksele sa "wypiekane" z okreslonym kolorem matte (zwykle bialym). Gdy Gmail przelacza tlo na ciemne, te "wypiekane" biale piksele pozostaja widoczne.

Efekt bialej "aureoli" widoczny w trybie ciemnym

Porownanie rozwiazan

Przetestowalismy tysiace kampanii, aby znalezc to, co naprawde dziala. Oto jak wypadaja rozne metody:

Jesli chcesz, aby Twoj licznik wygladal dokladnie tak samo w trybie jasnym i ciemnym, to jest standardowe podejscie w branzy.

Musisz uzyc szablonu licznika zaprojektowanego bez antyaliasingu. Te projekty uzywaja litych ksztaltow lub stylow "pixel art", gdzie kazdy piksel jest w pelni nieprzezroczysty. Poniewaz nie ma polprzezroczystych pikseli na krawedziach, Gmail nie ma czego znieksztalcac.

Dlaczego to jest lepsze:

• Calkowicie eliminuje efekt "aureoli"
• Pozwala na prawdziwa przezroczystosc
• Dziala w kazdym kliencie poczty, nie tylko w Gmailu
• Licznik wyglada tak samo w trybie jasnym i ciemnym

Szablony pikselowe z rozwiazania 1 dzialaja swietnie, ale maja specyficzna blokowa estetyka. Jesli wolisz inny design licznika, dodanie kontrastowego konturu (obrysu) wokol liczb moze pomoc zmniejszyc efekt aureoli w niektorych szablonach.

Gdy Gmail odwraca kolory w trybie ciemnym, kontur moze zapewnic wizualny bufor, ktory maskuje efekt "aureoli". Na przyklad, jesli Twoje liczby sa ciemne z jasnym obrysem, inwersja moze zachowac czytelnosc liczb i sprawic, ze artefakty antyaliasingu beda mniej widoczne.

Jak to dziala:

• Obrys tworzy kontrastowa granice, ktora oddziela liczbe od tla
• Gdy Gmail odwraca kolory, obrys moze pomoc zachowac czytelnosc liczb
• Efekt "aureoli" moze byc czesciowo ukryty za konturem
• Wyniki roznia sie w zaleznosci od szablonu i kombinacji kolorow

Obrys tekstu pomaga zachowac czytelnosc na obu tlach

Jesli Twoj projekt wymaga konkretnej gladkiej czcionki, ktorej style "blokowe" nie moga zapewnic, nastepna najlepsza opcja to wylaczenie przezroczystosci.

Ustaw kolor tla licznika tak, aby pasowal do kontenera w Twoim e-mailu. Jesli tlo e-maila jest biale, ustaw tlo licznika na biale.

Mozesz:

• Uzyc ciemnoszarego lub jasnoszarego tla
• Dopasowac kolor tla do layoutu e-maila
• Zaprojektowac licznik jako samodzielny blok

Czasami absolutnie potrzebujesz przezroczystosci i gladkiej czcionki. W takim przypadku mozesz zminimalizowac szkody, wybierajac neutralny kolor matte.

Zamiast stosowac antyaliasing wzgledem bieli (ktora wyglada okropnie na ciemnym tle) lub czerni (ktora wyglada okropnie na jasnym tle), renderuj licznik wzgledem sredniej szarosci (np. #888888). Artefakty nadal beda istnialy, ale beda mniej razace dla oka w obu trybach.

Dodatkowe wskazowki, ktore pomagaja

• Zwieksz rozmiar licznika.
  Wieksze liczby sprawiaja, ze artefakty wizualne sa mniej widoczne.
• Wlacz Retina (wysoka rozdzielczosc).
  Wyzsza gestosc pikseli poprawia jakosc krawedzi.
• Zawsze wstaw ponownie kod osadzenia po wprowadzeniu zmian.
  Stary kod moze nadal odwolywac sie do poprzednich ustawien.
• Testuj na Gmail Web, Gmail iOS i Gmail Android.
  Renderowanie moze sie nieznacznie roznic na roznych platformach.

Lista kontrolna: Co robic, a czego unikac

Czego oczekiwac w rzeczywistosci

Nawet przy wszystkich srodkach ostroznosci:

• Tryb ciemny Gmaila moze nadal nieznacznie zmienic wyglad
• Male roznice miedzy uzytkownikami sa normalne
• Zaden serwis e-mailowy nie moze w pelni kontrolowac renderowania Gmaila

Celem nie jest perfekcja na kazdym zrzucie ekranu. Celem jest czytelnosc, spojnosc i projekt, ktory pozostaje akceptowalny zarowno w trybie jasnym, jak i ciemnym.

Czesto zadawane pytania

Czy moge wykryc tryb ciemny Gmaila w e-mailu?

Nie w sposob niezawodny. Gmail nie zapewnia stabilnego sygnalu, ktory pozwolilby e-mailowi przelaczac obrazy w zaleznosci od trybu ciemnego. Istnieja pewne obejscia z zapytaniami mediow CSS, ale sa niespojne i nie sa zalecane do uzycia produkcyjnego.

Czy uzycie PNG zamiast GIF rozwiaze ten problem?

Sam licznik jest animowany, wiec powszechnie uzywa sie GIF. PNG obsluguje przezroczystosc alfa, ale animowane PNG (APNG) maja slabe wsparcie w klientach poczty. Podstawowy problem pozostaje taki sam: Gmail moze zmienic tlo, podczas gdy Twoj obraz pozostaje statyczny.

Dlaczego licznik wyglada dobrze w Apple Mail, ale nie w Gmailu?

Rozni klienci poczty obsluguja tryb ciemny w rozny sposob. Gmail jest bardziej agresywny w zmienianiu kolorow i stosowaniu filtrow. Apple Mail ma tendencje do czestszego zachowywania oryginalnych kolorow. Dlatego Gmail jest zazwyczaj miejscem, gdzie artefakty pojawiaja sie jako pierwsze.

Jaka jest najbezpieczniejsza konfiguracja?

Szablon z ostrymi krawedziami (bez antyaliasingu) lub licznik ze stalym tlem. Te dwie opcje unikaja klasycznego problemu aureoli w wiekszosci przypadkow. Dodanie konturu wokol liczb moze rowniez pomoc zmniejszyc artefakty w niektorych szablonach.

Ostateczne rekomendacje

Traktuj tryb ciemny Gmaila jako ograniczenie, wokol ktorego projektujesz, a nie cos, co mozesz w pelni kontrolowac.

• Wybieraj szablony z litymi ksztaltami i ostrymi krawedziami.
  Te szablony nie polegaja na antyaliasingu, wiec pozostaja stabilne w obu trybach.
• Sprobuj konturu wokol liczb, jesli wolisz inne style szablonow.
  Obrys moze pomoc zmniejszyc efekt "aureoli" w niektorych szablonach.
• Uzywaj przezroczystosci tylko na prostym, jednolitym tle.
  Jesli tlo e-maila zmienia sie w trybie ciemnym, przezroczyste liczniki moga ujawnic artefakty krawedzi.
• Preferuj neutralne kolory, jesli potrzebujesz efektu "wtapiania".
  Tla w srednich tonach zmniejszaja kontrast i sprawiaja, ze kontury sa mniej widoczne.
• Zwieksz rozmiar i wlacz Retina.
  Wyzsza gestosc pikseli poprawia czytelnosc i ukrywa drobne problemy z krawedziami.
• Testuj w trybie ciemnym Gmaila przed wyslaniem.
  Szybki podglad chroni przed niespodziankami po uruchomieniu kampanii.