Aktualnie na rynku dostępnych jest wiele programów i klientów pocztowych. Należy pamiętać, że ten sam newsletter może być wyświetlany różnie na różnych platformach pocztowych. Dlatego przygotowaliśmy kilka wskazówek, które pomogą Ci odpowiednio przygotować mailing w formacie HTML. Przestrzeganie tych wytycznych zminimalizuje ryzyko występowania różnic w wyświetlaniu tego samego newslettera.

Kodowanie

Kod mailingu powinien być oparty na strukturze tabel i zgodny ze specyfikacją HTML 4.01,  Powinien być wolny od błędów i zgodny ze standardem W3C. Unikaj umieszczania JavaScript’u, animacji Flash oraz pozycjonowania (position: absolute i position: relative). Nie korzystaj również z nowoczesnych układów Flexbox i CSS Grid ani ze znaczników HTML5 (np. <header>, <nav>, <article>, <section>, <figure>). Rekomendujemy także, aby nie używać znaczników strukturalnych i formularzy, takich jak <p>, <h1>–<h6> czy <form> – struktura treści oraz nagłówki powinny być realizowane wyłącznie za pomocą komórek tabeli (<td>) i stylów inline.

W sekcji <head> dokumentu należy zawrzeć deklarację widoku dla urządzeń mobilnych: <meta name=”viewport” content=”width=device-width, initial-scale=1″>, która zapewnia prawidłowe skalowanie i renderowanie szablonu na ekranach smartfonów oraz tabletów.

Jeśli używasz polskich czcionek lub znaków specjalnych, zalecamy kodowanie w standardzie UTF-8 (ewentualnie ISO-8895-2, pamiętając, że to kodowanie ma mniejszą bibliotekę znaków). Upewnij się, że deklaracja kodowania pliku index.html i index.txt jest zgodna z używanym kodowaniem.

Szerokość kreacji

Rekomendowana szerokość kreacji to 600px, ponieważ większość klientów pocztowych posiada właśnie taką szerokość okna podglądu. Wszystkie style należy umieszczać inline w poszczególnych znacznikach, nie umieszczając ich w sekcji head, gdyż programy pocztowe bardzo często wycinają nagłówek dokumentu.

Aby pozbyć się niepotrzebnych marginesów i odstępów, dodaj do znacznika tabeli trzy kluczowe atrybuty: border=”0″, cellpadding=”0″ oraz cellspacing=”0″. Do wypośrodkowania tabeli na ekranie użyj atrybutu align=”center”. W celu ustawienia marginesów wewnętrznych możesz dodać puste komórki tabeli lub użyć stylu padding-top lub padding-bottom w komórkach <td>, pamiętając przy tym o uwzględnieniu jego wartości w całkowitej szerokości komórki. Jeżeli chcesz dodać obramowanie, najlepiej umieścić je jako styl konkretnej komórki, na przykład style=”border: 1px solid #000000;”. Tło całej wiadomości lub poszczególnych sekcji można ustawić jako jednolity kolor, używając atrybutu bgColor=”#ffffff” bezpośrednio w komórce <td>.

Grafiki

Zalecanymi formatami plików są .jpg, .png oraz .gif.

Nazwy plików graficznych nie powinny zawierać spacji, myślników, polskich znaków ani symboli specjalnych – należy stosować wyłącznie małe litery, cyfry oraz znak podłogi. Długość nazwy pliku grafiki nie powinna przekraczać 35 znaków. Warto również pamiętać o umieszczeniu opisowego tekstu alternatywnego w znacznikach img za pomocą atrybutu alt, co pozwoli odbiorcy zrozumieć przekaz w przypadku zablokowania pobierania obrazów przez program pocztowy oraz jest dobrą praktyką dla WCAG. Aby usunąć niechciane puste odstępy pojawiające się pod grafikami w serwisach Gmail, WP czy Onet, dodaj do każdego znacznika img atrybuty border=”0″ oraz style=”display: block;”.

Grafiki w tle nie są wyświetlane w programach z rodziny Microsoft Outlook, dlatego zalecamy unikanie tego rozwiązania i umieszczanie obrazów w tradycyjny sposób. 

Czcionki

W kreacjach e-mail najlepiej używać bezpiecznych, standardowych czcionek systemowych, takich jak Arial czy Times New Roman. Formatowanie tekstu należy definiować inline bezpośrednio w znaczniku komórki tabeli td, na przykład: <td style=”font-family: Arial, sans-serif; font-size: 10px; color: #000000;”>text</td>

Jeśli chcesz użyć innych czcionek, pamiętaj, że w przypadku braku wybranego fontu na urządzeniu odbiorcy system automatycznie wyświetli kolejną wskazaną w kodzie czcionkę zapasową. Dobrym przykładem jest czcionka Calibri, która jest standardem na urządzeniach z systemem Windows, ale nie występuje domyślnie w systemie iOS na urządzeniach firmy Apple (iPhone, iPad). Zdefiniowanie w komórce tabeli zapisu style=”font-family: Calibri, Arial, sans-serif;” sprawi, że użytkownik sprzętu Apple zamiast niedostępnej czcionki Calibri zobaczy bezpieczny Arial, dzięki czemu wygląd wiadomości pozostanie spójny. Należy przy tym pamiętać, że każdy font jest inny (rozmiar liter, odstępy), co może powodować różnice w układzie tekstu i wyglądzie kreacji.

Paczka .zip

Prawidłowo przygotowana paczka .zip do importu do systemu SARE powinna zawierać plik index.html z kodem kreacji, plik index.txt z wersją tekstową przygotowaną w tym samym kodowaniu co plik HTML oraz grafiki, do których odwołuje się kod. Nazwa pliku .zip powinna składać się wyłącznie z liter (bez polskich znaków), cyfr lub znaku podłogi.

Plik zawierający wersję HTML musi być nazwany index.html lub index.htm, przy czym wielkość liter ma znaczenie. Plik ten nie może znajdować się w żadnym podkatalogu – musi leżeć bezpośrednio w katalogu głównym archiwum. Dołączenie wersji tekstowej w pliku index.txt jest niezwykle ważne, ponieważ jej obecność znacząco obniża punktację antyspamową wiadomości. Wszystkie grafiki mogą znajdować się w katalogu głównym lub w osobnym folderze, pod warunkiem zachowania poprawnych ścieżek w kodzie. Całkowita waga paczki .zip nie powinna przekraczać 100–150 kB, przy czym sam plik index.html nie powinien ważyć więcej niż 102 kB, aby uniknąć obcinania widoku wiadomości przez pocztę Gmail.

Testowanie i wysyłka

Przed wysyłką zalecamy przetestowanie wyświetlania wiadomości w popularnych przeglądarkach oraz na popularnych platformach pocztowych, takich jak Gmail, WP, Interia, Onet, O2, Outlook czy Thunderbird. Na samej górze kreacji warto umieścić link do podglądu www, który pozwoli użytkownikowi na otwarcie wiadomości w przeglądarce w przypadku problemów z wyświetlaniem. W tym celu użyj stopki SARE: <a href=”%www_version%”>.

Należy również pamiętać o bezwzględnym umieszczeniu w stopce obu wersji (index.html oraz index.txt) linku umożliwiającego wypisanie się z newslettera (także są w stopkach SARE), co stanowi wymóg prawny RODO i chroni reputację domeny. Do wyboru jest standardowy link <a href=”%remove_link%”> lub wersja, która przekierowuje użytkownika do krótkiego formularza badania przyczyn rezygnacji <a href=”%remove_link2%”>.