Jak wstawić kod HTML w Quandzie
Oprócz klasycznego edytora, w którym e-mail składasz z poszczególnych bloków, możesz go także stworzyć za pomocą kodu HTML. Przy zakładaniu nowej kampanii wybierasz, czy chcesz stworzyć własny e-mail w naszym edytorze, czy zbudować go za pomocą HTML.
W drugim wariancie otworzy Ci się prosty ekran, gdzie po lewej wklejasz kod, a po prawej od razu widzisz podgląd, jak e-mail będzie wyglądał, jeszcze zanim go wyślesz.
Ta opcja przydaje się głównie w trzech przypadkach. Albo potrafisz sam pisać e-maile w HTML, masz gotowy szablon z innego narzędzia i chcesz go tylko przenieść do Quandy, albo kod tworzysz za pomocą narzędzi AI, takich jak ChatGPT czy Claude. We wszystkich przypadkach wystarczy wkleić kod i od razu widzisz wynik.
Dlaczego e-mail w HTML nie wygląda tak samo jak strona internetowa
Tu trzeba się na chwilę zatrzymać, bo właśnie to jest najczęstsze źródło rozczarowań. Kod, który na stronie lub w przeglądarce wygląda perfekcyjnie, w skrzynce pocztowej często się rozsypuje. Gmail, Outlook, WP, Onet i inne interpretują bowiem kod każdy trochę inaczej, a Outlook wyświetla e-maile nawet za pomocą technologii, której poza tym używa Word do pisania dokumentów. Dlatego w e-mailach wciąż stosuje się metody, których na zwykłych stronach internetowych już dawno się nie używa.
Jeśli więc piszesz e-mail sam lub generujesz go za pomocą AI, zalecamy trzymać się tych zasad.
1. Układ buduj na tabelach
Brzmi staromodnie, ale właśnie tabele (kod <table>) to jedyny sposób na układ, który niezawodnie wyświetlą absolutnie wszystkie skrzynki e-mail. Nowocześniejsze metody, powszechnie używane na stronach, w e-mailu często w ogóle sobie nie radzą, zwłaszcza w starszym Outlooku. Szerokość e-maila trzymaj w granicach 600 do 700 pikseli, to bezpieczny rozmiar, który mieści się w podglądzie we wszystkich skrzynkach.
2. Styl (kolory, rozmiar czcionki, odstępy) zapisuj bezpośrednio przy danym tekście lub obrazku
Jeśli styl zapiszesz tylko raz na górze kodu i potem będziesz się do niego odwoływać w tekście, część skrzynek albo całkowicie to zignoruje, albo uwzględni tylko połowicznie. Bezpieczniej jest zapisać styl bezpośrednio tam, gdzie jest używany, przy konkretnym tekście lub przycisku.
3. Licz się z tym, że obrazki mogą się nie wyświetlić
Wiele skrzynek pocztowych domyślnie blokuje obrazki. Do każdego obrazka zawsze dodaj więc opis (tekst ALT) i z góry podaj jego wymiary, żeby przy ładowaniu nie rozjechał Ci się wygląd e-maila. Tekst powinien mieć sens, nawet gdyby żaden obrazek się nie wyświetlił.
4. Używaj zwykłych, bezpiecznych czcionek
Ozdobne czcionki pobrane skądinąd w Outlooku i Gmailu w ogóle się nie wyświetlą. W kodzie zawsze podawaj także czcionki zastępcze, na przykład Arial lub Helvetica, żeby e-mail wyświetlił się ładnie, nawet jeśli główna czcionka się nie załaduje.
5. Nie rób e-maila niepotrzebnie ciężkim
Jeśli kod e-maila jest zbyt długi (rozmiar mniej więcej powyżej 100 kB), Gmail go przytnie, a odbiorca zobaczy tylko link „Wyświetl całą wiadomość". Może się więc zdarzyć, że Twojego głównego przekazu lub przycisku w ogóle nie zobaczy. Kod powinien być zatem jak najprostszy i bez niepotrzebnie powtarzanych stylów.
6. Przyciski rób jako tekst z kolorem tła, nie jako obrazek
Przycisk stworzony jako obrazek może się w ogóle nie wyświetlić, kiedy obrazki są zablokowane. Bezpieczniej jest zrobić przycisk jako zwykły tekst z kolorowym tłem i zaokrąglonymi rogami bezpośrednio w kodzie.
7. Przed wysyłką zawsze wyślij sobie e-mail na próbę
Podgląd w edytorze to dobry pierwszy krok, ale nie zastąpi wysłania e-maila do samego siebie na Gmaila, Outlooka albo na przykład WP i sprawdzenia, jak wygląda.
Zobacz też, jak wygląda na telefonie, bo przez telefon otwiera się dziś większość e-maili.
Przenosisz HTML z innych narzędzi lub tworzysz za pomocą AI?
Nawet jeśli e-mail stworzy Ci AI albo przenosisz go z innego narzędzia, na przykład z Canvy, wynik często nie jest od razu stuprocentowy. Nawet przy staraniach o przestrzeganie powyższych zasad zdarza się, że w jakimś kliencie pocztowym coś się rozjedzie, bo upilnowanie wszystkich wyjątków ręcznie jest trudne nawet dla doświadczonych koderów.
Jeśli więc kod HTML tworzysz gdzie indziej, a potem wklejasz go do Quandy, zawsze wyślij testowe e-maile do kilku skrzynek i sprawdź, czy wyświetla się tak, jak powinien.
Najpewniejszą drogą pozostaje nasz własny edytor. Jest zaprojektowany dokładnie tak, żeby gotowy e-mail działał niezawodnie w Gmailu, Outlooku, WP i innych klientach, i nie musisz polegać na tym, że AI lub inne narzędzie akurat trafi we wszystkie szczegóły.
Trzymam kciuki!
Štěpán Sedláček
P.S.
Popraw otwieralność swoich e-maili. Zapoznaj się z naszym kursem online: Jak skokowo zwiększyć otwieralność e-maili i zaciekawić więcej osób, żeby je przeczytały
