Najczęstsze błędy w kodowaniu wiadomości e-mail i jak ich uniknąć

Pomimo wszystkich dzwonków i gwizdów twojego e-maila, błędy w kodowaniu mogą go całkowicie zrujnować. Tylko jeden niepoprawnie skrócony link lub zły format koloru — a Twoja poczta będzie wyglądać fatalnie, zwłaszcza jeśli użytkownik zdecyduje się sprawdzić ją za pomocą smartfona zamiast internetowego klienta poczty e-mail lub przełączy się na gadżet o innej rozdzielczości ekranu.

W tym poście opowiemy o typowych błędach w kodowaniu wiadomości e-mail w formacie HTML i podzielimy się wskazówkami, jak ich uniknąć.

Skąd biorą się problemy z wyświetlaniem wiadomości e-mail?

Mówiąc prościej, istnieją dwa możliwe powody, dla których użytkownik widzi Twoją wiadomość e-mail niezgodnie z planem. Pierwsza z nich związana jest z charakterystyką techniczną urządzenia Twojego użytkownika. Drugi to klient poczty, a dokładniej jego silnik renderujący.

Charakterystyka techniczna urządzenia użytkownika

Istnieją co najmniej dwie cechy techniczne każdego urządzenia, które należy wziąć pod uwagę:

1. Rozdzielczość ekranu — rozmiar ekranu wyrażony w pikselach. Na przykład iPhone X ma rozdzielczość ekranu 1125×2436 pikseli. Jeśli wiadomość e-mail zawiera dwie kolumny tekstu, po 600 pikseli każda, nie będzie ona wyświetlana poprawnie.
2. PPI lub piksele na cal — liczba pikseli w jednym calu ekranu. PPI iPhone'a X to 458. Wyobraź sobie: musisz dodać przycisk akcji do wiadomości e-mail. Jeśli przycisk ma mniej niż 44 punkty, co w przypadku iPhone'a X oznacza 132×132 piksele, zajmie on mniej niż jedną trzecią cala kwadratowego powierzchni ekranu, a użytkownik nie będzie w stanie go dotknąć.

Jeszcze jedna rzecz, o której należy pamiętać: użytkownicy często obracają swoje urządzenia mobilne, więc Twój e-mail powinien wyglądać schludnie i mieć pełną funkcjonalność zarówno w widoku pionowym, jak i poziomym.

Aby zapobiec problemom związanym z charakterystyką techniczną urządzenia użytkownika, powinieneś używać responsywnego projektu wiadomości e-mail.

Najpierw należy dodać zapytania o media w head e-maila. Na przykład @media screen i (max-width: 600px) oznacza, że ​​projekt wiadomości e-mail zostanie zoptymalizowany, jeśli szerokość ekranu jest mniejsza niż 600 pikseli. Jeśli szerokość ekranu przekracza 600 pikseli, użytkownik zobaczy wersję tego e-maila o stałej szerokości.

Po drugie, powinieneś utworzyć wiadomość e-mail w formie tabeli z komórkami:

 <tabela>
<tr>
    <td>...</td>
</tr>
</table>

Następnie dodajesz styl dla każdej komórki, na przykład:

 <td><img src="http://somewebsite.com/someimage.jpg" width="600" alt=""></td>

Jednak nawet po podjęciu tych kroków nadal możesz mieć problemy z wyświetlaniem swoich e-maili. Źródłem problemu jest silnik renderujący klienta poczty e-mail.

Klient poczty e-mail

Drugim źródłem możliwych problemów z wyświetlaniem jest klient poczty e-mail, którego Twoi odbiorcy używają do otwierania Twoich kampanii. Podstawową częścią klienta poczty e-mail jest silnik renderujący. Odbiera wiadomość e-mail jako długi skrypt kodu, przetwarza ją i wyświetla w sposób, w jaki przywykliśmy do otrzymywania wiadomości e-mail: zrozumiały, uporządkowany i sformatowany tekst z obrazami, linkami i innymi mediami.

Spójrz na poniższy przykład. To fragment kodu z promocyjnej wiadomości e-mail — tak, jak widzi go silnik renderujący Gmaila. Jeśli ten e-mail został wyświetlony w ten sposób potencjalnemu klientowi, z trudem przebiją się przez kod i zrozumieją, że jest kod promocyjny z 40% rabatem.

Każdy klient pocztowy ma swój własny silnik renderujący, co oznacza, że ​​ta sama wiadomość e-mail, otwierana za pośrednictwem różnych klientów pocztowych, może mieć zupełnie inny wygląd.

Oto lista najpopularniejszych klientów poczty e-mail na całym świecie. Oczywiście Twoi odbiorcy używają jednego lub nawet kilku z nich do otwierania wysyłanych e-maili.

Wszystkie te klienty poczty e-mail mają pewne cechy szczególne, które należy wziąć pod uwagę podczas kodowania wiadomości e-mail w formacie HTML.

Na przykład Apple Mail na iOS nie obsługuje:

• właściwość CSS w inline-size ;
• @media (orientation) zapytanie o media;
• linki kotwiczne;
• Formaty obrazów HDR, PPM, SVG i inne.

Gmail obsługuje różne właściwości CSS i zapytania o media oprócz:

• box-shadow, text-shadow, i kilka innych właściwości CSS;
• @media (prefers-color-scheme) i nie tylko.

Typowe błędy w kodowaniu wiadomości e-mail i jak ich uniknąć

Najlepszą ogólną radą dotyczącą unikania błędów w kodowaniu wiadomości e-mail jest ograniczenie zasobów do kodu obsługiwanego przez większość klientów poczty e-mail, bez względu na to, jak stare są ich wersje. W prostych słowach, aby cofnąć się i kodować tak, jakby to był rok 1999. Na przykład powszechnie zaleca się użycie:

• CSS2 zamiast CSS3,
• HTML4 zamiast HTML5,
• kolor zamiast obrazów tła,
• table-layout zamiast <div> ,
• wbudowany CSS zamiast zestawów stylów lub bloków <style> .

Uważa się, że takie podejście zapobiega większości problemów z wyświetlaniem wiadomości e-mail. Przyjrzyjmy się jednak bliżej niektórym błędom w kodowaniu, które mogą zrujnować Twój e-mail, i spróbujmy znaleźć rozwiązanie.

Brak wersji tekstowej

Potencjalne problemy. Niektóre klienty poczty e-mail, takie jak Outlook i Gmail, mogą definiować pocztę e-mail jako spam, jeśli nie ma wersji tekstowej. Co więcej, czasami klienci poczty mają problemy z renderowaniem kodu HTML. Z tego powodu wiadomości e-mail w formacie HTML mogą być wyświetlane nieprawidłowo, podczas gdy wiadomości e-mail w formacie zwykłego tekstu zawsze wyglądają tak samo.

Zapobieganie. Dodaj wersję tekstową do wiadomości e-mail. Na szczęście większość dostawców usług poczty e-mail dodaje ją automatycznie.

Możesz zaimplementować e-maile w postaci zwykłego tekstu do swojej strategii e-mail marketingu. Przede wszystkim takie e-maile wyglądają na bardziej osobiste, a tym samym mogą usprawnić komunikację z subskrybentami. Co więcej, niektórzy wolą przejść od razu do sedna wiadomości, a kolorowy układ ich odstrasza.

Korzystanie z JavaScript, ActiveX, Flash i innych tego rodzaju

Potencjalne problemy. Większość klientów poczty e-mail nie obsługuje tych języków, struktur i wtyczek, więc część wiadomości e-mail nie zostanie wyrenderowana, a Twoi subskrybenci nie zobaczą nic poza pustą przestrzenią. Ponadto e-mail może zostać zablokowany przez oprogramowanie antywirusowe.

Zapobieganie. Zachowaj języki używane do kodowania wiadomości e-mail w HTML i CSS. Jeśli potrzebujesz dodać jakiś film lub dźwięk, prześlij go na stronę internetową i podaj do niego link.

Zobacz, jak NiftyImages prezentuje nowe funkcje produktu: firma wybrała sekwencję obrazów, chociaż może to być film objaśniający.

Za dużo przekierowań

Potencjalne problemy. Przekierowania, choć potrzebne do analiz, mogą wyrządzić więcej szkody niż pożytku Twojej wiadomości e-mail. Na przykład znacznie wydłużają czas ładowania strony internetowej. Wtedy istnieje możliwość, że przeglądarka użytkownika blokuje przekierowania — w ten sposób adres URL będzie niedostępny.

Zapobieganie. Staraj się unikać przekierowań. Ale jeśli nadal musisz z nich korzystać, sprawdź, ile czasu zajmuje wczytanie docelowego adresu URL — przetestuj swój e-mail przed uruchomieniem całej kampanii. Rozważ wrażenia swoich subskrybentów: czy chcą czekać na wczytanie adresu URL, czy nie.

Skrócone linki

Potencjalne problemy. Skrócone linki narażają Twoje e-maile na trafienie do folderu spamu. Chodzi o to, że w skróconych linkach docelowy adres URL jest niejasny. W prostych słowach może prowadzić wszędzie. Oczywiście wykorzystują to hakerzy i spamerzy.

Zapobieganie. Nie używaj skróconych linków. Jeśli Twoim celem jest, aby Twoja poczta e-mail wyglądała schludnie, bez długich adresów URL, lepiej użyj następującego tagu HTML: <a href="URL">...</a> . Tutaj możesz wstawić dowolny adres URL, bez względu na to, jak długi jest on.

Jeśli nadal jesteś spragniony skróconych linków, skróć własne adresy URL zamiast korzystać z narzędzi innych firm. Przynajmniej wcześniej przeskanuj czarne listy skracaczy linków.

Duży rozmiar pliku treści wiadomości e-mail

Potencjalne problemy. Zarówno klienci poczty e-mail, jak i dostawcy usług poczty e-mail mają ograniczenia dotyczące rozmiaru treści wiadomości e-mail, ponieważ są zaprojektowane do przesyłania stosunkowo niewielkich ilości informacji. Jeśli nie mieścisz się w tych limitach, Twój e-mail może zostać obcięty — jego zakończenie będzie ukryte.

Zajrzyj do biuletynu wydanego przez wytwórnię muzyczną. Po otwarciu przez Gmaila jest obcinany.

Aby zobaczyć jego pełną wersję, subskrybent musi kliknąć link.

Duży rozmiar pliku treści wiadomości e-mail może również powodować problemy z dostarczalnością. Co więcej, ze względu na duży rozmiar wiadomość e-mail może zostać uznana za zagrożenie bezpieczeństwa przez oprogramowanie antywirusowe użytkownika.

Zapobieganie. Sprawdź limity rozmiaru treści wiadomości e-mail Twojego dostawcy usług poczty e-mail i klientów poczty e-mail, z których korzystają Twoi subskrybenci. Na przykład Google twierdzi, że limit rozmiaru wiadomości e-mail wynosi 200 KB. Jednak powszechnie zaleca się ograniczenie wiadomości e-mail do 100 KB w celu spełnienia wymagań większości klientów poczty e-mail. W rzeczywistości e-mail z powyższego przykładu ma rozmiar 136 KB.

Za dużo czcionek i kolorów

Potencjalne problemy. Ze względu na różnice między klientami poczty e-mail nie wszystkie czcionki i kolory mogą być wyświetlane poprawnie. Co więcej, nie wszystkie czcionki i kolory dobrze się ze sobą łączą — ryzykujesz więc stworzeniem słabego projektu wiadomości e-mail.

Pamiętaj też, że urządzenia Twoich subskrybentów mają różne ustawienia ekranu – na przykład jasność. A gdy próbujesz ożywić swoje e-maile, użytkownicy mogą cierpieć z powodu tej burzy kolorów.

To wątpliwy przykład projektowania wiadomości e-mail: każdy blok ma swoje własne kolory; to mnóstwo odwraca uwagę użytkownika od najważniejszych informacji.

Zapobieganie . Wybierz czcionki przyjazne dla poczty e-mail, takie jak Arial, Comic Sans MS, Courier New, Times New Roman lub Verdana: są one obsługiwane przez większość popularnych klientów poczty e-mail. Rozmiar czcionki tekstu nie powinien być mniejszy niż 12-13 pikseli; w przeciwnym razie użytkownik będzie musiał powiększyć Twój e-mail lub wytężyć wzrok.

Jeśli chodzi o kolory, nie powinieneś używać więcej niż dwóch: jednego do ogólnego bloku tekstu, a drugiego do podkreślenia ważnych rzeczy, a także do linków i przycisków. Upewnij się, że wybrane kolory pasują do tła i dobrze wyglądają, gdy użytkownik przełączy się na tryb ciemny.

Kopiowanie kodu HTML szablonu wiadomości e-mail z edytora tekstu lub strony internetowej

Potencjalne problemy. Jeśli używasz programu Microsoft Word lub czegoś w tym rodzaju, aby utworzyć tekst do wiadomości e-mail, a następnie po prostu go skopiować, ryzykujesz złapanie niepotrzebnego formatowania, które może zepsuć układ wiadomości e-mail. A jeśli skopiujesz obrazy lub niektóre części tekstu ze strony internetowej, do wiadomości e-mail mogą zostać dodane elementy JavaScript lub Flash.

Zapobieganie. Aby zakodować wiadomość e-mail, użyj edytorów tekstu, które nie dodają własnego formatowania, takich jak Notatnik dla systemu Windows lub TextEdit dla komputerów Mac. Istnieje również kilka narzędzi online, które mogą wyczyścić formatowanie, takie jak TextCleanr. Możesz również skorzystać z narzędzia HTML Cleaner, które pozwala stworzyć wiadomość e-mail w przyjaznym dla użytkownika edytorze i jednocześnie sprawdzić kod.

Korzystanie z trzycyfrowych kodów kolorów HEX

Potencjalne problemy. Chociaż trzy- i sześciocyfrowe formaty kolorów powinny być równoważne, czasami klienci poczty e-mail renderują trzycyfrowy format w nieco inny sposób. Na przykład w przypadku Gmaila ryzykujesz, że zamiast czarnego, który zaplanowałeś, stanie się fioletowy: color: #000 zmieni się w color: #500050 .

Zapobieganie . Zasadniczo trzymaj się sześciocyfrowego formatu kolorów i upewnij się, że używasz go w całej wiadomości e-mail.

Załączniki

Potencjalne problemy. Zwykle spamerzy i hakerzy dołączają pewne pliki do swoich wiadomości e-mail. Jeśli dodasz załącznik, może to zostać uznane za zagrożenie bezpieczeństwa.

Zapobieganie. Podaj link do strony ładowania pliku zamiast dodawać plik bezpośrednio do wiadomości e-mail.

Oto przykład, jak możesz przyznać użytkownikom dostęp do obiecanego pliku. Zwróć uwagę na oznaczenie linku: powinien to być fragment zrozumiałego tekstu, który można kliknąć, aby użytkownik wiedział, co się stanie, gdy kliknie link.

Brak tekstu alternatywnego

Potencjalne problemy . Niektórzy użytkownicy wyłączają pobieranie obrazów w swojej przeglądarce. Jeśli otrzymają wiadomość e-mail, w tym obrazy bez tekstu alternatywnego, zobaczą tylko puste miejsca zamiast obrazów i nie zrozumieją sensu wiadomości e-mail.

Działa to tak samo, gdy czyjeś połączenie internetowe jest zbyt niskie, aby wystarczająco szybko pobrać obrazy. Tekst alternatywny pomaga rozwiązać ten problem w pewien sposób: gdy pobieranie obrazów nie powiedzie się, użytkownik może zamiast tego zobaczyć tekst.

Zapobieganie. Dodaj atrybut alt do wszystkich używanych obrazów. Upewnij się, że robisz to poprawnie — dodając go do tagu img : <img alt="text"> . Ogranicz tekst alternatywny do 125 znaków, łącznie ze spacjami. Zwykle wystarczy dodać kilka słów, które precyzyjnie opisują obraz. Jeśli zostało Ci trochę miejsca, możesz dodać kontekst do tego opisu.

Zobacz fragment e-maila od Sephory.

Jeśli sprawdzisz kod tego e-maila, możesz znaleźć wezwanie do działania jako tekst alternatywny dla obrazu. Nawet jeśli użytkownicy nie widzą obrazu, nadal zrozumieją, co oferuje marka.

Układ zawierający tylko obraz

Potencjalne problemy. Jeśli Twój e-mail składa się tylko z obrazów i nie zawiera tekstu, możesz napotkać problemy z dostarczalnością, wyświetlaniem i nie tylko. Na przykład, jeśli użytkownik zablokuje pobieranie obrazu, dosłownie nic nie zobaczy w wiadomości e-mail. Po drugie, duża liczba obrazów zwiększa rozmiar treści wiadomości e-mail, a klienci poczty e-mail prawdopodobnie ją przycinają. Po trzecie, użytkownik nie będzie mógł znaleźć Twojej wiadomości e-mail w folderze za pomocą wyszukiwania według słowa.

Zapobieganie. Tworząc wiadomość e-mail, połącz tekst i obrazy. Nie zapomnij dodać zwykłej wersji tekstowej wiadomości e-mail i tekstu alternatywnego dla obrazów; weź pod uwagę inne porady, które podaliśmy powyżej.

Spójrz na ten e-mail od Ecwid. Ma responsywny projekt, który obejmuje układ tabeli i zapytania o media, takie jak max-width: 570px . E-mail łączy różne rodzaje treści: kolorowy, urzekający obraz i tekst. Używany jest sześciocyfrowy format koloru, na przykład color:#979797 lub color:#4A4A4A . W e-mailu nie ma wielu obrazów, więc jego rozmiar nie jest zbyt duży. Co więcej, w e-mailu nie znajdziesz ani skróconych linków, ani przekierowań. Ogólnie rzecz biorąc, ten e-mail spełnia większość zaleceń podanych powyżej.

Rzuciliśmy więc okiem na najczęstsze błędy w kodowaniu wiadomości e-mail w formacie HTML. Zastosuj się do naszych rad i nie zapomnij przetestować swoich e-maili przed wysłaniem: użyj co najmniej trzech popularnych klientów poczty e-mail, aby otworzyć pocztę; jeśli to możliwe, sprawdź to również za pomocą różnych urządzeń. Przydadzą się też emulatory.

Jeszcze jeden sposób na uniknięcie błędów w kodowaniu wiadomości e-mail

Jest jedna prawda: nie popełnisz błędów w kodowaniu HTML, jeśli nie będziesz kodować. Na szczęście dzięki SendPulse czeka na Ciebie projektowanie e-maili bez kodu.

Dzięki naszemu intuicyjnemu edytorowi „przeciągnij i upuść” zapobiegliśmy już pomyłkom w kodowaniu wiadomości e-mail. Po prostu dodaj obrazy, tekst lub wideo do wiadomości e-mail, ustaw czcionki i kolory, aby pasowały do ​​stylu Twojej marki i dodaj linki do stron w mediach społecznościowych.

Aby wszystko było jeszcze prostsze, możesz wybrać jeden z naszych darmowych szablonów wiadomości e-mail. Wszystkie e-maile utworzone za pomocą SendPulse są responsywne, więc będą wyglądać dobrze bez względu na to, na którym urządzeniu użytkownik zdecyduje się je otworzyć.

Lista kontrolna pozwalająca uniknąć typowych błędów w kodowaniu wiadomości e-mail w formacie HTML

Poniżej znajdziesz główne zasady unikania typowych błędów w kodowaniu wiadomości e-mail w formacie HTML. Przestrzegając tych zasad, możesz uniknąć problemów z dostarczalnością i wyświetlaniem wiadomości e-mail.

• Dodaj wersję tekstową do swoich e-maili.
• Nie używaj JavaScript, ActiveX, Flash ani innych tego typu. Jeśli potrzebujesz dodać jakiś film lub dźwięk, prześlij go na stronę internetową i podaj do niego link.
• Staraj się unikać przekierowań, aby nie wydłużać czasu ładowania strony internetowej.
• Nie używaj skróconych linków — przekształć fragment tekstu lub obraz w link za pomocą HTML.
• Spróbuj ograniczyć rozmiar treści wiadomości e-mail do 100 KB — lub przynajmniej sprawdź ograniczenia dostawcy usług wysyłających i klientów poczty e-mail, z których najczęściej korzystają Twoi subskrybenci.
• Wybierz czcionki przyjazne dla poczty e-mail, takie jak Arial, Comic Sans MS, Courier New, Times New Roman lub Verdana.
• Staraj się nie łączyć więcej niż dwóch kolorów w jednym e-mailu — w przeciwnym razie będzie to rozpraszać.
• Nie kopiuj tekstu i obrazów do wiadomości e-mail z edytorów tekstu, takich jak MS Word lub witryn internetowych: istnieje ryzyko przechwycenia niepotrzebnego formatowania.
• Użyj sześciocyfrowego formatu koloru.
• Nie dołączaj plików — zamiast tego podaj link do strony ładowania pliku.
• Nie zapomnij dodać tekstu alternatywnego do obrazów.
• Nie twórz wiadomości e-mail zawierających tylko obrazy — zawsze dodawaj tekst.
• Nie zapomnij przetestować wiadomości e-mail przed rozpoczęciem kampanii. Użyj co najmniej trzech klientów poczty e-mail i różnych urządzeń.

A żeby nie myśleć o tym wszystkim — zacznij korzystać z SendPulse za darmo!