Specyfikacja tworzenia e-maili
Z WikiDirect
Specyfikacja przygotowana przez IMP eDirect dotycząca tworzenia kodu HTML e-maili oraz porady, czego unikać i jakie techniki zastosować, aby zwiększyć skuteczność docieralności e-maili. Zapraszamy do zapoznania się, stosowania oraz zgłaszania uwag na help@jetmail.pl [1].
Temat
Jednym z podstawowych elementów decydujących o skuteczności mailingu reklamowego stanowi TEMAT e-maila. Odbiorca, aby odczytać wiadomość musi zainteresować się tematem wiadomości. Jeśli będzie ona sucha, tematycznie nieatrakcyjna albo będzie sugerowała SPAM, odbiorca w ogóle nie obejrzy wiadomości. Jeżeli dysponuje się danymi typu imię odbiorcy, warto spersonalizować temat, który może brzmieć np.:
Krzysiek, poznaj najnowsze trendy w projektowaniu wnętrz
Nadawca
W myśl zgody firm członkowskich IAB Polska obowiązuje umowa, że wysyłka musi być realizowana z adresu i z podpisem WŁAŚCICIELA DANYCH. Jeżeli wysyłka reklamowa jest realizowana dla innej firmy przyjęto, iż jest ona także wymieniana w podpisie Nadawcy, a odpowiedzi na wysyłkę kierowane są na jej e-maila.
Przykładowo:
Adres e-mail nadawcy: mail@wlasciciela.bazy.danych.pl
Nadawca: WŁAŚCICIEL DANYCH/ ZLECENIODAWCA MAILINGU
Adres zwrotny: mail@zleceniodawcy.pl
Stopka
Istotnym elementem wysyłki e-mailingowej jest tzw. stopka, czyli informacja która powiadamia odbiorcę
1. DLACZEGO OTRZYMAŁ daną wysyłkę.
2. CO powinien ZROBIĆ, aby zostać usuniętym z bazy danych, z której zaczerpnięty został jego e-mail.
Jest to ważne w świetle ustawy z dnia 29 sierpnia 1997 r. o ochronie danych osobowych[2].
Kodowanie polskich znaków
Polskie znaki, czyli "ąćęłńóśźż" muszą zostać zakodowane w jednym z trzech standardów. Są to Windows-1250, ISO-8859-2 (tzw. Latin-2) oraz UTF-8. Najmniej problematycznym i najbardziej uniwersalnym standardem jest ISO-8859-2, który z czasem zastąpiony zostanie najnowszym UTF-8. Wysoce sugerujemy kodować e-mailingi w standardzie ISO, bowiem jest on dopasowany do największej ilości klientów poczty (programów pocztowych). Starsze systemy niestety nie obsługują nowego UTF-8. Najmniej uniwersalny jest Windows-1250, który jest obsługiwany niemal tylko przez systemy operacyjne Microsoftu.
Treść HTMLowa i tekstowa
Użytkownicy mogą na dwa sposoby odczytać wiadomość. Mogą mieć włączoną obsługę HTML, wtedy zobaczą obrazki, pogrubienia, zróżnicowane czcionki i planowany układ.
Jeżeli użytkownik otwiera wiadomości w trybie tekstowym, nie widzi obrazków ani formatowania tekstów. Jeśli w przygotowanej kreacji HTMLowej jest sformatowany tekst, a nie same obrazki, tekst będzie widoczny w całości, ale niekoniecznie w optymalnie czytelny sposób. Dlatego przygotowując wysyłkę reklamową, warto przygotować także wersję tekstową (taką, jak w Notatniku systemu Windows).
Należy zaznaczyć, że tekstowo odczytane wiadomości NIE SĄ uwzględniane w statystykach. Przez system Jet.Mail (i każdy inny) są uznawane za wiadomości nieotwarte.
Wersja HTML
Optymalnie jest używać HTML 4.01, zamiast obecnie coraz popularniejszego XHTML.
Wymiary kreacji HTMLowej
Optymalna szerokość kreacji to 500 pikseli, choć kreacje do 600 pikseli też są w pełni dopuszczalne. Szersze kreacje w wielu programach pocztowych w przypadku małej rozdzielczości ekranu u odbiorcy będą niewidoczne w całości - pojawią się paski przewijania - co w przypadku szerokości jest niekorzystne z perspektywy wygody odbiorcy i czytelności przekazu.
Wysokość mailingu nie jest zwykle ograniczana, bowiem przesuwanie w pionie jest praktyką używaną na co dzień i nie jest odczuwalna przez odbiorcę jako coś niekorzystnego.
Blokowanie obrazków
Wielu odbiorców korzysta z portali internetowych lub aplikacji do przeglądania poczty (np. MS Outlook 2007 pod Windows Vista), które blokują obrazki z powodu bezpieczeństwa. Dlatego tworząc kreację należy pamiętać o takiej możliwości i zadbać o to, by przy zablokowanych obrazkach odbiorca COŚ widział co albo:
1. Nakłanianie w sposób interesujący do odblokowania obrazków
Są dwie możliwości: a) Tekst poza obrazkami jest na tyle interesujący, że odbiorca po przeczytaniu ciekaw jest, cóż takiego jest pod obrazkiem. Innymi słowy treść tekstowa współtworzy z obrazkami jedną całość. b) Obrazki mają zdefiniowany atrybut ALT, którego treść sugeruje odblokowanie obrazków
2. Prezentować będzie treść reklamową pomimo braku obrazków
Obrazki duplikują treść tekstową, wzbogacają ją wizualnie, ale nie są niezbędne do odczytania pełni treści.
Style (Cascading Style Sheet)
Style CSS to najdelikatniejszy i najbardziej zawodny element w kreacji e-mailingowej. Niemal każda aplikacja czy portal do przeglądania poczty interpretuje style inaczej. Na przykład domyślny interface Interia.pl w ogóle nie obsługuje styli. Podstawą wykorzystania jest wystrzeganie się styli definiowanych w HEAD, bowiem większość portali obcina tę część kodu wraz z samym znacznikiem BODY.
Po przeprowadzeniu wielu prób okazało się, że najbezpieczniejszym znacznikiem do umieszczenia styli inline jest SPAN, a w przypadku linków A style powinny być duplikowane przez znacznik FONT z atrybutami COLOR, SIZE, FACE. SPAN powinien w takim przypadku znaleźć się wewnątrz znacznika FONT.
UWAGA! Niektóre programy do odbioru poczty e-mail nie obsługują atrybutów "margin" i "padding", dlatego zaleca się ich nieużywanie, lub ustawienie wartości na "0".
Obrazki w tle
Część portali www usuwa w podglądzie obrazki w tle, na przykład Wirtualna Polska lub nie obsługuje stylu BACKGROUND-IMAGE. MS Outlook 2007 pod Windows Vista zaszyty obrazek tła dodaje jako załącznik, ale nie prezentuje go w kreacji. Dlatego już podczas tworzenia kreacji należy zastanowić się, co stanie się z kreacją, jeśli obrazek w tle (tło tekstu) nie pojawi się.
1. Można zupełnie zrezygnować z tła obrazkowego na korzyść jednolitego podczas projektowania kreacji.
2. Można tekst umieścić w samym obrazku jako IMG, a w atrybut ALT wpisać treść, aby w przypadku blokady obrazka odbiorca mógł się z tekstem zapoznać. Niestety atrybut ALT nie jest pokazywany w wersji tekstowej e-maila, ani np. w prezentacji e-maila w komórkowych programach poczty (Gmail Mobile, Era Mail).
3. Można w końcu użyć atrybutu BACKGROUND dla znacznika TD (metoda preferowana umieszczania tła) i ustawić BGCOLOR w kolorze uśredniającym kolorystykę obrazka - aby gdy ten jest zablokowany, tekst pojawił się na jednolitym tle.
Tabele a warstwy
W e-mailingu należy skoncentrować się na tabelkowej budowie e-mailingów. Jest to metoda, która przy tworzeniu stron odchodzi do lamusa z powodu braku czytelności w przeglądarkach niestandardowych. Jednakże ponieważ kreacje reklamowe z reguły starają się utrzymać konkretny wygląd w większości programach pocztowych, radzimy używać takich 'przedawnionych' metod.
Jednak takie rozwiązanie nie jest uniwersalne i są przypadki, gdzie stosowanie warstw w postaci bloków DIV może być uzasadnione. Zasadą absolutną jest wystrzeganie się używania pozycjonowania absolutnego (POSITION: ABSOLUTE).
UWAGA! Niektóre programy do odbioru poczty e-mail nie obsługują atrybutów "cellpadding" i "cellspacing" w znacznikach tabeli, dlatego zaleca się ich nieużywanie, lub ustawienie wartości na "0".
Łączenie wierszy w tabeli (rowspan)
należy unikać za wszelką cenę atrybutu ROWSPAN dla znacznika TD, bowiem u wielu starszych programach nie jest on obsługiwany, w wyniku czego kreacja zostanie źle wyświetlona. Można łączone kolumny zastąpić kolejną wewnętrzną tabelą (tabela w tabeli).
Dobre praktyki przy tworzeniu kreacji
1. Należy starać się zmieścić w 600 pikselach szerokości, a najlepiej w 500 pikselach.
2. Wysoce rekomendowany jest czytelny i atrakcyjny tekst dla wersji tekstowej wiadomości jako alternatywę dla wiadomości HTMLowej.
3. Wskazane jest tworzenie e-maili tak, aby ich waga była najmniejsza.
4. Duże obrazki znacznie zwiększają wagę e-maila.
5. Grafika z płynnymi przejściami kolorów (zdjęcia) powinna być zapisywana w formacie JPG.
6. Grafika kilku kolorowa powinna być zapisywana w formacie GIF lub PNG (8bit).
7. Kompresja koloru czerwonego w formacie JPG jest bardzo mało wydajna.
Żelazne reguły tworzenia kodu HTML pod e-mailingi
1. Definiuj atrybut ALT dla obrazków tak, aby gdy obrazki są zablokowane, treść nie umykała odbiorcy lub tak, aby go nakłonić do odblokowania obrazków.
2. Definiuj atrybut BORDER="0" dla obrazków. Jest to szczególnie ważne, jeśli obrazek jest podlinkowany.
3. Style należy definiować tylko inline, czyli poprzez atrybut STYLE wewnątrz tagu.
4. Jeżeli jakąś własność można zdefiniować bez użycia styli, należy to zrobić - głównie poprzez tag FONT.
5. Style inline należy definiować przede wszystkim w znacznikach SPAN i A. Większość styli w innych znacznikach będzie gubiona w portalach.
6. Jeżeli znacznik IMG znajduje się w tabeli i jest elementem 'puzzle' tworzącym większą całość z innymi obrazkami, upewnij się, że bezpośrednio sąsiaduje z otwarciem i zamknięciem znacznika TD i nie ma między nimi spacji ani końca linii.
7. Używaj atrybutu BGCOLOR, aby utrzymać kolorystykę całości w wypadku, gdy obrazki są zablokowane. Przetestuj, czy efekt jest zadowalający.
8. Aby wyśrodkować kreacje używaj znacznika TABLE z atrybutem ALIGN="center".
9. Wystrzegaj się pozycjonowania absolutnego (POSITION: ABSOLUTE).
10. Używaj HTML 4.01 zamiast XHTML.
