Zasady budowy szablonu graficznego do mailingu

Wytyczne do projektu wiadomości e-mail

Wytyczne do projektu szablonu e-mail

Pierwszym krokiem w celu zminimalizowania różnicy w wyglądzie listu w różnych programach pocztowych jest użycie tabeli o rozmiarze 1 na 3 (1 kolumna i 3 wiersze), która będzie służyła do pozycjonowania treści listu wysłanego z programu do masowej korespondencji e-mail. Tabela powinna być wyrównana do środka strony i koniecznie musi mieć ustawioną szerokość np. 600 pikseli. Obramowanie tabeli ustawia się na 0 (border) i wtedy tabela jest niewidoczna. Przykładowy szablon do mailingu zbudowany z zagnieżdżonych tabel przedstawiono na rysunku 4. Szablon składa się z nagłówka (pierwszy wiersz tabeli), właściwej treści (drugi wiersz) oraz stopki (wiersz trzeci).

Poznaj zasady budowy szablonu graficznego do mailingu

Pierwszy wiersz tabeli stanowi nagłówek listu (ang. Header), w którym można umieścić np. element graficzny (obraz w formacie JPEG, GIF lub PNG) zawierający logotyp firmy, baner itp. Obraz musi być dokładnie w takiej rozdzielczości jak rozmiar komórki tabeli.

W drugim wierszu tabeli pozycjonującej (ang. Main Body lub Main Content) można wstawić dodatkową tabelę, która będzie zawierała właściwą treść zmienianą przy każdym nowym mailingu. Zagnieżdżona tabela służy do pozycjonowania wewnętrznego tekstu a dokładniej ustawienia wcięć między lewym i prawym marginesem. Atrybuty Cellspacing (odstępy między komórkami) oraz Cellpadding (dopełnienie komórek) nie są interpretowane przez wszystkie programy pocztowe, dlatego należy zachować czujność przy ich używaniu.

Tabela pozycjonująca do mailingu
Tabelaryczna struktura szablonu kreacji
Wewnętrzna tabela powinna być wyśrodkowana i mieć nieco mniejszą szerokość niż ta-bela główna. W wewnętrznej tabeli będzie umieszczony właściwy tekst oferty wraz ze zdję-ciami. W takim przypadku dodatkowo można tabelę podzielić na np. 3 wiersze i 2 kolumny, a następnie w komórkach z kolumny pierwszej umieścić zdjęcia produktów a w komórkach w kolumnie drugiej wpisać opis produktów pokazywanych na obrazkach. Wstawiając obraz do komórki w tabeli należy pamiętać, aby był umieszczony nie jako tło komórki tylko jako zwy-kły obrazek z określonym rozmiarem oraz alternatywnym tekstem zachęcającym użytkownika do włączenia podglądu obrazów. Przykładowy kod obrazu wstawionego do komórki tabeli może mieć następującą postać:
<img style=”display:block” src="C:\obraz.jpg" alt="Włącz podgląd obrazów" title="Logo" 
width="600" height="50" border="0">

Niektóre programy pocztowe np. webmail od GMail standardowo blokują obrazy od nieznanych nadawców. W takim przypadku odbiorca zobaczy alternatywny tekst np. „Włącz podgląd obrazów”. Warto także w komórce, w której umieszczony jest obraz ustawić kolor tła zbliżony do koloru tła grafiki. Przy czym należy pamiętać, aby obraz nie zajmował całej po-wierzchni przeznaczonej na treść z racji tego, że filtry antyspamowe mogą taką wiadomość od razu uznać jako spam. Dlatego duże obrazy należy pociąć przed wysłaniem na mniejsze części. Na koniec grafika powinna być osadzona (dołączona) w liście. Umieszczanie wszystkich obrazów na serwerze internetowym (grafika dociągana) może spowodować, że odbiorca będzie musiał w swoim programie pocztowym kliknąć przycisk „Pokaż obrazy” gdyż jak wynika z badań 63% respondentów stosuje blokadę grafik w programie pocztowym.

W stopce listu nie zapomnij umieścić linku rezygnacji

W stopce listu (ang. Footer) powinny znaleźć się informacje dot. tego, dlaczego list dotarł do odbiorcy i koniecznie należy umieścić link rezygnacji lub informację na temat tego jak zrezygnować z subskrypcji. Zazwyczaj nagłówek i stopka listu nie zmieniają się i są stałe dla wszystkich mailingów wysyłanych z firmy. Na poniższym rysunku przedstawiono szablon składający się z tabeli pozycjonującej (1 kolumna i 7 wierszy) zawierającej zagnieżdżoną tabelę (1 kolumna i jeden wiersz). Tylko zawartość wewnętrznej tabeli jest zmieniana przez pracownika wysyłającego mailingi. Pozostałe elementy wiadomości są stałe dla wszystkich kampanii mailingowych realizowanych przez firmę.

Tabela szablon mailing
Przykładowy szablon zbudowany na zagnieżdżonych tabelach
W treści listu najlepiej używać standardowych czcionek takich jak Arial, Times New Roman oraz Verdana i Tahoma z jednoczesnym określeniem ich wielkości oraz ewentualnie koloru np.:
<span><font face="Arial" size="2" color="#FF0000">Tekst</span>
<p><font face="Arial" style="font-size: 12px">Tekst</font></p>

Natomiast nie zaleca się używania atrybutu <STYLE> w sekcji HEAD dokumentu HTML gdyż niektóre programy pocztowe go ignorują i wtedy list u odbiorcy wygląda zupełnie inaczej niż się spodziewamy . Dodatkowo aby uniknąć problemów z kodowaniem polskich znaków diakrytycznych zaleca się używanie standardu ISO-8859-2 (tzw. Latin-2) i zadeklarowanie tego w kodzie HTML listu. Na poniższym rysunku przedstawiony został wzorcowy kod newslettera zawierający tabelę pozycjonującą składający się z jednej kolumny oraz trzech wierszy.

Kod HTML newslettera z tabelą pozycjonującą
Kod HTML newslettera z tabelą pozycjonującą

Trzeba zwrócić jeszcze uwagę na jedną kwestię tj. odbiorców korespondencji, którzy w swoich programach pocztowym mają zablokowany podgląd treści listu w formacie graficznym (HTML). W takim przypadku zamiast atrakcyjnej wizualnie kreacji wyświetli się pusta strona i odbiorca listu nie zobaczy właściwej treści. Aby uniknąć takich sytuacji zawsze należy wysy-łać masowe mailingi w formacie mieszanym, czyli w dwóch wersjach tj. graficznej (HTML) oraz tekstowej (czysty tekst ang. Plain text). Odbiorcy, którzy mają zablokowany podgląd graficzny zobaczą tekst alternatywny, który również może zawierać przekaz marketingowy ale bez zbędnych ozdobników, krojów czcionek oraz obrazków. W programach pocztowych takich jak AnoMail jest możliwe dodanie tekstu alternatywnego do wcześniej przygotowanej kreacji w formacie graficznym. Program mailingowy AnoMail łączy obie części w całość i wysyła je w postaci jednego listu skierowanego do masowego odbiorcy.

Analizator kodu HTML listu
Analizator kodu HTML wiadomości e-mail w AnoMail

Duże obrazki podziel na mniejsze części i osadź w wiadomości

W przypadku grafiki nie należy wstawiać obrazków szerszych niż 500 pikseli lub większe obrazki powinno się dzielić na części. Filtry antyspamowe lepiej traktują gdy duży obrazek podzielony jest na małe fragmenty. Podstawowe błędy związane z treścią listu możecie Państwo samodzielnie zdiagnozować przechodząc w programie mailingowym AnoMail do edytora wiadomości e-mail.

W programie AnoMail można tworzyć listy w formacie graficznym zawierające obrazki, które od razu wyświetlą się u odbiorcy. Adresat poczty w swoim programie pocztowym widzi grafikę którą wstawili Państwo do treści i nie musi naciskać przycisku pobierz obrazy gdyż grafika domyślnie jest osadzana w treści listu. Dzięki temu list nie trafia do spamu tak jak w przypadku systemów konkurencyjnych tylko dlatego, że grafika jest w całości dociągana z serwerów.

Ze względów na antyspamy nie używać grafiki pobieranej z internetu

Oczywiście w razie konieczności w programie AnoMail można ustawić aby część grafiki np. obrazki śledzące były pobierane z internetu. Domyślnie grafika wstawiana do listu jest osadzana w treści wiadomości a grafika dołączona z internetu jest dociągana z Państwa serwera czyli wyświetli się u odbiorcy dopiero, gdy kliknie przycisk Odblokuj lub Pobierz obrazy.

Funkcja dociągania obrazów może być używana w sytuacji, w której chcecie Państwo mieć jak najlżejszy list i nie obciążać swojego serwera poczty. Jednakże z punktu widzenia zabezpieczeń antyspamowych zalecamy aby grafika była osadzona w treści listu. W oknie edycji listu programu AnoMail znajduje się przycisk Grafika, pod którym znajduje się wiele funkcji do wstawiania grafiki

Cięcie grafiki do mailingu
Automatyczny podział obrazka na mniejsze części

Podglądy i testy kreacji przed finałową wysyłką mailingu

Mając przygotowany szablon korespondencji należy upewnić się czy będzie prawidłowo wyświetlany w różnych klientach pocztowych. Samo sprawdzenie podglądu poczty w oprogramowaniu, z którego korzysta się podczas projektowania listu może okazać się niewystarczające chyba, że oprogramowanie mailingowe oferuje nie tylko wewnętrzny podgląd, ale daje także możliwość wykonania tzw. testów ekranowych (ang. Screen Tests) czyli sprawdzenia jak list będzie wyglądał w różnych klientach pocztowych. Taką funkcjonalność oferują za-zwyczaj komercyjne systemy „hostowane” czyli udostępniane w modelu ASP (ang. Application Service Provider) na serwerze producenta. Wśród aplikacji typu desktop też można znaleźć wielokrotny podgląd kreacji.

Sprawdź jak wygląda list zanim wyślesz go do masowego odbiorcy

Przykładem może tu być oprogramowanie AnoMail, w którym dostępnych jest kilka podglądów umożliwiających sprawdzenie wyglądu listu (HTML) w wewnętrznej przeglądarce bazującej na silniku interpretacji stron z programu Windows Live Mail, domyślnym programie pocztowym zainstalowanym w systemie np. Microsoft Outlook oraz oprogramowaniu webmail dostępnym przez przeglądarkę internetową np GMail.

Kreacje powinny być przygotowane w formacie mieszanym (HTML oraz zwykły tekst), który wzmocni przekaz marketingowy i pozwoli dotrzeć także do tych osób, które mają za-blokowany podgląd HTML listu w swoim programie pocztowym. Gotowe kreacje należy koniecznie przetestować w różnych programach pocztowych. Podstawowe testy ekranowe po-winny być wykonane w programie Microsoft Outlook lub Mozilla Thunderbird oraz bezwzględnie w kliencie webmail np. GMail lub Interia. Jeżeli list jest poprawnie wyświetlany w powyższych klientach pocztowych to można rozpocząć masową wysyłkę, przy czym grupa docelowa oraz treść listu powinny ze sobą współgrać. Przesłanie odpowiednio dobranej kreacji do ściśle określonej grupy odbiorców wpłynie na wzrost skuteczności akcji mailingowej a tym samym efekt końcowy, jaki firma chce osiągnąć.

Co jeszcze warto wiedzieć o e-mailingach: