Jak poprawic jakosc licznika odliczajacego w e-mailach
Chcesz jednego: licznika odliczajacego, ktory wyglada ostro w prawdziwych e-mailach, nie tylko w edytorze. Jesli Twoj licznik wyglada na rozmazany, pikselowany, ma aureole, kropki lub dziwne krawedzie, prawie zawsze jest to problem z ustawieniami. Ponizsze poprawki sa szybkie i przewidywalne, gdy wiesz, czego szukac.
Zacznij tutaj (30 sekund)
1) Zwieksz rozmiar
Uzyj L lub XL. Jesli Responsywnosc jest WLACZONA, wybierz jeszcze wiekszy.
2) Wlacz Retina Ready
Ostrzejszy na ekranach o wysokiej rozdzielczosci. Nastepnie zwieksz rozmiar ponownie jesli potrzeba.
3) Skopiuj ponownie kod osadzenia
Stary kod zachowuje stare CSS. Zastap go w e-mailu.
Wiekszosc przypadkow "rozmazanego licznika" to po prostu maly GIF rozciagany przez uklad e-maila. Zrob zrodlo wieksze, a licznik stanie sie ostry.
Typowe problemy z jakoscia w skrocie
| Co widzisz | Najbardziej prawdopodobna przyczyna | Szybka poprawka |
|---|---|---|
| Rozmazany lub pikselowany | Maly rozmiar bazowy i rozciaganie Responsywnoscia | Uzyj L lub XL, wlacz Retina, skopiuj kod ponownie |
| Miękki na ekranach Retina | Obraz 1x na wyswietlaczu 2x | Wlacz Retina Ready i zwieksz rozmiar |
| Aureola wokol liczb | Zly kolor matte tla z przezroczystoscia | Uzyj stalego tla lub dopasuj kolor matte |
| Kropki, brudne krawedzie | Niski kontrast lub kwantyzacja kolorow w GIF | Zwieksz kontrast, unikaj prawie identycznych kolorow |
| Dziury wewnatrz cyfr | Kolor tekstu laczy sie z przezroczysta paleta | Unikaj przezroczystosci lub zmien kolor tekstu |
| Zle wyglada w trybie ciemnym Gmaila | Gmail nieprzewidywalnie odwraca kolory | Uzyj konfiguracji trybu ciemnego |
Szybka lista kontrolna
- 1Uzyj L lub XL (lub zwieksz Custom). Male obrazy zrodlowe nie beda wygladac ostro po rozciagnieciu.
- 2Wlacz Retina Ready dla ostrosci 2x, nastepnie zwieksz rozmiar, aby zachowac ta sama szerokosc wizualna.
- 3Dopasuj kolor tla licznika do tla e-maila. Uzyj stalego tla dla najlepszych wynikow.
- 4Jesli Responsywnosc jest WLACZONA, zaloz, ze obraz bedzie rozciagany. Zacznij od wiekszego rozmiaru, aby zapobiec rozmyciu.
- 5Po kazdej zmianie skopiuj ponownie kod osadzenia. Stary kod nadal uzywa starych ustawien.
Rozmiar licznika zbyt maly
Wiekszosc rozmazanych licznikow to po prostu rozciagniete GIF-y
Licznik odliczajacy to obraz GIF. Jesli zostanie utworzony zbyt maly, a nastepnie rozciagniety przez uklad e-maila, bedzie wygladal rozmazany lub pikselowany. Programy pocztowe nie skaluja obrazow elegancko. Rozciagaja piksele.
Co zwykle sie dzieje:
- Tworzysz licznik w rozmiarze S lub M
- Wlaczasz Responsywnosc w ustawieniach osadzenia
- Kontener e-maila jest szerszy niz GIF
- Licznik rozciaga sie, aby wypelnic szerokosc
- Rezultat: rozmycie
Poprawka, ktora dziala za kazdym razem:
- Przelacz sie na rozmiar L lub XL
- Jesli potrzebujesz Responsywnosci, wybierz jeszcze wiekszy (XL lub wysoki Custom)
- Skopiuj ponownie kod osadzenia
Opcje rozmiaru:
Rekomendacja: L lub XL
Jesli Responsywnosc jest WLACZONA, celuj w XL lub wysoki Custom.
Prosty model mentalny
Jesli Twoj e-mail wyswietla licznik o szerokosci 500px, Twoj GIF powinien byc generowany w tym rozmiarze (lub wiekszym z Retina). GIF 250px rozciagniety do 500px bedzie wygladal miekko.
Poprawka: Zwieksz rozmiar do L lub XL (lub wyzszy Custom). Nastepnie skopiuj ponownie kod osadzenia.
Retina Ready nie wlaczone
Ostrzejszy na MacBookach, iPhone'ach i wyswietlaczach o wysokiej rozdzielczosci
Ekrany o wysokiej rozdzielczosci wyswietlaja wiecej pikseli w tej samej fizycznej przestrzeni. Standardowy obraz 1x moze wygladac troche miekko. Retina Ready naprawia to, wyswietlajac GIF w polowie jego wygenerowanego rozmiaru.
Jak dziala Retina Ready:
- GIF jest generowany wiekszy
- Kod osadzenia wymusza mniejsza szerokosc wyswietlania
- Krawedzie wygladaja czysciej, poniewaz jest wiecej pikseli na ksztalt
Po wlaczeniu kod osadzenia zawiera CSS taki jak: style="width:250px!important;"
Jesli Twoj obraz licznika ma 500px, bedzie wyswietlany w 250px. To oczekiwane. Zwieksz rozmiar licznika, aby zachowac ta sama szerokosc wizualna.
Czesty blad
Ludzie wlaczaja Retina Ready, widza, ze licznik staje sie mniejszy i rozciagaja go recznie. Lepsze podejscie: zwieksz rozmiar w ustawieniach, nastepnie skopiuj kod ponownie.
Poprawka: Wlacz Retina Ready, zwieksz rozmiar, aby skompensowac, nastepnie skopiuj ponownie kod osadzenia.
Zly kolor tla z przezroczystoscia
Najczestsza przyczyna postrzępionych krawedzi na ciemnych tlach
Ten problem jest spowodowany sposobem, w jaki GIF obsluguje przezroczystosc. GIF nie obsluguje prawdziwej (alfa) przezroczystosci. Aby cyfry wygladaly gladko, licznik uzywa antyaliasingu, ktory miesza piksele krawedzi z kolorem tla. Ten kolor tla jest efektywnie "wypalony" w GIF.
Co sie dzieje w prawdziwych e-mailach:
W przykladzie po prawej licznik jest umieszczony na czarnej sekcji e-maila. Uzytkownik po prostu chcial bialych cyfr na ciemnym tle. Ale kolor tla licznika zostal pozostawiony jako domyslny jasnoszary.
Licznik uzywa antyaliasingu do wygladzania krawedzi cyfr. Te piksele krawedzi zostaly zmieszane z szarym, nie z czarnym. Gdy GIF jest wyswietlany na czarnym, te szare piksele krawedzi staja sie widoczne. Cyfry wygladaja szorstko, z zaszumionymi krawedziami i artefaktami.
Gdyby kolor tla byl ustawiony na czarny, piksele krawedzi zmieszalyby sie z czarnym i stalyby sie niewidoczne. Cyfry wygladałyby czysto i gladko.
Rozwiazania:
Najlepsze: uzyj stalego tla
Jesli licznik znajduje sie na stalym kolorze (czarna sekcja, biala sekcja, kolor marki), ustaw tlo licznika na dokladnie ten sam kolor. Dzieki temu antyaliasing miesza sie prawidlowo i usuwa szorstkie krawedzie.
Jesli potrzebujesz przezroczystosci: dopasuj kolor matte
Jesli zachowujesz przezroczystosc, nadal ustaw kolor tla na ten sam kolor za licznikiem. To jest kolor uzywany do wygladzania, wiec musi pasowac do prawdziwego tla e-maila.
Szybkie sprawdzenie: Jesli Twoj licznik ma byc na ciemnej sekcji, ustaw kolor tla licznika na ten sam ciemny kolor, nie domyslny szary.
Rozciaganie w trybie responsywnym
Przydatne, ale moze potegowac problemy z jakoscia
Tryb responsywny dodaje style="width:100%!important;" wiec licznik wypelnia szerokosc e-maila. To swietne dla ukladow mobilnych, ale moze rozciagnac maly GIF i sprawic, ze bedzie wygladal rozmazany.
Kiedy Responsywnosc powoduje rozmycie:
- Maly rozmiar bazowy
- Szeroki kontener e-maila
- Licznik rozciaga sie poza swoj naturalny rozmiar pikseli
Jak bezpiecznie uzywac Responsywnosci:
- Zacznij od rozmiaru XL lub wysokiego Custom
- Wlacz Retina Ready, jesli chcesz maksymalnej ostrosci
- Jesli potrzebujesz stalego wygladu, wylacz Responsywnosc
Wskazowka: Jesli nie potrzebujesz pelnej szerokosci, wylacz Responsywnosc i kontroluj max-width recznie dla spojnych wynikow.
Kolory tekstu i tla zbyt podobne
Kropki, brudne krawedzie i czasem dziury wewnatrz cyfr
GIF uzywa ograniczonej palety kolorow. Jesli kolor tekstu jest bardzo zbliżony do tla, obraz moze stracic subtelne piksele krawedzi. Z przezroczystoscia moze to byc gorsze i moze nawet powodowac dziury wewnatrz liczb, gdy kolory zlewaja sie w te sama pozycje palety.
Jesli widzisz kropki
Nieznacznie zwieksz kontrast. Zrob tekst troche ciemniejszy lub jasniejszy.
Jesli krawedzie wygladaja brudno
Unikaj prawie identycznych kolorow. Stale tlo pomaga.
Jesli cyfry maja dziury
Wylacz przezroczystosc lub zmien kolor tekstu.
Zasada: Jesli ledwo widzisz tekst na tle w edytorze, GIF prawdopodobnie wyprodukuje artefakty w e-mailu.
Kod osadzenia nie zaktualizowany
Zaskakujaco czesty powod, dla ktorego poprawka "nie dziala"
Twoj kod osadzenia zawiera koncowe wartosci CSS (width, max-width, czasem reguly display). Jesli zmienisz ustawienia, ale nadal uzywasz starego kodu osadzenia, Twoj e-mail nadal bedzie renderowal stara wersje.
Poprawka: Skopiuj kod osadzenia ponownie po zmianach i zastap go w szablonie e-maila.
Problemy z trybem ciemnym Gmaila
Oddzielny problem z wlasnymi rozwiazaniami
Jesli Twoj licznik wyglada dobrze wszedzie z wyjatkiem Gmaila w trybie ciemnym, to nie jest problem z rozmiarem. Gmail moze odwracac kolory i zmieniac sposob wyswietlania e-maila. Uzyj konfiguracji specyficznej dla trybu ciemnego.
Mamy dedykowany przewodnik na ten temat
Tryb ciemny Gmaila to srodowisko, ktorego nadawcy e-maili nie moga w pelni kontrolowac. Nasz przewodnik wyjasnia, dlaczego to sie dzieje i jak zminimalizowac wplyw.
Czytaj: Jak radzic sobie z trybem ciemnym w GmailuKrok po kroku: Napraw rozmazany licznik
Otworz ustawienia licznika
Pracuj z prawdziwym licznikiem, nie ze starym szablonem e-maila
Zwieksz rozmiar bazowy
Uzyj L, XL lub wyzszego Custom. Jesli Responsywnosc jest WLACZONA, zacznij od wiekszego.
Ustaw tlo prawidlowo
Stale tlo jest najczystsze. Jesli przezroczyste, dopasuj kolor matte.
Wlacz Retina Ready
Nastepnie zwieksz rozmiar, jesli licznik stanie sie zbyt maly.
Skopiuj ponownie kod osadzenia
Zastap stary kod w e-mailu. Stary kod zachowuje stare CSS.
Wyslij testowy e-mail
Sprawdz na komputerze i telefonie przed wyslaniem do listy
Czesto zadawane pytania
Dlaczego moj licznik wyglada ostro w edytorze, ale rozmazany w e-mailu?
Edytor pokazuje GIF w jego natywnym rozmiarze. W e-mailu uklad moze rozciagac obraz (szczegolnie w trybie Responsywnym). Jesli GIF jest maly, rozciaganie go sprawia, ze jest rozmazany. Zwieksz rozmiar do L lub XL, nastepnie skopiuj ponownie kod osadzenia.
Czy potrzebuje Retina Ready?
Jesli zalezy Ci na ostrosci na MacBookach, iPhone'ach i nowoczesnych ekranach, tak. Retina Ready wyswietla GIF w polowie rozmiaru dla czystszego wygladu. Po wlaczeniu zwieksz rozmiar, aby zachowac ta sama szerokosc wizualna.
Czy powinienem uzyc przezroczystego czy stalego tla?
Stale tlo daje najczystszy wynik, gdy tlo e-maila jest spojne. Przezroczystosc jest przydatna, gdy licznik znajduje sie na wielu tlach, ale musisz dopasowac kolor matte tla, aby uniknac aureoli.
Dlaczego widze kropki, brudne krawedzie lub postrzępione piksele?
Zwykle oznacza to niski kontrast, zle tlo matte lub ograniczenia palety GIF. Nieznacznie zwieksz kontrast i unikaj prawie identycznych kolorow dla tekstu i tla. Stale tlo czesto naprawia to natychmiast.
Dlaczego widze dziury wewnatrz cyfr?
Z przezroczystoscia i ograniczona paleta GIF, kolory moga sie laczyc i czesci cyfry moga stac sie przezroczyste. Napraw to, wylaczajac przezroczystosc lub zmieniajac kolor tekstu na bardziej wyrazny odcien.
Zmienilem ustawienia, ale nic sie nie poprawilo. Dlaczego?
Prawdopodobnie nadal uzywasz starego kodu osadzenia. Skopiuj ponownie kod osadzenia i zastap go w szablonie e-maila.
Podsumowanie
Wiekszosc problemow z jakoscia licznika wynika z rozciagania malego GIF-a, uzywania przezroczystosci z niedopasowanym tlem matte lub uzywania prawie identycznych kolorow, ktore psuja antyaliasing w GIF. Dla najlepszych wynikow GIF: uzyj wiekszego rozmiaru (L lub XL), wlacz Retina Ready, preferuj stale tlo gdy to mozliwe, skopiuj ponownie kod osadzenia po zmianach i przetestuj w prawdziwym e-mailu.