Jak poprawić jakość licznika odliczającego w e-mailach
Chcesz jednego: licznika odliczającego, który wygląda ostro w prawdziwych e-mailach, nie tylko w edytorze. Jeśli Twój licznik wygląda na rozmazany, pikselowany, ma aureolę, kropki lub dziwne krawędzie, prawie zawsze jest to problem z ustawieniami. Poniższe poprawki są szybkie i przewidywalne, gdy wiesz, czego szukać.
Zacznij tutaj (30 sekund)
1) Zwiększ rozmiar
Użyj L lub XL. Jeśli Responsywność jest WŁĄCZONA, wybierz jeszcze większy.
2) Włącz Retina Ready
Ostrzejszy na ekranach o wysokiej rozdzielczości. Następnie zwiększ rozmiar ponownie jeśli potrzeba.
3) Skopiuj ponownie kod osadzenia
Stary kod zachowuje stare CSS. Zastąp go w e-mailu.
Większość przypadków "rozmazanego licznika" to po prostu mały GIF rozciągany przez układ e-maila. Zrób źródło większe, a licznik stanie się ostry.
Typowe problemy z jakością w skrócie
| Co widzisz | Najbardziej prawdopodobna przyczyna | Szybka poprawka |
|---|---|---|
| Rozmazany lub pikselowany | Mały rozmiar bazowy i rozciąganie Responsywnością | Użyj L lub XL, włącz Retina, skopiuj kod ponownie |
| Miękki na ekranach Retina | Obraz 1x na wyświetlaczu 2x | Włącz Retina Ready i zwiększ rozmiar |
| Aureola wokół liczb | Zły kolor matte tła z przezroczystością | Użyj stałego tła lub dopasuj kolor matte |
| Kropki, brudne krawędzie | Niski kontrast lub kwantyzacja kolorów w GIF | Zwiększ kontrast, unikaj prawie identycznych kolorów |
| Dziury wewnątrz cyfr | Kolor tekstu łączy się z przezroczystą paletą | Unikaj przezroczystości lub zmień kolor tekstu |
| Źle wygląda w trybie ciemnym Gmaila | Gmail nieprzewidywalnie odwraca kolory | Użyj konfiguracji trybu ciemnego |
Szybka lista kontrolna
- 1Użyj L lub XL (lub zwiększ Custom). Małe obrazy źródłowe nie będą wyglądać ostro po rozciągnięciu.
- 2Włącz Retina Ready dla ostrości 2x, następnie zwiększ rozmiar, aby zachować tę samą szerokość wizualną.
- 3Dopasuj kolor tła licznika do tła e-maila. Użyj stałego tła dla najlepszych wyników.
- 4Jeśli Responsywność jest WŁĄCZONA, załóż, że obraz będzie rozciągany. Zacznij od większego rozmiaru, aby zapobiec rozmyciu.
- 5Po każdej zmianie skopiuj ponownie kod osadzenia. Stary kod nadal używa starych ustawień.
Rozmiar licznika zbyt mały
Większość rozmazanych liczników to po prostu rozciągnięte GIF-y
Licznik odliczający to obraz GIF. Jeśli zostanie utworzony zbyt mały, a następnie rozciągnięty przez układ e-maila, będzie wyglądał rozmazany lub pikselowany. Programy pocztowe nie skalują obrazów elegancko. Rozciągają piksele.
Co zwykle się dzieje:
- Tworzysz licznik w rozmiarze S lub M
- Włączasz Responsywność w ustawieniach osadzenia
- Kontener e-maila jest szerszy niż GIF
- Licznik rozciąga się, aby wypełnić szerokość
- Rezultat: rozmycie
Poprawka, która działa za każdym razem:
- Przełącz się na rozmiar L lub XL
- Jeśli potrzebujesz Responsywności, wybierz jeszcze większy (XL lub wysoki Custom)
- Skopiuj ponownie kod osadzenia
Opcje rozmiaru:
Rekomendacja: L lub XL
Jeśli Responsywność jest WŁĄCZONA, celuj w XL lub wysoki Custom.
Prosty model mentalny
Jeśli Twój e-mail wyświetla licznik o szerokości 500px, Twój GIF powinien być generowany w tym rozmiarze (lub większym z Retina). GIF 250px rozciągnięty do 500px będzie wyglądał miękko.
Poprawka: Zwiększ rozmiar do L lub XL (lub wyższy Custom). Następnie skopiuj ponownie kod osadzenia.
Retina Ready nie jest włączone
Ostrzejszy na MacBookach, iPhone'ach i wyświetlaczach o wysokiej rozdzielczości
Ekrany o wysokiej rozdzielczości wyświetlają więcej pikseli w tej samej fizycznej przestrzeni. Standardowy obraz 1x może wyglądać trochę miękko. Retina Ready naprawia to, wyświetlając GIF w połowie jego wygenerowanego rozmiaru.
Jak działa Retina Ready:
- GIF jest generowany większy
- Kod osadzenia wymusza mniejszą szerokość wyświetlania
- Krawędzie wyglądają czyściej, ponieważ jest więcej pikseli na kształt
Po włączeniu kod osadzenia zawiera CSS taki jak: style="width:250px!important;"
Jeśli Twój obraz licznika ma 500px, będzie wyświetlany w 250px. To oczekiwane. Zwiększ rozmiar licznika, aby zachować tę samą szerokość wizualną.
Częsty błąd
Ludzie włączają Retina Ready, widzą, że licznik staje się mniejszy i rozciągają go ręcznie. Lepsze podejście: zwiększ rozmiar w ustawieniach, następnie skopiuj kod ponownie.
Poprawka: Włącz Retina Ready, zwiększ rozmiar, aby skompensować, następnie skopiuj ponownie kod osadzenia.
Zły kolor tła z przezroczystością
Najczęstsza przyczyna postrzępionych krawędzi na ciemnych tłach
Ten problem jest spowodowany sposobem, w jaki GIF obsługuje przezroczystość. GIF nie obsługuje prawdziwej (alfa) przezroczystości. Aby cyfry wyglądały gładko, licznik używa antyaliasingu, który miesza piksele krawędzi z kolorem tła. Ten kolor tła jest efektywnie "wypalony" w GIF.
Co się dzieje w prawdziwych e-mailach:
W przykładzie po prawej licznik jest umieszczony na czarnej sekcji e-maila. Użytkownik po prostu chciał białych cyfr na ciemnym tle. Ale kolor tła licznika został pozostawiony jako domyślny jasnoszary.
Licznik używa antyaliasingu do wygładzania krawędzi cyfr. Te piksele krawędzi zostały zmieszane z szarym, nie z czarnym. Gdy GIF jest wyświetlany na czarnym, te szare piksele krawędzi stają się widoczne. Cyfry wyglądają szorstko, z zaszumionymi krawędziami i artefaktami.
Gdyby kolor tła był ustawiony na czarny, piksele krawędzi zmieszałyby się z czarnym i stałyby się niewidoczne. Cyfry wyglądałyby czysto i gładko.
Rozwiązania:
Najlepsze: użyj stałego tła
Jeśli licznik znajduje się na stałym kolorze (czarna sekcja, biała sekcja, kolor marki), ustaw tło licznika na dokładnie ten sam kolor. Dzięki temu antyaliasing miesza się prawidłowo i usuwa szorstkie krawędzie.
Jeśli potrzebujesz przezroczystości: dopasuj kolor matte
Jeśli zachowujesz przezroczystość, nadal ustaw kolor tła na ten sam kolor za licznikiem. To jest kolor używany do wygładzania, więc musi pasować do prawdziwego tła e-maila.
Szybkie sprawdzenie: Jeśli Twój licznik ma być na ciemnej sekcji, ustaw kolor tła licznika na ten sam ciemny kolor, nie domyślny szary.
Rozciąganie w trybie responsywnym
Przydatne, ale może potęgować problemy z jakością
Tryb responsywny dodaje style="width:100%!important;" więc licznik wypełnia szerokość e-maila. To świetne dla układów mobilnych, ale może rozciągnąć mały GIF i sprawić, że będzie wyglądał rozmazany.
Kiedy Responsywność powoduje rozmycie:
- Mały rozmiar bazowy
- Szeroki kontener e-maila
- Licznik rozciąga się poza swój naturalny rozmiar pikseli
Jak bezpiecznie używać Responsywności:
- Zacznij od rozmiaru XL lub wysokiego Custom
- Włącz Retina Ready, jeśli chcesz maksymalnej ostrości
- Jeśli potrzebujesz stałego wyglądu, wyłącz Responsywność
Wskazówka: Jeśli nie potrzebujesz pełnej szerokości, wyłącz Responsywność i kontroluj max-width ręcznie dla spójnych wyników.
Kolory tekstu i tła zbyt podobne
Kropki, brudne krawędzie i czasem dziury wewnątrz cyfr
GIF używa ograniczonej palety kolorów. Jeśli kolor tekstu jest bardzo zbliżony do tła, obraz może stracić subtelne piksele krawędzi. Z przezroczystością może to być gorsze i może nawet powodować dziury wewnątrz liczb, gdy kolory zlewają się w tę samą pozycję palety.
Jeśli widzisz kropki
Nieznacznie zwiększ kontrast. Zrób tekst trochę ciemniejszy lub jaśniejszy.
Jeśli krawędzie wyglądają brudno
Unikaj prawie identycznych kolorów. Stałe tło pomaga.
Jeśli cyfry mają dziury
Wyłącz przezroczystość lub zmień kolor tekstu.
Zasada: Jeśli ledwo widzisz tekst na tle w edytorze, GIF prawdopodobnie wyprodukuje artefakty w e-mailu.
Kod osadzenia nie zaktualizowany
Zaskakująco częsty powód, dla którego poprawka "nie działa"
Twój kod osadzenia zawiera końcowe wartości CSS (width, max-width, czasem reguły display). Jeśli zmienisz ustawienia, ale nadal używasz starego kodu osadzenia, Twój e-mail nadal będzie renderował starą wersję.
Poprawka: Skopiuj kod osadzenia ponownie po zmianach i zastąp go w szablonie e-maila.
Problemy z trybem ciemnym Gmaila
Oddzielny problem z własnymi rozwiązaniami
Jeśli Twój licznik wygląda dobrze wszędzie z wyjątkiem Gmaila w trybie ciemnym, to nie jest problem z rozmiarem. Gmail może odwracać kolory i zmieniać sposób wyświetlania e-maila. Użyj konfiguracji specyficznej dla trybu ciemnego.
Mamy dedykowany przewodnik na ten temat
Tryb ciemny Gmaila to środowisko, którego nadawcy e-maili nie mogą w pełni kontrolować. Nasz przewodnik wyjaśnia, dlaczego to się dzieje i jak zminimalizować wpływ.
Czytaj: Jak radzić sobie z trybem ciemnym w GmailuKrok po kroku: Napraw rozmazany licznik
Otwórz ustawienia licznika
Pracuj z prawdziwym licznikiem, nie ze starym szablonem e-maila
Zwiększ rozmiar bazowy
Użyj L, XL lub wyższego Custom. Jeśli Responsywność jest WŁĄCZONA, zacznij od większego.
Ustaw tło prawidłowo
Stałe tło jest najczystsze. Jeśli przezroczyste, dopasuj kolor matte.
Włącz Retina Ready
Następnie zwiększ rozmiar, jeśli licznik stanie się zbyt mały.
Skopiuj ponownie kod osadzenia
Zastąp stary kod w e-mailu. Stary kod zachowuje stare CSS.
Wyślij testowy e-mail
Sprawdź na komputerze i telefonie przed wysłaniem do listy
Często zadawane pytania
Dlaczego mój licznik wygląda ostro w edytorze, ale rozmazany w e-mailu?
Edytor pokazuje GIF w jego natywnym rozmiarze. W e-mailu układ może rozciągać obraz (szczególnie w trybie Responsywnym). Jeśli GIF jest mały, rozciąganie go sprawia, że jest rozmazany. Zwiększ rozmiar do L lub XL, następnie skopiuj ponownie kod osadzenia.
Czy potrzebuję Retina Ready?
Jeśli zależy Ci na ostrości na MacBookach, iPhone'ach i nowoczesnych ekranach, tak. Retina Ready wyświetla GIF w połowie rozmiaru dla czystszego wyglądu. Po włączeniu zwiększ rozmiar, aby zachować tę samą szerokość wizualną.
Czy powinienem użyć przezroczystego czy stałego tła?
Stałe tło daje najczystszy wynik, gdy tło e-maila jest spójne. Przezroczystość jest przydatna, gdy licznik znajduje się na wielu tłach, ale musisz dopasować kolor matte tła, aby uniknąć aureoli.
Dlaczego widzę kropki, brudne krawędzie lub postrzępione piksele?
Zwykle oznacza to niski kontrast, złe tło matte lub ograniczenia palety GIF. Nieznacznie zwiększ kontrast i unikaj prawie identycznych kolorów dla tekstu i tła. Stałe tło często naprawia to natychmiast.
Dlaczego widzę dziury wewnątrz cyfr?
Z przezroczystością i ograniczoną paletą GIF, kolory mogą się łączyć i części cyfry mogą stać się przezroczyste. Napraw to, wyłączając przezroczystość lub zmieniając kolor tekstu na bardziej wyraźny odcień.
Zmieniłem ustawienia, ale nic się nie poprawiło. Dlaczego?
Prawdopodobnie nadal używasz starego kodu osadzenia. Skopiuj ponownie kod osadzenia i zastąp go w szablonie e-maila.
Podsumowanie
Większość problemów z jakością licznika wynika z rozciągania małego GIF-a, używania przezroczystości z niedopasowanym tłem matte lub używania prawie identycznych kolorów, które psują antyaliasing w GIF. Dla najlepszych wyników GIF: użyj większego rozmiaru (L lub XL), włącz Retina Ready, preferuj stałe tło gdy to możliwe, skopiuj ponownie kod osadzenia po zmianach i przetestuj w prawdziwym e-mailu.