Platforma CDXP od QuarticOn umożliwia Ci tworzenie wiadomości e-mail w ramach kampanii lub automatyzacji w formacie standardowym (czyli za pomocą kreatora drag&drop) lub HTML. W tym artykule dostarczamy Ci garść dobrych praktyk, które ułatwią Ci tworzenie wiadomości HTML i pozwolą uniknąć problemów.

Ogólna zasada dotycząca rozmiaru wiadomości e-mail to zachowanie szerokości 650 pikseli lub mniejszej. Zastosowanie się do tej zasady pozwala na prawidłowe wyświetlanie wiadomości e-mail w większości klientów poczty e-mail.

W przypadku projektowania e-maili HTML prostota to najlepszy doradca. Jeśli Twój projekt będzie zbyt skomplikowany, napotkasz wiele problemów podczas testowania i debugowania klienta poczty e-mail. Jeśli jednak chcesz zaryzykować, przygotuj się na korzystanie z wielu tabel i wygospodaruj odpowiednią ilość czasu na testowanie.

Aby stworzyć ogólny układ wiadomości, użyj standardowych tabel HTML. Techniki pływające i układowe CSS nie będą poprawnie renderowane we wszystkich klientach poczty e-mail.

Program Outlook pobierze padding z dowolnej komórki w rzędzie i zastosuje je do wszystkich komórek w rzędzie. Może to spowodować zmiany wizualne, których nie chcesz. Spróbuj zastosować ten sam padding dla wszystkich komórek w rzędzie lub umieść wewnętrzny div lub tabelę (z paddingiem) w komórce, w której chcesz mieć padding.

Niektóre programy poczty e-mail nie obsługują ich w pełni, a inne, przy użyciu colspans, mogą mieć problemy z wyświetlaniem innych komórek.

Zewnętrzne arkusze stylów nie będą działać w wielu klientach poczty e-mail – uwzględnij wszystkie CSS za pomocą wbudowanego CSS w swoim HTML.

Wiele klientów poczty e-mail nie obsługuje klas CSS. Zamiast nich, użyj wbudowanego CSS, np. <div style="color:#cccccc;">treść</div> zamiast <div class="cssclassa">treść</div>.

CSS pozwala na ustawianie właściwości w grupach. Przykładowo, zamiast grupować takie atrybuty, jak style="font: 12px, Arial" ustaw każdą część indywidualnie tj. style="font-size:12px; font-family:Arial".

Niektórzy klienci poczty elektronicznej zignorują zarówno opcje CSS float jak i position. Zamiast tego spróbuj użyć tabel.

Zamiast dołączać obrazek taki jak (<img src="img.gif">) dołącz adres URL do pliku (<img src="http://site.com/img.gif">).

Większość klientów poczty elektronicznej domyślnie wyłącza obrazki. Jeśli nie dodasz atrybutów alt, Twoi odbiorcy w miejscu obrazka zobaczą tylko puste pole. Dzięki atrybutom alt zobaczą opis obrazka, czyli tekst, który został w nim umieszczony.

Nie dodawaj bezpośrednio do wiadomości e-mail filmów wideo i/lub flash. Wielu klentów poczty e-mail nie obsługuje takiego kodu, a programy wykrywające spam i wirusy oznaczą Twoją wiadomość jako niepożądaną. Rozwiązaniem w tej sytuacji będzie dodanie samej okładki filmu (np. zrzut ekranu), a następnie dodanie do niego linka, który po kliknięciu przekieruje odbiorcę do filmu, otwierając go w nowym oknie w przeglądarce.

Chociaż dodawanie GIFów jest bardzo przydatne w e-mail marketingu, przy tworzeniu wiadomości HTML odradzamy tę opcję. Podczas gdy większość klientów poczty e-mail obsługuje animowane pliki GIF, program Outlook 2007 tego nie robi. Programy poczty e-mail, które nie obsługują animowanych plików GIF, prawdopodobnie pokażą tylko pierwszą klatkę sekwencji animacji.

Jeśli używasz większego obrazu, który jest łączony i umieszczony w kodzie HTML za pomocą komórek tabeli lub tagów img tuż obok siebie, musisz dokładnie przetestować jego wyświetlanie. Niektóre programy poczty e-mail mogą dodawać dodatkowe odstępy między obrazami i powodować, że wiadomość będzie źle wyglądać.

Niektórzy użytkownicy stosują obrazy 1- lub 2-pikselowe, aby wyrównać elementy w układzie wiadomości. Istnieje jednak ryzyko, że programy/filtry poczty e-mail uznają, że jest to obraz, który służy śledzeniu odczytu/otwarcia wiadomości i, w efekcie, zablokują Twoją wiadomość.

Ponieważ większość klientów poczty e-mail domyślnie wyświetla wiadomości e-mail z wyłączonymi obrazami, bardzo ważne jest sprawdzenie, jak wygląda wiadomość e-mail właśnie z opcją wyłączonych obrazów.

Podobnie jak w przypadku projektowania stron internetowych, zwróć uwagę na rozmiary plików graficznych w swoich e-mailach. Staraj się utrzymywać je na niskim poziomie, aby zapewnić swoim subskrybentom szybkie pobieranie treści.

Jeśli używasz obrazków w tle pamiętaj, że niektóre programy poczty e-mail nie będą ich wyświetlać. Jeśli jednak nadal chcesz ich użyć, skorzystaj z opcji tła HTML zamiast CSS.

Wiele programów poczty e-mail (takich jak Gmail) nie pokazuje koloru tła, który ustawiasz dla głównego widoku (tag <body>). Jeśli więc ustawiasz kolor tła w tagu <body> użyj także div wrapping z kolorem tła, który otoczy całą zawartość wiadomości.

Wszystko, co umieścisz nad tagiem <body>, prawdopodobnie będzie usunięte i nie zostanie wyświetlone.

Javascript prawdopodobnie zostałby usunięty w większości klientów poczty e-mail, a niektóre filtry spamu mogłyby wykryć go jako kod złośliwy i niepożądany.

Wygenerowany kod HTML prawie zawsze oznacza problemy. Dodatkowo, gdy kopiujesz i wklejasz kod z pakietu Office wkleisz jednocześnie jego formatowanie, a to spowoduje problemy z dalszym projektowaniem wiadomości.

Zobacz także: