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. Dlatego rekomendujemy stosowanie się do poniższych zaleceń podczas przygotowywania mailingu. Pomoże to zwiększyć 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. 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.

2. 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”.

3. Marginesy najlepiej określić przy zastosowaniu margin (cellMargin), padding (cellPadding) w komórkach wyznaczając odpowiednią wartość w pikselach (<TABLE cellMargin=10 cellPadding=5>). Zwracamy jednak uwagę, że funkcja padding bywa niepoprawnie odczytywana przez niektóre programy pocztowe (np. przez starsze wersje Lotus Notes).

4. Nie zalecamy pozycjonowania za pomocą position: absolute.

5. Wiadomość powinna zostać zbudowana w prosty sposób z zastosowaniem stylów otwieranych przez klientów www. Najlepiej stosować czcionki Verdana, Tahoma, Arial lub Times New Roman z określeniem odpowiednią ich wielkości. Np.: (<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 (łącznie z Interią). Ponadto zalecamy nie zamieszczać w mailach znaczników <style> w sekcji HEAD ani powielać je w postaci inline.

Maile zbudowane na stylach błędnie wyświetlają się w poczcie portalu Interia oraz w starszych wersjach programu Lotus Notes. Mimo, że jest to niestandardowe działanie, warto również skorzystać z następującego zapisu: <font color=”#399CDC” face=”Verdana” size=”2″ style=”font-size: 14px; color: #399CDC;”>.

6. 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.

7. Przed zaimportowaniem newslettera należy sprawdzić jego wygląd 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.

8. Podczas importowania newslettera style określone w zewnętrznych plikach lub w sekcji HEAD zostaną zapamiętane i nie będzie możliwości ich edytowania poprzez SARE. W razie chęci zmiany stylów zalecane jest każdorazowe importowanie nowego newslettera, bądź opracowywanie go od początku w edytorze.

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

10. W wiadomościach można stosować różne rodzaje kodowania, jednak najlepiej odbierane są maile, w których użytw jest kodowanie ISO-8859-2 (lub alternatywnie kodowanie UTF8). Ponadto, ze względu na błędne wyświetlanie się treści newslettera (brak polskich znaków), nie zalecamy wykorzystywania kodowania ISO-8859-1 oraz WINDOWS 1250.

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

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 <img>. 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 <img>, np. <img style=”display:block;” src=”obrazek.gif” alt=”Pobierz grafikę, aby zobaczyć całą treść wiadomości”>.

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

15. Podczas tworzenia maila, który będzie importowany z adresu URL zalecamy wstawianie znaczników <SARE/> w kodzie HTML. Zapewnia to import właściwego maila, a nie przypadkowej strony www.

16. Warto zamieszczać w newsletterze 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 kodzie wiadomości należy zamieścić następujący link: <a href=%www_version%>txt</a>.



Jak możemy Ci pomóc?