Figma
Projekty e-maili w Figmie utworzone poza Emailify nie są obsługiwane
Zbuduj układ e-maila za pomocą narzędzi projektowych Emailify, zanim wyeksportujesz HTML gotowy do produkcji. Te narzędzia dodają warstwy Row, Column, Button i inne ustrukturyzowane warstwy, których Emailify potrzebuje do wygenerowania HTML. Po dodaniu możesz dowolnie dostosować ich treść i style.
Warstwy lub ramki zaprojektowane wcześniej w Figmie bez wtyczki Emailify zostaną wyrenderowane jako statyczny obraz, a nie jako treść HTML z tekstem sformatowanym.
Nadpisywanie formatu obrazów
Emailify automatycznie wykrywa, czy warstwa zawiera obszary pełnej przezroczystości, i wtedy ustawia PNG jako domyślny format eksportu; w przeciwnym razie ustawia JPG. Możesz to zmienić i ustawić format eksportu dowolnej warstwy na JPG lub PNG, dodając własne ustawienie eksportu.
Zawieszanie się przy włączonych ustawieniach Figmy „Scroll Wheel” lub „Drag to Pan”
Zdarza się losowy problem, przy którym wtyczka lub płótno mogą się dziwnie zawieszać, jeśli te ustawienia (pokazane na zrzucie ekranu poniżej) są włączone.
Jeśli dzieje się tak w Twoim pliku Figmy, możesz to rozwiązać, wyłączając te ustawienia w Figmie: otwórz Main Figma Menu, przejdź do Preferences, a następnie odznacz ustawienia Use scroll wheel zoom i Right-click and drag to pan.
Dodawanie linków do zwykłego akapitu lub treści w warstwie tekstowej Figmy
Zaznacz tekst, który chcesz podlinkować w warstwie tekstowej Figmy, a następnie kliknij natywny przycisk z ikoną „Link” w Figmie na pasku narzędzi w nagłówku Figmy. Pozwoli Ci to wkleić adres URL, który Emailify automatycznie wyrenderuje.
Używaj tego tylko w warstwach tekstowych z treścią (nie w przyciskach ani linkach nawigacji). Pamiętaj, że działa to tylko w zwykłych warstwach tekstowych z treścią; jeśli chcesz ustawić link na przycisku, ikonie społecznościowej lub linku nawigacji generowanym przez Emailify, kliknij tę warstwę w Figmie, następnie kliknij przycisk Settings w nagłówku wtyczki Emailify i wklej adres URL w polu linku.
Etykiety przycisków lub linków są widoczne w Figmie, ale brakuje ich w podglądzie lub eksporcie
Jeśli przycisk jest pusty albo brakuje linku nawigacji, mimo że jego tekst jest widoczny w Figmie, przyczyną może być problem z eksportem mieszanych danych fontów, w tym fontów zmiennych. Poprawny adres URL linku nie gwarantuje, że jego etykieta została wyeksportowana.
Zostaw etykiety jako edytowalny tekst w ich oryginalnych komponentach Button lub komponentach nawigacji Emailify. Zamknij i ponownie otwórz Emailify, odśwież podgląd i wyeksportuj e-mail jeszcze raz. Sprawdź pobrany HTML, zanim prześlesz go na swoją platformę e-mailową.
Jeśli etykiet nadal brakuje, skontaktuj się ze wsparciem i prześlij ramkę e-maila z Figmy, której dotyczy problem, oraz wyeksportowany HTML lub plik ZIP, abyśmy mogli sprawdzić warstwy tekstowe i odtworzyć problem.
Dodawanie indeksu górnego lub dolnego
Możesz dodać indeks górny i dolny do warstw tekstowych w Figmie, a w eksporcie HTML z wtyczki zostanie on automatycznie wyrenderowany jako tagi indeksu górnego (na przykład sup) lub dolnego (na przykład sub).
Używanie tagów nagłówków (na przykład h1, h2, h3) w tekście HTML
Jeśli potrzebujesz, możesz zamienić domyślny tag akapitu (p) na dowolny tag nagłówka (np. h1, h2). Możesz otoczyć treść warstwy tekstowej w Figmie wybranym tagiem nagłówka, a wtyczka Emailify automatycznie zmieni tag podczas eksportu HTML.
Puste rozszerzenia plików w aplikacji desktopowej Figmy w Windows
Aplikacja desktopowa Figmy (tylko w Windows) ma znany problem, który występuje też przy zwykłym eksporcie plików z Figmy. Podczas zapisywania pliku możesz zobaczyć etykietę „all files”. Jeśli ją zignorujesz i klikniesz „Save”, plik i tak powinien zapisać się z poprawnym rozszerzeniem i otworzyć się normalnie po pobraniu na komputer. Jeśli plik mimo to zapisze się bez rozszerzenia, możesz zmienić jego nazwę i ręcznie dopisać poprawne rozszerzenie.
Optymalizacja projektów w celu zmniejszenia rozmiaru eksportu HTML
Największy wpływ na rozmiar eksportowanego HTML ma liczba komponentów Row, ponieważ każdy Row tworzy kolejny zestaw elementów tabeli. Używaj ponownie tego samego Row, jeśli jego treść mieści się w tej samej strukturze.
Na przykład nagłówek, podtytuł, treść główna i przycisk mogą współdzielić jedną Column w jednym Row. Nie potrzebują czterech osobnych warstw Row.
Opcje panelu ustawień Emailify nie pojawiają się po kliknięciu warstwy Emailify w Figmie
Jeśli klikasz warstwę Emailify w projekcie w Figmie, a ustawienia nie pojawiają się po kliknięciu przycisku Settings w nagłówku wtyczki, główna ramka Emailify może być zagnieżdżona w innych ramkach, grupach itp. Aby to rozwiązać, przenieś ramkę Emailify poza zagnieżdżone ramki lub warstwy, z powrotem na poziom „Page”, tak aby nie była zagnieżdżona w żadnej innej warstwie.
Parametry UTM są usuwane podczas wysyłki e-maila HTML
Jest kilka powodów, dla których parametry UTM w adresie URL mogą zostać usunięte podczas wysyłki e-maili HTML – od mniej więcej roku coraz więcej przeglądarek i urządzeń usuwa je automatycznie (ze względu na prywatność). Jeśli parametry działają, gdy otwierasz linki z okna podglądu Emailify, ale nie działają po wysłaniu e-maila z Twojej platformy e-mail marketingu, to prawdopodobnie podczas wysyłki stosowane jest dodatkowe przekierowanie lub skracanie linków, które je usuwa albo psuje.
Szybkość komunikatu „Please wait, loading Figma images...”
Jakiś czas temu Figma wprowadziła aktualizację, która zmusza wszystkie wtyczki do czekania, aż załaduje się każdy obraz w pełnej rozdzielczości na bieżącej stronie Figmy, zanim wtyczka będzie mogła wyeksportować jakiekolwiek dane obrazu (nawet jeśli potrzebuje tylko jednej warstwy lub obrazu).
Obecnie jedynym rozwiązaniem jest ograniczenie liczby ramek i warstw na bieżącej stronie Figmy, co znacznie przyspieszy ten proces przy pierwszym uruchomieniu wtyczki. Możesz na przykład utworzyć zupełnie nową stronę w bieżącym pliku Figmy i przenieść na nią tylko ramki Emailify, nad którymi chcesz pracować lub które chcesz wyeksportować – po ponownym uruchomieniu wtyczki na tej stronie wszystko powinno załadować się znacznie szybciej.
Rozpikselowane obrazy w eksporcie
Jeśli eksportujesz e-mail, gdy zasoby graficzne w Figmie wciąż stopniowo się ładują, mogą zostać wyeksportowane jako rozpikselowane, ponieważ obraz nie załadował się w pełni w pliku Figmy przed eksportem. Aby tego uniknąć, upewnij się, że wszystkie obrazy załadowały się w 100% i są ostre w pliku Figmy, zanim wyeksportujesz e-maile wtyczką Emailify.
Dodatkowo możesz użyć funkcji „Downsizer” w TinyImage, aby zmniejszyć wypełnienia obrazem do rozmiaru ich warstw. Zmniejszy to rozmiar plików i sprawi, że obrazy będą ładować się w pliku Figmy znacznie szybciej.
Edycja PDF-ów w Adobe Acrobat pokazuje kropkowane linie
Możesz to rozwiązać, wyłączając przełącznik „Show bounding boxes” na pasku bocznym aplikacji Acrobat podczas edycji PDF-a. Kropkowane linie ramek ograniczających to coś, co Adobe włącza domyślnie po przejściu w tryb „Edit” przy otwartym w aplikacji PDF-ie, ale wyłączenie przełącznika „Show bounding boxes” ukryje je jednym kliknięciem.
W Chinach może być potrzebny VPN
Uwaga: jeśli jesteś w Chinach, serwer kont może być blokowany przez „Wielki Firewall Chiński”. Jeśli widzisz błąd aktywacji mimo poprawnego klucza, prawdopodobnie musisz użyć VPN, aby rozwiązać problem.
„An error occurred while loading the plugin environment”
Może się to zdarzyć w aplikacji desktopowej Figmy, jeśli przez pomyłkę włączone jest ustawienie debugowania Use Developer VM. Aby upewnić się, że jest wyłączone, kliknij prawym przyciskiem myszy w dowolnym miejscu płótna Figmy, najedź kursorem na Plugins, następnie na Development i sprawdź, czy opcja Use Developer VM jest odznaczona. Gdy opcja jest odznaczona (i nie ma obok niej znacznika wyboru), wtyczka po ponownym uruchomieniu powinna działać normalnie.
Przesyłanie obrazów jest blokowane w Twojej sieci
Jeśli masz włączoną funkcję Upload Hosted Image URLs albo przesyłasz e-mail HTML na dowolną platformę e-mailową za pomocą wbudowanych opcji eksportu Emailify, wtyczka automatycznie przesyła obrazy do internetu, aby były automatycznie hostowane.
Jeśli we wtyczce widzisz ostrzeżenie (Images uploads may be blocked on your current network), oznacza to, że wtyczka nie ma dostępu do usługi przesyłania potrzebnej do hostowania tych obrazów w internecie.
Zwykle wynika to z tego, że sieć (na przykład sieć firmowa, w której zapora może blokować niektóre adresy URL) lub dostawca internetu (ISP), z którym się łączysz, ogranicza lub blokuje te adresy. Aby rozwiązać problem:
- Udostępnij internet z telefonu jako hotspot Wi-Fi dla swojego komputera, a następnie ponownie uruchom wtyczkę Emailify i sprawdź, czy to rozwiązuje problem. Jeśli tak, oznacza to, że Twoja poprzednia sieć blokowała żądania.
- Możesz też spróbować użyć VPN, który przekieruje żądania sieciowe tunelem i ominie blokady w sieci.
- Jeśli już korzystasz z VPN, spróbuj go wyłączyć, a następnie ponownie uruchom wtyczkę Emailify i sprawdź, czy to rozwiązuje problem.
Jeśli problem nadal występuje, napisz do nas e-mailem.
Klienty poczty
Nowy Outlook może przepisywać style po załadowaniu e-maila
Nowy Outlook dla Windows ma zgłoszony problem z dodatkowym przetwarzaniem, przez który e-mail najpierw wyświetla się poprawnie, a po załadowaniu się zmienia. Wygląda na to, że Outlook przepisuje części CSS e-maila w tym drugim etapie renderowania, co może powodować problemy takie jak nieoczekiwane układanie się kolumn desktopowych jedna pod drugą.
To zachowanie jest niespójne: problem może dotyczyć jednego odbiorcy, podczas gdy wszyscy pozostali widzą oczekiwany układ, a identyczne wysyłki testowe mogą wyglądać inaczej w tej samej skrzynce. Customer.io opisało te objawy i obecne ustalenia w artykule New Outlook, same headache.
Nowe eksporty Emailify zawierają ochronną warstwę zgodności dla znanego przypadku układania się kolumn. Emailify zachowuje oryginalne responsywne style MJML i zapasowe tabele dla klasycznego Outlooka, a następnie umieszcza w treści e-maila drugą kopię samych wygenerowanych reguł szerokości kolumn desktopowych. Pomaga to webowym wersjom Outlooka, które usuwają style z nagłówka (head) e-maila, a jednocześnie zachowuje normalne mobilne układanie kolumn i działanie breakpointów MJML w pozostałych klientach.
Nie musisz przebudowywać projektu. Zaktualizuj Emailify i ponownie wyeksportuj e-mail, aby wygenerowany HTML zawierał to zabezpieczenie, zanim wyślesz kolejny test.
Jeśli trafisz na ten problem:
- Otwórz e-mail, którego dotyczy problem, w osobnym oknie zamiast w panelu odczytu lub podglądu Outlooka. W zgłoszonych przypadkach e-mail często wyświetla się poprawnie w osobnym oknie.
- Wyślij ten sam wyeksportowany HTML do innego odbiorcy lub klienta poczty, aby sprawdzić, czy problem dotyczy tylko jednego użytkownika Outlooka.
- Jeśli identyczne wysyłki wyglądają różnie, pobierz obie otrzymane wiadomości jako pliki
.emli porównaj ich HTML, zanim zmienisz projekt lub eksport w Emailify.
To zabezpieczenie ogranicza zgłaszany problem z układaniem się kolumn desktopowych, ale Emailify nie ma wpływu na każde przepisanie stylów po dostarczeniu wiadomości. Jeśli problem nie ustępuje, a otrzymany HTML jest niezmieniony, nie wprowadzaj dużych zmian w projekcie tylko z powodu jednego niespójnego podglądu w Outlooku.
Przekazywanie dalej szablonów e-maili HTML je psuje
Niestety, jeśli ktoś przekaże dalej otrzymany e-mail HTML, często psuje to jego wygląd u kolejnego odbiorcy.
Dzieje się tak, ponieważ różne klienty poczty przy przekazywaniu modyfikują (lub usuwają) część kodu HTML, co psuje e-mail. Jak wyjaśnia artykuł Litmus When Forwarded Emails Break:
Powszechnie wiadomo, że każdy klient poczty renderuje e-maile inaczej. Gdy subskrybent przekazuje e-mail dalej, niektóre klienty poczty zmieniają kod przekazywanej wiadomości. Mogą usuwać niektóre elementy HTML, otaczać e-mail elementem blockquote albo dodawać do kodu nowe klasy – a każda z tych zmian może zepsuć projekt i sprawić, że e-mail będzie mniej funkcjonalny dla odbiorcy przekazanej wiadomości.
Jednym z popularnych sposobów na ograniczenie tego problemu jest wersja „Web link”, którą można otworzyć w przeglądarce, jeśli e-mail nie wyświetla się poprawnie. Zwykle dodaje się ją gdzieś na górze e-maila (jak ten link w MailChimp), a w razie potrzeby możesz też umieścić gdzieś w e-mailu link do udostępniania.
Moje e-maile trafiają do spamu. Co może być przyczyną?
Jest kilka typowych powodów, dla których e-maile mogą trafiać do spamu:
- Zbyt wiele linków: każdy link wpływa na dostarczalność. Usuń linki, które nie są niezbędne, w tym zbędne linki do mediów społecznościowych, aby e-maile częściej trafiały do skrzynki odbiorczej.
- Słaba reputacja nadawcy: jeśli Twoja domena lub adres IP mają historię niskiego zaangażowania, odbić lub skarg, dostawcy poczty mogą oznaczać Twoje e-maile.
- Treść wyglądająca na spam: nadużywanie języka promocyjnego (na przykład „Za darmo!”, „Działaj teraz!”, „Oferta ograniczona czasowo”) albo zbyt wiele obrazów przy zbyt małej ilości tekstu może uruchomić filtry.
- Problemy z uwierzytelnianiem: upewnij się, że SPF, DKIM i DMARC są poprawnie skonfigurowane dla domeny, z której wysyłasz.
- Niskie zaangażowanie: jeśli subskrybenci regularnie nie otwierają e-maili ani nie klikają linków, kolejne e-maile częściej będą oznaczane jako spam.
- Jakość listy: wysyłka do starych lub kupionych list może powodować odbicia i zgłoszenia spamu, które obniżają ocenę nadawcy.
Zacznij od uproszczenia e-maila, sprawdzenia uwierzytelniania domeny i usunięcia zbędnych linków – często już same te zmiany poprawiają dostarczalność.
Nadpisania trybu ciemnego działają tylko w aplikacjach Apple Mail na iOS i Macu
Obecnie obsługa stylów nadpisujących tryb ciemny w klientach poczty jest wciąż dość ograniczona, więc miej to na uwadze i projektuj e-maile tak, aby nadpisania trybu ciemnego były tylko „stopniowym ulepszeniem” (progressive enhancement).
Warto też stosować inne sprytne techniki projektowe, aby e-mail dobrze wyglądał w trybie ciemnym również w pozostałych klientach poczty.
Obejście dla białego tekstu przycisków w Gmailu ma węższy cel: zachowanie czysto białego tekstu na przyciskach. Nie pozwala zachować bez zmian czarnego tekstu na jasnym tle w trybie ciemnym Gmaila.
Cienkie białe linie subpikselowe między ułożonymi obrazami na urządzeniach mobilnych
Zdarza się to czasem przy obrazach inline na pełną szerokość: w zależności od szerokości urządzenia, gdy obraz jest zmniejszany na telefonie, do jego wysokości mogą wkraść się „subpiksele” (to one zostawiają tę delikatną szczelinę między obrazami, przez którą prześwituje tło).
Najszybszym obejściem jest dodanie warstwy Wrapper wokół warstw „Row” z tymi obrazami i ustawienie tła tego Wrappera jako „Linear Gradient” z Twoim kolorem tła (na przykład szarym) po obu stronach gradientu. Dzięki temu tło zostanie wyrenderowane jako obraz, kolor tła CSS nie zostanie podmieniony ani odwrócony na czarny w trybie ciemnym, a za rzędami z obrazami będzie spójne tło, które zakryje szczeliny subpikselowe.
Osadzone fonty Google i niestandardowe działają tylko w aplikacjach Apple Mail na iOS i macOS
Obecnie niestandardowe fonty w klientach poczty są obsługiwane tylko w Apple Mail na iOS i macOS, dlatego w warstwach tekstowych Figmy zalecamy bezpieczne fonty webowe, które możesz ustawić w panelu Configure Fonts w funkcji „Preview” w Emailify.
Niektórzy dostawcy usług e-mailowych (na przykład MailChimp) aktywnie usuwają je jeszcze przed wysłaniem e-maila, aby używane były wyłącznie bezpieczne fonty webowe.
Mimo to Emailify nadal dodaje instrukcje @import fontów Google, a gdy font Google jest używany w tekście sformatowanym, ustawia też zapasowy bezpieczny font webowy (na przykład „Arial”, „Georgia” lub „Courier”). Fonty Google będą widoczne we wszystkich klientach poczty, które obsługują @font-face w e-mailach.
Używaj niestandardowych fontów w obrazach. Jeśli niestandardowy font musi wyglądać tak samo we wszystkich klientach poczty, warto umieścić warstwy tekstowe w ramce „Image”. Taki tekst zostanie wyeksportowany jako część samego obrazu, więc jego poprawne wyświetlanie nie będzie zależeć od obsługi niestandardowych fontów webowych.
Elementy formularzy w e-mailach nie są obsługiwane
Obsługa elementów form w e-mailach HTML jest wciąż dość słaba, a ich użycie może sprawić, że e-mail zostanie oznaczony jako spam itp., więc na razie lepiej unikać natywnych formularzy w e-mailach HTML.
Najlepszym obejściem jest zaprojektowanie w Emailify ładnego przycisku wezwania do działania (CTA) i podlinkowanie go do zewnętrznego formularza, na przykład w Google Forms lub Typeform, gdzie odbiorcy podadzą dane w przeglądarce.
Jak działa blokowanie obrazów w niektórych klientach
Poniżej znajdziesz kilka bardzo dobrych artykułów, które wyjaśniają, czym jest blokowanie obrazów i które klienty poczty włączają je domyślnie (głównie Outlook), podczas gdy inne klienty, takie jak Gmail, Android, Apple/iOS itd., domyślnie wyświetlają obrazy.
How Image Blocking Works in Email
Email Image Blocking: Answering the What, Why, Where, Who, and How
Niestety nie ma to związku z tym, czy obrazy są zabezpieczone (SSL), czy nie – blokada zawsze obejmuje wszystkie obrazy w e-mailu.
Dobra wiadomość jest taka, że odbiorcy korzystający z tych pierwszych klientów poczty zwykle są do tego przyzwyczajeni i klikają przycisk „pokaż obrazy” albo, co bardziej prawdopodobne, mają już włączone domyślne wyświetlanie obrazów w przychodzących e-mailach.
Fioletowy tekst w Gmailu (kilka testowych wysyłek z tym samym tematem)
Jeśli wysyłasz kilka testów e-maila na konto Gmail, możesz zauważyć, że część tekstu ma ciemnofioletowy kolor.
To nie jest problem z Twoim kodem HTML. Dzieje się tak, gdy Gmail uzna, że kilka e-maili wysłanych tego samego dnia z tym samym tematem to odpowiedzi na siebie nawzajem. Wtedy wyświetla wątek e-maili w „widoku konwersacji”.
Więcej o widoku konwersacji w Gmailu przeczytasz w dokumentacji Google:
Fioletowe zabarwienie to wyłącznie funkcja wyświetlania, która istnieje tylko w widoku, w którym jest oglądane. Nie jest wysyłane w żadnych wiadomościach i możesz to sprawdzić za pomocą funkcji pokazywania oryginału w Gmailu – trzeba jednak trochę znać HTML.
Kolor jest stosowany do tekstu powtórzonego z poprzedniej wiadomości w bieżącej konwersacji, a odbiorcy go widzą, ponieważ również używają Gmaila i również mają kopie poprzednich wiadomości z bieżącej konwersacji. To, co zostanie pokolorowane w ich konwersacji, może się znacznie różnić od tego, co zostanie pokolorowane w Twojej.
Klienty poczty dodają niebieskie linki do dat, numerów telefonów i adresów
To od dawna znany problem: niektóre klienty poczty automatycznie dodają linki do dat, numerów telefonów czy adresów i nadają im własne style kolorów (zwykle niebieskie linki).
Emailify automatycznie stosuje wszystkie zalecane poprawki w kodzie, aby ograniczyć ten problem w niektórych klientach poczty, ale klienty są często aktualizowane w sposób, który obchodzi lub wyłącza te poprawki.
Są 2 dodatkowe metody, którymi możesz spróbować powstrzymać klienta poczty przed automatycznym dodawaniem linków (obie opisano w powyższych artykułach):
Metoda nr 1: z góry dodaj link zastępczy (na przykład do własnej strony) do każdej z tych warstw tekstowych w Figmie, usuń w Figmie podkreślenie i ustaw dowolny kolor (aby tekst nie wyglądał na klikalny). W ten sposób tekst daty zostanie z góry otoczony tagiem linku, więc klient poczty nie będzie próbował automatycznie dodać własnego, niesformatowanego linku.
Metoda nr 2: dodaj specjalną niewidoczną encję HTML (‌) bezpośrednio po pierwszym znaku każdej daty, numeru telefonu lub adresu (na przykład 6‌75 Massachusetts Ave, Cambridge, MA 02139). Powinno to zmylić klienta poczty, tak aby nie rozpoznał daty i nie dodał do niej automatycznie linku.
Niektóre sieci VPN mogą blokować wyświetlanie przesłanych obrazów
Jeśli masz włączoną funkcję Upload Hosted Image URLs albo przesyłasz e-mail HTML na dowolną platformę e-mailową za pomocą wbudowanych opcji eksportu Emailify, może wystąpić bardzo rzadki przypadek, w którym niektóre adresy IP przydzielane przez część sieci VPN są blokowane przez hosting obrazów, przez co obrazy się nie ładują.
Jeśli masz problem z ładowaniem obrazów, to najprawdopodobniej jest jego przyczyna (tymczasowo wyłącz VPN, aby to sprawdzić).
Podpisy e-mail nie obsługują niestandardowych fontów
W przeciwieństwie do pełnych, zwykłych e-maili HTML, w których można osadzać niestandardowe fonty – choć i tak tylko dla Apple Mail (inne klienty, takie jak Gmail i Outlook, nie obsługują żadnego osadzania fontów) – podpisy e-mail nie obsługują tagu style, w którym można by dodać kod osadzania fontu. Dlatego projektuj podpisy z użyciem bezpiecznych fontów systemowych.
Aplikacja Gmail na iOS nie renderuje responsywnych stylów mobilnych
Najczęstszą przyczyną jest literówka w którejś właściwości CSS lub stylu w zapytaniu @media (na przykład padding-bottm zamiast padding-bottom) albo podział wiersza w środku właściwości stylu (na przykład padd nowy wiersz ing-top). Wtedy aplikacja Gmail zignoruje wszystkie pozostałe style i nie wyrenderuje żadnych responsywnych nadpisań mobilnych.
Nie powinno się to zdarzać w kodzie wyeksportowanym bezpośrednio z wtyczki, ale może wystąpić, jeśli ręcznie edytujesz kod HTML po eksporcie z Emailify (albo jeśli Twoja platforma e-mail marketingu modyfikuje kod lub dodaje limity długości wierszy).
Limit 500 znaków na wiersz w e-mailach HTML
Emailify ogranicza eksportowany HTML do 500 znaków na wiersz. Formalny limit wynosi 998 znaków, ale krótsze wiersze pozwalają uniknąć problemów z renderowaniem i dostarczaniem, które występują w Outlooku i u niektórych dostawców usług e-mailowych.
Sieci VPN mogą powodować, że niektóre linki do mediów społecznościowych nie otwierają się poprawnie
Zdarza się to raczej rzadko, ale jeśli linki do niektórych serwisów społecznościowych (na przykład Facebook, Instagram) nie otwierają się poprawnie, to najprawdopodobniej jest przyczyna (tymczasowo wyłącz VPN, aby to sprawdzić), a nie problem z e-mailem HTML ani z samymi linkami.
Outlook
Zaokrąglenie rogów nie wyświetla się w Outlooku
Niestety Outlook nie obsługuje właściwości border-radius, więc zawsze wyświetli zwykłe, kwadratowe rogi. Na liście obsługi border-radius sprawdzisz, które klienty poczty obsługują tę właściwość CSS.
Wysokość przycisku zapada się w Outlook.com (bo nie ma prawdziwego adresu URL)
Jeśli wysokość komponentu przycisku zapada się do rozmiaru jego warstwy tekstowej, to Outlook.com robi tak wtedy, gdy href nie jest ustawiony na prawdziwy adres URL (na przykład [replaceLinkInHere] zamiast prawdziwego adresu, takiego jak https://google.com). Ustaw prawdziwy adres URL komponentu przycisku: kliknij warstwę przycisku w Figmie, użyj przycisku Settings we wtyczce i wklej tam swój adres URL.
Biała linia 1px w rzędach z „odwróconą kolejnością” w niektórych wersjach Outlooka
W niektórych wersjach Outlooka występuje znany błąd przy ustawieniu odwracania kolumn: obok jednej z kolumn może pojawić się biała linia o szerokości 1px. To jedna z osobliwości renderowania Outlooka wynikająca z silnika renderującego Microsoft Word; może się pojawić, gdy odwrócony Row ma też ustawiony padding.
Najlepszym obejściem jest usunięcie paddingu z odwróconej warstwy Row, umieszczenie Row wewnątrz Wrappera i przeniesienie paddingu na zewnętrzną warstwę Wrapper. Dzięki temu odstępy wyglądają tak samo, ale błąd renderowania Outlooka w samym odwróconym Row nie występuje.
To obejście jest zgodne z podejściem omawianym w powiązanym zgłoszeniu MJML na GitHubie.
Outlook automatycznie zamienia daty i godziny w niebieskie linki do kalendarza
Aby Outlook nie rozpoznawał tekstu jako daty lub godziny i nie zamieniał go automatycznie w link, możesz wstawić między dni, daty i godziny encję HTML „spacji o zerowej szerokości” (​), która przerywa dopasowywanie wzorców w Outlooku – jak w tym sprawdzonym, działającym przykładzie: Monday​ — Friday 8​am to 5​pm
Wielkie litery ze znakami diakrytycznymi są ucinane
Jeśli masz warstwę tekstową pisaną wielkimi literami, a niektóre znaki mają znaki diakrytyczne (na przykład Ä, Ö, Ü), których górna część nie wyświetla się w Outlooku, to dlatego, że wartość „line height” warstwy tekstowej w Figmie jest mniejsza niż „font size”. Outlook przycina wszystko, co nie mieści się w wysokości linii (w przeciwieństwie do innych klientów, które po prostu pozwalają treści normalnie wystawać poza nią).
Aby to rozwiązać, zwiększ wysokość linii tak, aby była nieco większa niż rozmiar fontu. Jeśli na przykład warstwa tekstowa ma rozmiar fontu „24px”, a wysokość linii wynosi obecnie „23px”, zwiększ w Figmie wysokość linii z „23px” do „28px” (aby zapewnić dość zapasu wysokości dla znaków diakrytycznych wystających ponad wielkie litery o rozmiarze 24px). Wtedy Outlook wyrenderuje znaki diakrytyczne poprawnie, bez ucinania z powodu zbyt małej wysokości linii.
Losowy błąd „linii 1px” w Outlooku
Istnieje bardzo irytujący problem znany jako błąd linii 1px w Outlooku, który losowo pojawia się w niektórych wersjach Outlooka:
Outlook dodaje do naszych e-maili dodatkowe linie. Linie te dziedziczą tło ustawione w tagu body... co gorsza, błąd wydaje się występować losowo, choć częściej pojawia się na komputerach z Windows 10 niż z Windows 7.
Jak wspomniano w powyższym artykule, problem jest dość losowy i nie ma na niego niezawodnej poprawki, ale zwykle da się go rozwiązać metodą prób i błędów, zmieniając rozmiar fontu tekstu znajdującego się nad miejscem, w którym pojawia się linia. Na przykład (z artykułu):
W niektórych przypadkach wystarczy zmienić rozmiary fontów z nieparzystych na parzyste. Jeśli na przykład masz font o rozmiarze 13px lub 15px, spróbuj zmienić go na 14px.
Inny dobry artykuł przeglądowy, Fixing White Lines in Outlook, podaje dodatkowe szczegóły i możliwe poprawki.
Jeśli chcesz zagłębić się w temat, artykuł Outlook 2016 madness and the weird 1px thin horizontal lines opisuje dokładniej przyczynę problemu, a szczegółowa dyskusja na forum Litmus rozważa możliwe przyczyny i sposoby diagnozowania.
Gmail
Gmail przycina e-mail
Gmail przycina e-maile, których rozmiar przekracza 102 kB, i ukrywa pełną treść za linkiem „View entire message”. Aby tego uniknąć, użyj przycisku Preview, aby sprawdzić rozmiar pliku HTML przed eksportem, i usuń jak najwięcej treści, aby zmniejszyć rozmiar pliku.
Jeśli e-mail jest nadal przycinany, mimo że mieści się w limicie rozmiaru pliku HTML, to najprawdopodobniej w treści e-maila użyto znaku UTF-8, który również może powodować przycinanie przez Gmaila. Najlepszym rozwiązaniem jest zastąpienie znaku UTF-8 jego wersją zakodowaną w HTML (na przykład © zamiast ©), co wtyczka robi automatycznie.
Innym powodem jest wysyłanie e-maili z tym samym tematem (na przykład kilku testów do siebie): Gmail łączy wtedy e-maile w jeden wątek i może przycinać treść kolejnych wysyłek. Aby tego uniknąć, zawsze zmieniaj temat (na przykład „Test v1”, „Test v2” itd.).
Biały tekst przycisków zmienia się na czarny w aplikacji mobilnej Gmail w trybie ciemnym
Gmail (i inne aplikacje) automatycznie stosuje do e-maila style trybu ciemnego, gdy motyw systemu użytkownika jest ustawiony na ciemny – dotyczy to również przycisków.
W przypadku przycisków, które mają mieć biały tekst zarówno w trybie jasnym, jak i ciemnym:
- Ustaw w Figmie kolor warstwy tekstowej przycisku na czystą biel (
#FFFFFF). - Zaznacz komponent Button, otwórz Settings i również ustaw kolor tekstu w nadpisaniu trybu ciemnego na czystą biel (
#FFFFFF). - Wyeksportuj e-mail ponownie i wyślij test do aplikacji mobilnej Gmail, w której widzisz problem.
Gdy oba kolory są ustawione na czystą biel, Emailify dodaje dodatkowy kod zgodności, który ma zachować biały tekst przycisku. To obejście nie zachowuje czarnego ani innego niebiałego tekstu i nie blokuje koloru tła przycisku. Jeśli Twój projekt wymaga czarnego tekstu na jasnym tle, zostaw zamierzone kolory i przetestuj ten projekt osobno – zmiana tekstu na biały zmieniłaby projekt, a nie spełniła to wymaganie.
Jeśli wynik nadal różni się od projektu, skontaktuj się ze wsparciem i prześlij wyeksportowany HTML lub plik ZIP, zrzut ekranu, nazwę aplikacji pocztowej i urządzenia oraz kolory tekstu i tła, które chcesz zachować. Podaj też ustawienia, które już zostały wypróbowane. Szerszy opis pracy w trybie ciemnym i jej ograniczeń znajdziesz w artykule Projektowanie i testowanie w trybie ciemnym.
Kolumny układają się jedna pod drugą na desktopie w Gmailu
Niektórzy dostawcy usług e-mailowych (na przykład MailChimp) próbują modyfikować HTML e-maila przed wysyłką, przez co niektóre kolumny mogą w Gmailu na desktopie układać się jedna pod drugą zamiast w rzędzie.
Zwykle platformy modyfikują HTML po to, aby „wbudować” (inline) style w elementy HTML. Emailify jednak automatycznie wbudowuje wszystkie style CSS z góry, aby e-maile były gotowe do produkcji. Jeśli w opcjach HTML lub importu swojego dostawcy usług e-mailowych znajdziesz ustawienie, które „wyłącza” to wbudowywanie lub modyfikowanie, powinno to rozwiązać problem.
Jeśli nie wiesz, czy przyczyną jest dostawca usług e-mailowych, czy sam kod, wyślij sobie testowy e-mail z bezpłatnej usługi, takiej jak htmltest.email (która w żaden sposób nie modyfikuje HTML). Jeśli test z htmltest.email działa, to Twój dostawca usług e-mailowych modyfikuje HTML przed wysyłką.
Gmail na iOS wymusza minimalną wysokość linii
Jeśli ustawisz line-height na wartość mniejszą niż bieżący font-size, Gmail automatycznie zmieni ją na line-height:normal;. Wartości line-height:1, line-height:1em i line-height:100% działają zgodnie z oczekiwaniami, ale line-height:0.9, line-height:0.9em i line-height:99% zostaną zamienione na line-height:normal;.
To samo dotyczy wartości w px: font-size:20px; line-height:19px nie zadziała, ale font-size:19px; line-height:19px zadziała.
Aby rozwiązać problem, upewnij się, że wysokość linii w warstwie tekstowej jest równa rozmiarowi fontu lub od niego większa.
Aplikacja Gmail na iOS nie renderuje responsywnych stylów mobilnych
Najczęstszą przyczyną jest literówka w którejś właściwości CSS lub stylu w zapytaniu @media (na przykład padding-bottm zamiast padding-bottom) albo podział wiersza w środku właściwości stylu (na przykład padd nowy wiersz ing-top). Wtedy aplikacja Gmail zignoruje wszystkie pozostałe style i nie wyrenderuje żadnych responsywnych nadpisań mobilnych.
Nie powinno się to zdarzać w kodzie wyeksportowanym bezpośrednio z wtyczki, ale może wystąpić, jeśli ręcznie edytujesz kod HTML po eksporcie z Emailify (albo jeśli Twoja platforma e-mail marketingu modyfikuje kod lub dodaje limity długości wierszy).
Gmail błędnie tłumaczy e-maile napisane tylko po angielsku na inne języki
Jeśli e-mail składa się głównie z bloków obrazów bez tekstu sformatowanego albo zawiera wiele bloków obrazów przed tekstem umieszczonym niżej, Gmail czasem uznaje, że e-mail jest w innym języku, i proponuje przetłumaczenie go na angielski – mimo że Emailify automatycznie dodaje do tagów html i body atrybut lang="en".
Jak opisano w tej dyskusji na forum Litmus:
Ustaliliśmy (empirycznie), że wiadomości zawierające dużo CSS i HTML przed właściwą treścią są klasyfikowane jako angielskie, nawet jeśli treść jest w innym języku.
Nasze obejście polega na wysyłaniu wieloczęściowego e-maila z wersją tekstową i HTML, przy czym wersja tekstowa jest przed częścią HTML. Oczywiście tekst musi być konkretny, a nie tylko „Bonjour...”, bo inaczej tagi HTML i CSS nadal dominują.
Algorytm tłumaczenia nie wydaje się w ogóle próbować usuwać HTML i CSS z treści wiadomości, a jeśli to robi, to być może obcina wiadomość przed usunięciem kodu i zostaje mu bardzo mało treści do wykrycia języka. (Obecnie łatwo o >5000 znaków nagłówków i CSS przed pierwszym wierszem treści).
GIF-y
Zamiana filmów na animowane GIF-y do e-maili
Natywne tagi video niestety nie są obsługiwane w e-mailach HTML, dlatego najlepszym sposobem na dodanie animowanych obrazów lub treści wideo do projektów e-maili HTML jest użycie GIF-ów – pobranych z internetu albo stworzonych samodzielnie.
Jeśli masz już film, którego chcesz użyć jako GIF-a, możesz skorzystać z bezpłatnej aplikacji Gifski, która pomaga zamieniać krótkie pliki wideo na animowane GIF-y do projektów e-maili.
Jest też dobry poradnik wideo, który pokazuje różne sposoby używania GIF-ów w projektach Emailify i dołączania ich do eksportów HTML.
Kolory i gradienty w GIF-ach wyglądają na nieco ziarniste
GIF-y różnią się od zwykłych obrazów JPG i PNG, ponieważ mogą zawierać maksymalnie 256 kolorów. Jeśli używasz bardzo szczegółowych obrazów lub gradientów z dużą liczbą odcieni, to przez to ograniczenie formatu GIF wynik nie będzie tak ostry ani tak wierny kolorystycznie jak obrazy źródłowe.
Przezroczystość nie wyświetla się w GIF-ach
Format GIF obsługuje tylko krycie 0% albo 100%, bez wartości pośrednich. Oznacza to, że możesz mieć animowanego GIF-a z całkowicie przezroczystym tłem za elementami, które są całkowicie nieprzezroczyste i widoczne. Warstwy muszą więc być albo całkowicie przezroczyste, albo nie: warstwy o kryciu poniżej 50% będą przezroczyste, a warstwy o kryciu powyżej 50% – nieprzezroczyste.
Oznaczanie przezroczystych GIF-ów w Figmie. Emailify próbuje automatycznie wykryć, czy GIF ma przezroczyste tło. Jeśli Twój GIF wymaga przezroczystości, a wtyczka sama jej nie wykrywa, dodaj słowo Transparent w dowolnym miejscu nazwy warstwy w Figmie (na przykład My Layer Name - Transparent), aby wymusić eksport z przezroczystym tłem.
Zachowanie oryginalnego pliku GIF podczas eksportu (przez zachowanie proporcji)
Jeśli upuścisz GIF-a do Figmy i zmienisz rozmiar warstwy proporcjonalnie, zachowując oryginalne proporcje, Emailify automatycznie użyje w eksporcie oryginalnego pliku GIF.
Jeśli natomiast zmienisz proporcje warstwy w Figmie tak, że będą się różnić od oryginalnego GIF-a, Emailify będzie musiało odtworzyć GIF-a z uwzględnieniem przyciętego obszaru obrazu, co może zwiększyć rozmiar pliku GIF i wydłużyć eksport.
GIF nie wyświetla się w Gmailu (limit rozmiaru pliku)
Jeśli używasz GIF-ów w projekcie, ale nie widzisz ich po wysłaniu testu do skrzynki Gmail, prawdopodobnie przekroczony został limit pamięci podręcznej obrazów w Gmailu, przez co GIF się nie wyświetla.
Podczas eksportu do HTML Emailify próbuje skompresować duże GIF-y, aby zmieściły się w limicie rozmiaru pliku w Gmailu, co niemal zawsze rozwiązuje ten problem (chyba że GIF jest wyjątkowo długi, bardzo duży albo od początku ma bardzo wysoką liczbę klatek na sekundę).
Klaviyo
Edytor szablonów Klaviyo (czasem) się zawiesza, gdy w projekcie e-maila są GIF-y
Klaviyo ma losowy błąd, który powoduje Error 500 (wewnętrzny błąd serwera) i wyświetla stronę z komunikatem Something is amiss. We're on it.; wydaje się, że dzieje się to głównie wtedy, gdy szablon jest „Editable”.
Klaviyo wie o tym błędzie, ale wygląda na to, że nie planuje go naprawić w najbliższym czasie.
Jednym z obejść jest usunięcie GIF-a z projektu w Figmie przed eksportem HTML dla Klaviyo, a następnie osobne przesłanie GIF-a do Klaviyo, gdy edytor szablonów załaduje się bez tego błędu.
Dodatkowy padding wokół bloków tekstu w edytowalnych szablonach Klaviyo
Ponieważ Klaviyo zaktualizowało swój edytor i od 6 czerwca 2023 wymusza jego używanie we wszystkich szablonach, niestety jeśli eksportujesz e-maile HTML z włączonym przełącznikiem Editable Content w Emailify, Klaviyo domyślnie automatycznie dodaje ~18px dodatkowego paddingu wokół każdego elementu tekstowego jako wbudowany atrybut style nowego elementu td, który wstrzykuje do HTML edytowalnego szablonu.
Włączenie w Emailify przełącznika Force the padding added by Klaviyo's new editor to be 0px automatycznie dodaje CSS, który usuwa ten padding we wszystkich klientach mobilnych i w klientach desktopowych innych niż Outlook, takich jak Gmail. Outlook nadal jednak wyrenderuje padding, chyba że podczas edycji e-maila dla kampanii w edytorze Klaviyo ręcznie zmienisz na „0” wszystkie wartości „Padding” każdego edytowalnego bloku tekstu w szablonie.
Tekst podglądu w Klaviyo jest zduplikowany lub pokazuje dodatkową treść e-maila
Ustaw tekst podglądu tylko w jednym miejscu. Jeśli w Emailify jest już wpisany Preheader Text, zostaw własne pole tekstu podglądu w Klaviyo puste. Jeśli wolisz zarządzać tekstem podglądu w Klaviyo, zostaw preheader w Emailify pusty dla tego eksportu.
Jeśli Klaviyo nadal pokazuje dodatkową treść e-maila za zamierzonym tekstem podglądu, włącz Add Whitespace to Preview Text w opcjach eksportu Emailify i ponownie wyeksportuj e-mail. Dodaje to ukryty odstęp zgodności po niepustym preheaderze, ale sposób obsługi w skrzynkach odbiorczych może się nadal różnić między Klaviyo a różnymi klientami poczty.
Pełny opis pracy z preheaderem znajdziesz w artykule Ustawianie tematu i preheadera e-maili HTML.
MailChimp
Włączenie edytowalnych obrazów oznacza mniej ostre obrazy @1x (zamiast @2x retina)
Możesz opcjonalnie włączyć edycję obrazów w szablonie MailChimp przełącznikiem Editable Images, ale niestety MailChimp nie obsługuje edytowalnych obrazów @2x retina, więc będą to obrazy @1x.
Jeśli wolisz nieedytowalne obrazy @2x retina, zostaw tę opcję wyłączoną.
MailChimp usuwa style linków przy osadzaniu tagów <link> fontów Typekit
MailChimp usuwa style linków, gdy do e-maila zostanie dodany niestandardowy Typekit stylesheet. Konkretnie, jeśli w sekcji <head> umieścisz tag taki jak: <link rel="stylesheet" href="https://use.typekit.net/lml7iwl.css">
MailChimp usunie wszystkie atrybuty style z tagów <a>. Usunięcie tego tagu rozwiązuje problem i przywraca style linków.
Jeśli nadal chcesz używać fontów Typekit, możesz to zrobić za pomocą wbudowanej funkcji wtyczki Web Fonts. Zamiast linkować arkusz stylów, potrzebujesz bezpośredniego adresu URL pliku fontu .woff2 z pliku CSS Typekit (na przykład: https://use.typekit.net/...). Wklej ten adres URL w panelu Configure Fonts we wtyczce, a wtyczka automatycznie wygeneruje w HTML odpowiedni styl @font-face dopasowany do nazw fontów w Figmie. Więcej wskazówek znajdziesz w poradniku wideo krok po kroku.
Pamiętaj, że niestandardowe fonty webowe działają tylko w Apple Mail. Inne klienty poczty (takie jak Outlook czy Gmail) ich nie obsługują, dlatego zalecamy ustawienie we wtyczce bezpiecznego fontu zapasowego, który określi, co się wyświetli. Wielu użytkowników uważa, że najłatwiej projektować w Figmie od razu z bezpiecznymi fontami webowymi, ale dodanie niestandardowych fontów webowych może być miłym stopniowym ulepszeniem dla użytkowników Apple Mail.