Wzory maili HTML

Wzory stosowane są zarówno w module Marketing jak i we wzorach maili do poszczególnych modułów (np. Faktury, Oferty)

Prawidłowe przygotowanie mailingu w formacie HTML

Użytkownicy poczty elektronicznej korzystają dziś z wielu programów służących do wysyłania i odbierania wiadomości. Niestety może się zdarzyć, że ten sam newsletter zostanie wyświetlony w inny sposób w różnych aplikacjach. Wynika to z odmiennej interpretacji kodu HTML newslettera przez owe aplikacje. Często też nie nadążają one za standardami wyznaczanymi przez strony www. Dlatego rekomendujemy stosowanie się do poniższych zaleceń podczas przygotowywania mailingu. Co prawda część rozwiązań może wydawać się archaiczna, ale zwiększy to prawdopodobieństwo prawidłowego wyświetlenia wiadomości we wszystkich programach pocztowych, a także wpłynie pozytywnie na efektywność kampanii e-mail marketingowych.

1.

Jeśli decydujemy się na stosowanie stylów CSS, bezpiecznie jest oprócz tego zastosowanie tradycyjnych atrybutów HTML. To pomoże w poprawnym wyświetlaniu maila w wielu starszych programach.

<font color="#399CDC" face="Verdana" size="2" style="font-size: 14px; color: #399CDC;"></font>

2.

Należy stosować pełny zapis, unikać skrótów (np.: zamiast padding: 10px 0, stosować należy padding-top: 10px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px)

3.

Mailing powinien być zbudowany na tabelach, gdyż pozwalają one ustawić szerokość wyświetlanego obiektu bez użycia stylów. Pozwoli to na prawidłowe wyświetlenie mailingu w klientach www.

4.

Tabele oraz komórki tabel powinny mieć określoną i stałą szerokość. Optymalna szerokość samej wiadomości wynosi 600-700 piksel. Do wyśrodkowania treści wiadomości zalecamy używanie tabel z atrybutem align="center" (style="text-align: center" nie zadziała).

5.

Marginesy najlepiej określić przy zastosowaniu margin (cellMargin), padding (cellPadding) w komórkach wyznaczając odpowiednią wartość w pikselach

<table cellMargin="10" cellpadding="5"></table>

Zwracamy jednak uwagę, że funkcja padding bywa niepoprawnie odczytywana. Stosując stylowanie CSS należy korzystać z ‘padding’

<td style="padding: 10px">

gdyż ‘margin’ jest nieskuteczne.

6.

Nie zalecamy pozycjonowania za pomocą position: absolute - większość programów pocztowych wyświetli taki element niepoprawnie.

7.

Najlepiej stosować bezpieczne czcionki, które z dużą pewnością zostaną odnalezione w systemie odbiorcy: Verdana, Tahoma, Arial lub Times New Roman z określeniem odpowiednią ich wielkości:

<p style="font-family: Verdana; font-size: 8pt">txt</p>
lub
<p><font face="verdana" size="2">txt</font></p>

Drugie rozwiązanie zapewnia prawidłowe wyświetlanie tekstu w większości portali pocztowych (łącznie z Interią). Maile zbudowane na stylach błędnie wyświetlają się w poczcie portalu Interia oraz w starszych wersjach programów pocztowych. Dlatego bezpiecznie jest zdeklarować stylowanie zarówno poprzez CSS jak i tradycyjny HTML.

8.

Definiując kolory, najbezpieczniej jest robić to poprzez zapis szesnastkowy HEX (color: #FFFF00) lub RGB (color: rgb(255, 64, 0) ).

9.

Nie należy definiować koloru w ramkach tabeli, gdyż w większości klientów www nie jest on wyświetlany.

10.

Wszelkie linki w mailu muszą kierować bezpośrednio. Nie można stosować skrótów do katalogów ("/images/image.jpg"). Każda zawarta w mailu grafika musi być pobierana z zewnętrznego serwera.

11.

Grafiki powinny posiadać następujące rozszerzenia: jpg, jpeg, gif, png

<IMG src="obrazek.gif" alt="Pobierz grafikę, aby zobaczyć całą treść wiadomości">

Wstawienie tekstu alternatywnego zwiększa prawdopodobieństwo pobrania grafik przez odbiorców.

12.

Zwracamy uwagę, że grafiki umieszczone w tle

<table><td> lub <tr>

mogą być niepoprawnie wyświetlane w niektórych klientach www. Tam, gdzie jest to możliwe rekomendujemy zastąpienie grafik w tle grafikami określonymi za pomocą tagu . W celu uniknięcia problemów z wyświetlaniem tła zalecamy używanie atrybutu bgColor.

13.

W celu poprawnego wyświetlenia grafik na kontach gmail.com i gazeta.pl rekomendujemy zastosowanie stylu style="display:block;" w tagu , np.

<img style="display: block;" src="obrazek.gif" alt="Pobierz grafikę, aby zobaczyć całą treść wiadomości">

14.

Wiadomość nie może zawierać kodu JavaScript oraz odwoływać się do obiektów Flash (plików swf).

15.

Należy pamiętać o zamknięciu wszystkich tagów w pliku HTML.

16.

Nie da się stosować atrybutów w HEAD ale można korzystać z STYLE poza tym znacznikiem. Trzeba jednak liczyć się z tym, że niektóre z klientów pocztowych całkowicie mogą zignorować te zapisy (np.: gmail). Należy przy tym unikać dublowania stylów ze znacznika STYLE w zapisie inline. Wymaga to dodatkowej kontroli przy wprowadzaniu zmian a rozbieżności mogą być wychwycone dopiero po testach. Jeśli mamy częściowo przygotowany kod ze znacznikiem style, to warto użyć narzędzi, które zmienią go na kod inline (aplikacje typu css inliner).

17.

Newsletter warto sprawdzić w popularnych przeglądarkach (Internet Explorer, Firefox, Opera). W ten sposób zostaje zwiększone prawdopodobieństwo, że wiadomość wyświetli się w poprawny sposób w klientach takich jak Outlook, Outlook Express, Thunderbird oraz w klientach www.

Oczywiście od przytoczonych zasad można odchodzić, jednak należy to robić świadomie - wygląd naszego mailingu jest wtedy trudny do przewidzenia a to oznacza, że jeszcze więcej testów jest koniecznych przed wysyłką. Trzeba pamiętać, że na różnych urządzeniach są różne systemy operacyjne a na każdym z nich można uruchomić kilka różnych klientów pocztowych, z których każdy może się zachowywać różnie w zależności od wersji. To powoduje, że niezależnie od użytych rozwiązań, zawsze może pojawić się użytkownik u którego mail wyświetli się nieprawidłowo.