Specyfikacja kreacji e-mail

Prawidłowe przygotowanie kreacji mailingu w formacie HTML

Budowanie kreacji email różni się od budowanie strony www. Podczas gdy przeglądarki internetowe dążą ku jednakowym standardom, większość programów pocztowych czy webmaili interpretuje HTML i CSS niespójnie i wybiórczo. Podczas gdy CSS jest wciąż udoskonalany i rozbudowywany, style w szablonach email są znacznie ograniczone. Dlatego też warto zadbać by kod mailingu był możliwie prosty oraz unikać ignorowanych znaczników.

Z reguły nie uda nam się wyselekcjonować odbiorców kampanii, tak aby zgrupować adresy otwierające na określonych programach czy urządzeniach, warto więc zadbać by szablon wyświetlał się prawidłowo również na najbardziej restrykcyjnym kliencie spośród popularnych.

Na polskim rynku liczących się aplikacji, najbardziej hermetyczny wydaje się być Gmail. Webmail WP, ONET czy O2 i INTERIA jest bardziej uniwersalny w stosunku do często używanych styli CSS. Z kolej wśród programów desktopowych najbardziej ograniczony jest Outlook z pakietu Office, natomiast prawie idealnym klientem jest Apple Mail na Mac. Jeśli chodzi o urządzenia mobilne, sytuacja wygląda dość dobrze – prawidłowo wyświetla się szeroka gama styli, zarówno pod domyślnymi klientami na Android, iOS, czy też Harmony.

Wytyczne HTML e-mail

  1. Wymagany format wiadomości email to HTML.

  2. Zalecana szerokość mailingu to 600-700 pikseli.

  3. Sam kod HTML nie powinien ważyć więcej niż 100 kb. Zaleca się, by wiadomość była jak najlżejsza.

  4. Wymagane kodowanie to UTF8.

  5. Wiadomość email zaleca się budować na tabelach, co pozwala na utrzymanie określonej szerokości danego elementu.

  6. Elementy mailingu należy podlinkowywać za pomocą znacznika A HREF. Użycie znacznika AREA uniemożliwia wykrycie linku przez system, i dalsze śledzenie klikalności w ten link.

  7. Nie należy zamieszczać elementów interaktywnych typu JavaScript, ActiveX, ramek, a także elementów dynamicznego HMTL.

  8. Tło mailingu powinno mieć jednolity kolor i być zdefiniowane za pomocą znacznika BG KOLOR. Tła obrazkowe nie są poprawnie obsługiwane przez programy pocztowe.

  9. Zaleca się stosowanie popularnych czcionek,np. Arial, Verdana, Tahoma, Times New Roman, które wyświetlają się prawidłowo na webmailach oraz programach pocztowych.

  10. Pliki graficzne powinny mieć rozszerzenie JPG, PNG lub GIF.

  11. Zleca się opisywanie obrazów za pomocą parametru ALT. Dzięki temu zabiegowi w przypadku blokowania obrazów, odbiorcy wyświetlą się elementy opisane tekstem, co może skłonić do podjęcia dalszej akcji – pobrania obrazów.

  12. Zaleca się definiowanie dla obrazów atrybutu border=”0”.

  13. Dla wyśrodkowania kreacji zaleca się używania parametru align=”center”.

  14. Wiadomość nie powinna zawierać elementów pozycjonowania – deklaracji „position”.

  15. System MessageFlow umożliwia automatyczną integrację z Google Analytics. Kody śledzące inny programów typu Gemius należy samodzielnie zaszyć w linkach.

  16. Nie należy stosować atrybutu ROWSPAN w znaczniku TD.

  17. W kodzie nie mogą być zwarte znaczniki TITLE oraz META inne niż deklaracja kodowania czcionki. Nie należy też stosować deklaracji !DOCTYPE.

  18. Style CSS muszą być zdefiniowane bezpośrednio w kodzie HTML.

  19. Styl należy definiować INLINE, poprzez atrybut STYLE wewnątrz tagu. Ponadto zaleca się stosowanie stylu inline przede wszystkim w znacznikach SPAN i A.

  20. Dla definiowania marginesów zaleca się użycie znacznika CELLMARGIN.

  21. Nie należy zamieszczać obrazów w sekcji STYLE. Obrazy mogą być zdefiniowane jedynie w tagach IMG.

  22. Przygotowując wiadomość warto zawrócić uwagę na preheader, czyli pierwsze zdanie wiadomości. Element ten ma bowiem duży wpływ na otwieralność. Najlepiej, by preheader był rozszerzeniem informacji zawartej w tytule.

  23. Przygotowaną kreację należy przetestować na możliwie jak największej liczbie programów pocztowych, webmaili, a także na urządzeniach mobilnych. System MessageFlow oferuje dostęp do usługi EmailPreview, umożliwiającej szybkie podejrzenie wiadomości na różnych programach, również na urządzeniach mobilnych.

  24. Przygotowany e-mailing należy spakować do folderu ZIP. Plik z HTML-em należy nazwać „index.html” i musi się on znajdować w tym samym folderze, w którym znajduje się folder z obrazami.

Dodatkowe wskazówki dotyczące przygotowania kreacji HTML emaila

Tabele, zamiast divów

Strukturę mailingu zaleca się budować na tabelach, co pozwala na utrzymanie określonej szerokości elementów. Szablony budowane na divach nie sprawdzają się, gdyż duża liczba programów pocztowych nie zachowuje pożądanej struktury (m.in. problem z float). Zagnieżdżanie tabel jest skutecznym sposobem, lecz należy pamiętać że np. Gmail i Outlook 2007 mają problemy z interpretacja margin i padding w obrębie komórek.

Co do szerokości tabel, najpewniejszą metodą jest podanie jej dla każdej komórki, a nie globalnie dla całej tabeli. Ponadto szerokości należy podawać w pikselach, gdyż wartości procentowe się ignorowane – szczególnie w zagnieżdżonych tabelach pod Outlookiem. Komórki można scalać w orientacji poziomej (colspan), ale nie w pionowej (rowspan).

Kodowanie

Najlepiej przyjąć że zawsze stosuje się UTF8, niezależnie od grupy odbiorców mailingu.

Szerokość kreacji

Zaleca się nie przekraczanie 600px. Szerokość ta uwzględnia statystyki średniej rozdzielczości ekranów oraz zajęcie części przestrzeni przez menu boczne w webmailach, czy klientach desktopowych. Wielkość ta jest dość dobrze skalowana na urządzeniach mobilnych.

CSS inline

Webmail Gmail’a jest najbardziej ograniczony pod względem sposobu osadzania styli. O ile linkowanie do zewnętrznych zasobów css (czyli <link> w head/body) nie działa na prawie żadnym webmailu, to na Gmailu dodatkowo nie działa osadzanie styli jako <style></style> w head lub body.

Tak więc jedynym pewnym sposobem deklarowania stylów jest metoda INLINE, czyli umieszczanie ‘style’ w poszczególnych znacznikach html (np. <h1 style=”color:blue;”>Abc</h1>). Ponadto, część klientów nie uznaje skrótów css dla wartości hex kolorów (#ffffff zamiast #fff), czy też skrótów dla margin, padding (margin-top:25px; margin-right:50px; marginbottom:75px; margin-left100px; zamiast margin: 25px 50px 75px 100px;)

Obrazki

Należy pamiętać że większość webmaili i klientów domyślnie automatycznie nie pobiera obrazków. Tak więc pierwszą rzeczą jaką ujrzy odbiorca jest sam tekst pozbawiony obrazków oraz informację o możliwości wczytania grafik. Aby mailing wyglądał schludnie przed i po pobraniu obrazków należy pamiętać o kilku kwestiach. Warto zawsze deklarować wymiary obrazków oraz wykorzystywać grafiki o docelowych wymiarach, skalowanie dynamiczne poprzez atrybuty nie zawsze się sprawdza.

Wykorzystywanie obrazka jako background image nie działa pod m.in Outlook 2007 (jest co prawda na to zmyślny sposób), tak więc jeśli się już zastosuje tło obrazkowe, to warto zdefiniować również background color jako alternatywę. Zaleca się opisywanie obrazów za pomocą parametru ALT. Dzięki temu na etapie blokowania obrazów, odbiorcy wyświetlą się elementy opisane tekstem, co może skłonić do podjęcia dalszej akcji – pobrania obrazów. ALTy powinny być możliwie krótkie, w przypadku Outlooka program wyświetla przed nimi standardową frazę o możliwości pobrania obrazków. Stosowane rozszerzenia: png, jpg, gif. W przypadku problemów z otoczeniem obrazków pod webmailem Gmail i Outlook.com przydatne może się okazać style=”display:block;” oraz border=”0”

Preheader

Przygotowując wiadomość warto zawrócić uwagę na preheader, czyli pierwsze zdanie wiadomości. Wyświetla się ono w szczególności na urządzeniach mobilnych, Gmail i Outlook. Element ten ma wpływ na otwieralność. Najlepiej, by preheader był rozszerzeniem informacji zawartej w tytule.

Waga poniżej 100KB

Sam kod HTML (bez wagi obrazków) nie powinien ważyć więcej niż 100 KB. Zaleca się, by wiadomość była jak najlżejsza. Waga pojedynczego maila jest kluczowym czynnikiem wpływającym na tempo wysyłki.

Linki zawsze <a>

Elementy mailingu należy podlinkowywać za pomocą znacznika A HREF. Użycie znacznika AREA uniemożliwia wykrycie linku przez system, i dalsze śledzenie klikalności w ten link.

JavaScript nieakceptowany

Nie należy zamieszczać elementów interaktywnych typu JavaScript, ActiveX, ramek, a także elementów dynamicznego HMTL.

Standardowe czcionki

Zaleca się stosowanie popularnych czcionek, np. Arial, Verdana, Tahoma, Times New Roman, które wyświetlają się prawidłowo na webmailach oraz programach pocztowych.

Google Analytics i inne systemy

System MessageFlow umożliwia automatyczną integrację z Google Analytics. Kody śledzące inny programów typu Gemius należy samodzielnie zaszyć w linkach.

Inne wskazówki:

  • Wiadomość nie powinna zawierać elementów pozycjonowania – deklaracji „position” – Stosowanie sekcji <style> jest niezalecane, jeśli jest konieczne nie należy zamieszczać w niej obrazów. Grafiki mogą być zdefiniowane jedynie w tagach <img>.

  • Przygotowaną kreację należy przetestować na możliwie jak największej liczbie programów pocztowych, webmaili, a także na urządzeniach mobilnych. System MessageFlow oferuje dostęp do usługi EmailPreview, umożliwiającej szybkie podejrzenie wiadomości na różnych programach, również na urządzeniach mobilnych.

  • Przygotowany mailing można spakować do folderu ZIP i wgrać na serwer MessageFlow podczas kroków kreatora kampanii mailowej. Plik z HTML-em należy nazwać „index.html”.

Last updated