Wytyczne HTML – Prawidłowe przygotowanie kreacji mailingu w formacie HTML

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.

  1. 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.
  2. Kod nie powinien zawierać JavaScript’u oraz animacji Flash, jak również pozycjonowania: position: absolute i position: relative.
  3. 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ą.
  4. Rekomendowaną szerokością kreacji jest 600px. Taką szerokość okna posiada większość klientów pocztowych.
  5. Wszelkie style należy umieszczać inline, nie umieszczając niczego w sekcji <head>.
  6. 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″.
  7. Do wypośrodkowania służy atrybut align=”center”.
  8. Obramowanie najlepiej jest umieszczać w stylu komórki w takiej postaci: style=”border: 1px solid #000000;”.
  9. 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.
  10. 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;”.
  11. 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>)
  12. 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
  13. Waga gotowej paczki .zip nie powinna przekraczać 100-150 kB.
  14. 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).
  15. 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%”>.
  16. 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

 

Tworzenie kreacji maila za pomocą edytora w SARE



Jak możemy Ci pomóc?