Aktualnie na rynku jest dostępny szeroki wachlarz programów i klientów pocztowych. Może się zdarzyć, że ten sam newsletter zostanie wyświetlony inaczej na różnych pocztach. W związku z tym przygotowaliśmy, kilka wskazówek dotyczących prawidłowego przygotowania mailingu w paczce HTML. Zastosowanie się do poniższych wytycznych pomoże zmniejszyć ryzyko wystąpienia różnic w wyświetlaniu się tego samego newslettera.
- Kod mailingu powinien opierać się na strukturze tabel, a znaczniki w nim zawarte powinny być zgodne ze specyfikacją HTML 4.01. Powinien być on również wolny od błędów i zgodny ze standardem W3C.
- Kod nie powinien zawierać JavaScript’u oraz animacji Flash, jak również pozycjonowania: position: absolute i position: relative.
- Polskie czcionki oraz znaki specjalne należy kodować w standardzie UTF-8 (ewentualnie ISO-8895-2, ale pamiętając, że to kodowanie posiada mniejszą bibliotekę znaków). Kodowanie musi być zgodne z jego deklaracją.
- Rekomendowaną szerokością kreacji jest 600px. Taką szerokość okna posiada większość klientów pocztowych.
- Wszelkie style należy umieszczać inline, nie umieszczając niczego w sekcji <head>.
- Marginesy należy ustawiać poprzez dodanie pustych komórek lub dodanie styli padding w komórkach (pamiętając wówczas o uwzględnieniu ich wielkości w nadawaniu szerokości komórce). Aby pozbyć się niepotrzebnych marginesów i odstępów najlepiej dodać do znacznika tabeli te trzy atrybuty: border="0" cellpadding="0" cellspacing="0".
- Do wypośrodkowania służy atrybut align="center".
- Obramowanie najlepiej jest umieszczać w stylu komórki w takiej postaci: style="border: 1px solid #000000;".
- Tło rekomendujemy umieszczać jako jednolity kolor poprzez atrybut bgColor="#ffffff" umieszczony w komórce. Grafiki w tle nie są wyświetlane w programie Outlook.
- Grafiki powinny być umieszczane w formacie .jpg, .png lub .gif. Aby zachęcić użytkownika do pobrania grafik. Rozszerzenia te koniecznie pisane małymi literami. Nazwy plików graficznych nie mogą posiadać spacji, myślników i znaków specjalnych. Długość nazwy pliku grafiki nie może przekraczać 35 znaków. Dobrym zwyczajem jest umieszczenie w znacznikach <img> tekstu alternatywnego. Do usunięcia odstępów na poczcie Gmail i WP należy dodać do tego znacznika również border="0" oraz style="display: block;".
- Najlepiej używać standardowych fontów tj. Arial oraz Times NewRoman. Definiować należy je inline trzema wartościami: rodzaj, wielkość i kolor (<font style="font-family: Arial, sans-serif; font-size: 10px; color: #000000;">text</font>)
- Prawidłowa paczka .zip importowana do systemu powinna posiadać 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.
Dodatkowo:– nazwa pliku .zip złożona wyłącznie z liter (bez polskich znaków), cyfr lub znaku ”_”
– plik zawierający wersję HTML nazywa się index.html lub index.htm (wielkość liter ma znaczenie)
– plik index.html nie znajduje się w żadnym katalogu
– jeżeli newsletter oprócz wersji HTML posiada wersję tekstową, plik zawierający tę wersję nazywa się index.txt
– wszystkie dołączane pliki do wersji HTML newslettera (np. grafiki) mogą znajdować się w innym folderze - Waga gotowej paczki .zip nie powinna przekraczać 100-150 kB.
- Przed zaplanowaniem wysyłki należy przetestować poprawność wyświetlania się wiadomości poprzez otworzenie go w popularnych przeglądarkach (Chrome, FireFox, IE, Edge) oraz na popularnych pocztach (Gmail, WP, INTERIA, ONET, O2, Outlook, Thunderbird).
- U góry kreacji warto zamieszczać tzw. stopkę do podglądu www. Dzięki temu, użytkownik, któremu wiadomość wyświetli się niepoprawnie będzie mógł zobaczyć ją w oknie swojej przeglądarki. W tym celu należy umieścić w kodzie następujący link:
<a href="%www_version%">link</a>
- Należy pamiętać o wprowadzeniu w obu wersjach stopek umożliwiających wypisanie się z otrzymanego newslettera.W tym celu należy umieścić w kodzie jeden z linków wypisu:
– <a href="%remove_link%">link</a>
– <a href="%remove_link2%">link</a>, jeśli chcemy zbadać przyczynę wypisu
Zobacz też:
Jak zaimportować paczkę zip kreacji w HTML