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).
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 jest zgodna z używanym kodowaniem.
Szerokość kreacji
Rekomendowana szerokość kreacji to 600px. Większość klientów pocztowych posiada taką szerokość okna. Wszystkie style należy umieszczać inline, nie umieszczając ich w sekcji <head>. Aby ustawić marginesy, możesz dodać puste komórki lub użyć stylu padding w komórkach (pamiętaj o uwzględnieniu szerokości komórki).
Aby pozbyć się niepotrzebnych marginesów i odstępów, dodaj do znacznika tabeli te trzy atrybuty: border=”0″ cellpadding=”0″ cellspacing=”0″. Do wypośrodkowania użyj atrybutu align=”center”. Jeśli chcesz dodać obramowanie, najlepiej umieścić je jako styl komórki, na przykład: style=”border: 1px solid #000000;”. Tło można ustawić jako jednolity kolor używając atrybutu bgColor=”#ffffff” w komórce.
Grafiki
Grafiki w tle nie są wyświetlane w programie Outlook. Zalecamy umieszczanie grafik w formatach .jpg, .png lub .gif. Aby zachęcić użytkownika do pobrania grafik, nazwy plików graficznych nie powinny zawierać spacji, myślników ani znaków specjalnych. Długość nazwy pliku grafiki nie powinna przekraczać 35 znaków. Warto również umieścić tekst alternatywny w znacznikach <img>. Aby usunąć odstępy na poczcie Gmail i WP, dodaj do znacznika atrybuty border=”0″ oraz style=”display: block;”.
Czcionki
Najlepiej używać standardowych fontów, takich jak Arial i Times New Roman. Zdefiniuj je inline, podając rodzaj, wielkość i kolor czcionki, na przykład: <font style=”font-family: Arial, sans-serif; font-size: 10px; color: #000000;”>text</font>.
Paczka .zip
Prawidłowa paczka .zip do importu do systemu powinna zawierać plik index.html z kodem kreacji, plik index.txt z wersją tekstową (w tym samym kodowaniu, co index.html) oraz grafiki, do których jest odwołanie w kodzie. Pamiętaj o następujących zasadach:
- Nazwa pliku .zip powinna składać się tylko z liter, cyfr lub znaku “_”.
- Plik zawierający wersję HTML powinien być nazwany index.html lub index.htm (wielkość liter ma znaczenie).
- Plik index.html nie powinien znajdować się w żadnym katalogu.
- Jeżeli newsletter ma również wersję tekstową, plik zawierający tę wersję powinien być nazwany index.txt.
- Wszystkie pliki dołączone do wersji HTML newslettera (np. grafiki) mogą znajdować się w innym folderze.
Waga gotowej paczki .zip nie powinna przekraczać 100-150 kB.
Testowanie i wysyłka
Przed wysłką zalecamy przetestowanie wyświetlania wiadomości w popularnych przeglądarkach (Chrome, Firefox, IE, Edge) oraz na popularnych platformach pocztowych (Gmail, WP, Interia, Onet, O2, Outlook, Thunderbird). Na górze kreacji warto umieścić stopkę do podglądu www, która pozwoli użytkownikowi, któremu wiadomość wyświetli się niepoprawnie, otworzyć ją w przeglądarce. Możesz użyć linku:
<a href=”%www_version%”>link</a>
Pamiętaj również o umieszczeniu stopki w obu wersjach, umożliwiającej wypisanie się z newslettera. Możesz dodać jeden z tych linków:
<a href=”%remove_link%”>link</a> lub <a href=”%remove_link2%”>link</a>, jeśli chcesz zbadać przyczynę wypisu.
