fbpx

Szablon e-mail HTML, szablon newslettera – zrób to sam!

Wzmacnia świadomość marki, podkreśla unikalność przekazu marketingowego, buduje swoistą więź z czytelnikiem, ułatwia przyswajanie informacji, zwiększa skuteczność mailingów… Te i jeszcze więcej korzyści odnosi się do posiadania własnego unikalnego szablonu wiadomości w formacie HTML, który bezsprzecznie buduje firmie niezwykłą przewagę konkurencyjną.

Możliwość formatowania tekstu i wstawianie atrakcyjnych dla oka obrazów – to elementy niezbędne do skutecznej komunikacji e-mail marketingowej. Z kolei większa skuteczność to więcej zarobionych pieniędzy… Nie dziwi więc fakt, że usługa tworzenia profesjonalnego szablonu newslettera HTML może kosztować nawet 1000–1500 zł (wg szczegółowego cennika firmy Implix – właściciela marki GetResponse).

Co jeśli nie chcemy na początek naszej działalności e-mail marketingowej ponosić tak znacznych kosztów? Oczywiście możemy negocjować cenę, jednak zazwyczaj kończy się to upustem rzędu 5–10%. Innym wyjściem jest przeczytanie do końca tego artykułu i własnoręczne zaprojektowanie własnego szablonu e-mail HTML, zgodnego z ogólnie przyjętymi dobrymi praktykami e-mail marketingowymi.

Planowanie strategiczne, czyli odpowiednia struktura wiadomości e-mail

Odpowiednie zaplanowanie szablonu newslettera i świadome rozmieszczenie elementów strategicznych – to prawdopodobnie najbardziej kluczowe etapy podczas tworzenia całego szablonu.

Choć nietypowe kreacje zdają się przyciągać uwagę internautów, to w znakomitej większości przypadków po prostu utrudniają zapoznanie się z treścią, jaką mamy do przekazania. Najczęściej powtarzającym się schematem – przyjętym jako niepisany standard wiadomości w formacie HTML – jest tabela posiadająca jedną główną kolumnę podzieloną na część nagłówkową, część główną z tekstem lub grafiką oraz na stopkę. Rzadziej spotyka się wiadomości w szablonie dwukolumnowym z tzw. sidebarem, w którym prezentowane są artykuły z bloga firmowego lub propozycje najciekawszych produktów z aktualnej oferty.

Oto jakie elementy powinniśmy wziąć pod uwagę w poszczególnych sekcjach szablonu e-mail:

Nagłówek

Odpowiednio zaprojektowany nagłówek powinien być niezwykle czytelny i już na pierwszy rzut oka komunikować, kto i z jakiego powodu pisze daną wiadomość. W sekcji nagłówkowej powinny znaleźć się następujące elementy:

szablon-email-html

*Przykład odpowiednio zaplanowanego nagłówka szablonu wiadomości HTML – newsletter paklo.pl*

  • Logo – jako miejsce odpowiednie dla firmowego logo przyjmuje się lewy górny róg wiadomości. Należy jednak pamiętać, że nie wymyślna grafika logo czy nazwa naszej firmy są najważniejsze dla czytelnika, dlatego rozmiary tego elementu powinny być względnie niewielkie.

Niewątpliwie każdej firmie zależy na prezentowaniu własnego logo i nazwy sklepu w jak największej ilości miejsc, jednak utrudnianie życia czytelnikom – a tym jest spychanie treści właściwej do dolnych części szablonu – nigdy nie wychodzi na dobre. Na nic zda się usilne prezentowanie logo firmowego, jeśli żaden z czytelników nie przeczyta najważniejszej części naszej wiadomości – treści.

Warto pamiętać o uczynieniu naszego logo klikalnym linkiem. Internauci są przyzwyczajeni, że klikając logo firmowe, odwiedzą stronę główną serwisu. Jest to kolejny niepisany standard, którego wspieranie wychodzi na dobre zarówno właścicielowi firmy, jak i czytelnikom newslettera.

  • Preheader – jest to niewielki tekstowy obszar szablonu, zazwyczaj położony tuż nad logo firmowym, tak aby był pierwszą treścią, jaka znajduje się w danym szablonie. Rzadziej sekcję preheader zamieszcza się na prawo od logo.

Celem stosowania sekcji preheader jest uzupełnienie tematu wiadomości o atrakcyjny przekaz marketingowy mający na celu poprawę wskaźnika Open Rate (współczynnika otwarć) wiadomości. Element ten wykorzystuje fakt, iż niektóre programy pocztowe i webmaile, obok właściwego tematu wiadomości, wyświetlają kilka pierwszych słów treści znajdującej się wewnątrz wiadomości.

Stosując sekcję preheader w położeniu obok logo firmowego, należy pamiętać, że atrybut alt dla obrazka logo zostanie zazwyczaj uwzględniony jako początek sekcji preheader.

Sposób wyświetlania sekcji preheader w gmail.com

  • Menu górne z kategoriami – bardzo popularnym i niezwykle skutecznym zabiegiem marketingowym jest wstawienie do nagłówka szablonu wiadomości belki z kategoriami naszego sklepu.

Zabieg ten jest szczególnie polecany sklepom posiadającym tylko kilka głównych kategorii w sklepie, jednak Ci więksi internetowi przedsiębiorcy również mogą skorzystać z tego dobrodziejstwa poprzez wybranie kilku najatrakcyjniejszych, z punktu widzenia czytelnika, kategorii i zamieszczenie ich na belce szablonu.

Stosując górne menu z kategoriami naszego sklepu, zwiększamy prawdopodobieństwo, że czytelnik niezainteresowany wybranymi dla niego propozycjami i tak odwiedzi naszą witrynę, aby wyszukać coś idealnie dla siebie w odpowiadającej mu kategorii.

  • Ikony społecznościowe – w wielu branżach mile widzianym elementem nagłówka wiadomości będą również ikony społecznościowe. Mogą one pełnić funkcję zarówno przycisków „podziel się”, jak i aktywnych łączy kierujących do firmowych profili w popularnych serwisach.

Stosowanie tego elementu jest szczególnie polecane w niszach, dla których odbiorcy są bardzo aktywni w portalach społecznościowych, w przeciwnym wypadku dodatkowy element w szablonie tylko zaciemnia przekaz i odwraca uwagę czytelnika od najważniejszych kwestii.

Wstawienie do szablonu przycisków społecznościowych powinno być zabiegiem dokładnie przemyślanym pod względem strategicznym.

Część główna

W zależności od strategii firmy w miejscu tym znajdziemy grafikę z wylistowanymi produktami promocyjnymi, wymyślną infografikę opisującą powód promocji lub po prostu zwykły tekst. Trudno rozstrzygać, który z tych wariantów jest najkorzystniejszy, ponieważ analiza zależy od celów, jakie firma zamierza realizować za pomocą e-mail marketingu. Innym, równie ciekawym wyjściem jest swoista hybryda, a więc połączenie tekstu i prezentacji graficznej. Poniżej znajduje się kilka słów komentarza do każdego ze wspomnianych wariantów.

  • Newsletter z samym tekstem – słowo, czy to mówione, czy pisane, jest podstawą wszelkiej komunikacji, dlatego rozsądne wydaje się wysyłanie klientom newslettera całkowicie tekstowego. Dzięki temu wiadomości sprawiają wrażenie bardziej prywatnych – zupełnie zbliżonych do tych z codziennej komunikacji. Wyobraźmy sobie jednak newsletter tekstowy zawierający fantastyczne opisy bielizny – całkowicie pozbawione jakichkolwiek zdjęć… W wielu branżach samo słowo nie wystarczy, aby przekonać klienta do zakupu.

  • Newsletter tylko z grafiką – nie bez powodu mówi się, że jeden obraz wyraża więcej niż tysiąc słów… Ponadto piękne grafiki zamieszczone w wiadomości HTML aktywnie oddziałują na zmysły czytelnika. Bardzo często zdjęcie produktu i niewielki przycisk nawołujący do akcji potrafią zdziałać cuda, generując firmie wysokie obroty przy każdej wysyłce newslettera. Należy jednak pamiętać, że przekaz obrazkowy jest zdecydowanie mniej intymny, mniej nastawiony na budowanie więzi z czytelnikiem. Newslettery zawierające samą grafikę od razu sygnalizują: „Chcę Ci coś sprzedać!”, dlatego odrzucają pewną część internautów.

  • Newslettery hybrydowe, z tekstem i grafiką – w obliczu powyższych argumentów ciekawą alternatywą wydają się szablony newsletterów zarówno zawierające ten bardziej intymny przekaz tekstowy, jak i oddziałujące na zmysły piękne grafiki. W tym punkcie jednak ogromne wyzwanie stoi przed grafikami, ponieważ nie zawsze połączenie przekazu słownego i graficznego jest możliwe. Zazwyczaj próby budowy szablonów hybrydowych kończą się kompromisem z obu stron, a więc ograniczeniem przekazu słownego do kilku suchych zdań wstępu i zmniejszeniem ilości prezentowanych w wiadomości grafik. Tego typu kompromis zazwyczaj oznacza zaciemnienie przekazu, a co za tym idzie – zmniejszenie skuteczności sprzedażowej newslettera.

Stopka wiadomości

Stopka wiadomości, z racji swojej słabej funkcji marketingowej, jest często traktowana po macoszemu przez osoby projektujące szablon wiadomości HTML. Odpowiednie zagospodarowanie tego elementu może jednak znacznie zwiększyć zaufanie do naszej firmy lub nawet wygenerować kilka dodatkowych kliknięć.

Stopka newslettera wydawnictwa helion.pl

Informacje mile widziane przez internautów w tym miejscu – to informacje o nazwie naszego newslettera oraz dane firmowe, aby czytelnik jasno widział, kto jest odpowiedzialny za wysyłkę danej wiadomości. Miłym gestem w stronę czytelnika, jak również wyrazem swoistego profesjonalizmu jest stosowanie linku wypisu z subskrypcji. Przecież jedno kliknięcie jest zdecydowanie łatwiejsze do wykonania niż wysyłanie informacji zwrotnej z prośbą o wypisanie, a kto ma się wypisać, to i tak się wypisze (albo oznaczy wiadomość jako spam), więc nie warto mu tego utrudniać.

Natomiast elementami marketingowymi, jakie mogą znaleźć się w stopce wiadomości, są dodatkowe linki odsyłające na przydatne strony informacyjne, dodatkowa belka z kategoriami w sklepie czy chociażby przyjazna zachęta do odwiedzenia naszej strony na Facebooku.

Wskazówki dotyczące kodowania

Aby własnoręcznie przełożyć projekt szablonu na gotowy kod, należy znać przynajmniej podstawy języka HTML. Nie ma większego sensu przytaczać tu całych podręczników – na hasło „kurs HTML” Google chętnie odpowie garścią przydatnych linków.

Warto natomiast wspomnieć o kilku niuansach, które sprawiają szczególny problem początkującym projektantom szablonów HTML.

Tabelki to podstawa – według wytycznych organizacji IAB Polska podstawą dla każdej wiadomości w formacie HTML powinny być tabele (znacznik <table>). Tylko tego typu zabieg pozwala ustalić szerokość prezentowanej treści z gwarancją poprawnej interpretacji przez wszystkie popularne programy pocztowe i webmaile.

Odpowiednie wyświetlanie grafiki – decydując się na osadzenie w naszym szablonie obrazków, należy pamiętać, że większość programów pocztowych na samym wstępie zablokuje ich wyświetlanie, dlatego szablon wiadomości powinien prezentować się w należyty sposób również z zablokowanymi grafikami. Należy też pamiętać o odpowiednim stosowaniu atrybutu alt dla obrazów.

Style „inline” – wiele skrzynek naszych kochanych czytelników pomija wszystkie znaczniki znajdujące się przed <body>, dlatego formatowanie poprzez style powinno być zapisane w formie „inline”. Przykład: <table style=”border-color: red;”>.

Jedna wielka grafika – to poważny błąd e-mail marketingowy, kiedy wiadomość zostaje wysłana jako jeden wielki obrazek. Przede wszystkim tego typu wiadomości praktycznie zawsze trafiają do spamu, a blokowanie obrazów sprawia, że internauta początkowo widzi wielkie puste, białe pole. Grafiki powinny być bezwzględnie pocięte na mniejsze części, uzupełnione o znacznik alt, a wiadomość należy wzbogacić o słowo pisane, aby zmniejszyć stosunek grafiki do tekstu.

Aktywne łącza – wysyłając mailing HTML, należy pamiętać, że w większości webmaili i programów pocztowych linki nie staną się automatycznie aktywne (klikalne), tak jak dzieje się to w przypadku wiadomości tekstowych. Każdy link w wiadomości HTML powinien zostać stworzony poprzez znacznik <a> i najlepiej uzupełniony o parametr target=”_blank”.

Testowanie – pamiętajmy, że każdego dnia nasze mailingi będą trafiały do dziesiątków różnych programów pocztowych i webmaili, a nierzadko również telefonów i innych urządzeń mobilnych. Przy tak zróżnicowanym oprogramowaniu odbiorczym trudno o poprawność wyświetlania wiadomości, dlatego należy naszą kreację przetestować na możliwie największej ilości zróżnicowanych skrzynek pocztowych, aby mieć pewność, że czytelnik widzi dokładnie to samo, co chcieliśmy mu wysłać.

Słowo zachęty

Niezwykle trudno jest zaprojektować dobry szablon HTML, który będzie uwzględniał potrzeby marketingowe firmy, przy jednoczesnym spełnieniu wielu restrykcyjnych wymogów technicznych. Należy jednak pamiętać, że wszystkie te korzyści, wymienione na początku artykułu, w pełni zrekompensują nam poczynione w tym kierunku nakłady pracy.

 


Artykuł pochodzi z miesięcznika Mensis.pl nr 4, luty 2012. Autor: Robert Wiliński.


1 komentarz

  1. Bodzio 19-12-2013

Zostaw odpowiedź