Wraz z dynamicznym rozwojem Internetu rośnie liczba programów i serwisów służących do obsługi poczty elektronicznej. O ile różnorodność sprzyja przy wyborze oferty, o tyle skomplikowane zasady rządzące wysyłką wiadomości HTML to nieraz ciężki orzech do zgryzienia dla użytkowników i przedsiębiorców zgłębiających tajniki tego języka.
Tomasz Pakulski z firmy Vercom, dostawcy platformy Redlink.pl podpowiada, jak przygotować szablon HTML dla wiadomości
e-mail, aby zagwarantować jej prawidłowe wyświetlenie we wszystkich programach pocztowych.
W czym tkwi problem?
Producenci prześcigają się oferując całe mnóstwo aplikacji desktopowych. Mamy takie
programy, jak: Windows Live, Microsoft Outlook, Outlook Express, The Bat, Thunderbird,
Lotus Notes, a także aplikacje webowe (tzw. Webmaile), czyli: Gmail, Onet, WP, Interia,
O2, AOL, YAHOO i wiele innych.
Dość często bywa, że ta sama wiadomość zostaje w różny sposób wyświetlona w
zależności od używanej aplikacji do odbioru poczty. Fakt ten wynika z odmiennej
interpretacji kodu HTML, XHTML oraz CSS. Co więcej, na tym polu zawodzą nawet
najbardziej znane marki, jak: Gmail, Lotus czy rodzina programów Outlook (w tym
najpopularniejsze wersje 2003 i 2007). Warto podkreślić, że dyskusja na temat
standardów sieciowych jest jednym z najczęściej poruszanych tematów w świecie biznesu
internetowego, jednak optymalnych rozwiązań wciąż nie widać.
Po pierwsze – kodowanie
Rozpoczynając projektowanie szablonu HTML dla wiadomości e-mail wbrew pozorom najlepiej zastosować
standard HTML 4.01.
Generalnie polskie znaki diakrytyczne mogą być kodowane w jednym z trzech
standardów – Windows-1250, ISO-8859-2 (tzw. Latin-2) lub UTF-8. Na obecną chwilę
najlepsze możliwości daje kodowanie w standardzie ISO-8859-2. Dlaczego? Ponieważ
bezproblemowo interpretuje go największa liczba klientów pocztowych dostępnych na
rynku. Dla porównania – starsze aplikacje nie obsłużą nowego UTF-8, a Windows-1250
poprawnie wyświetli się wyłącznie w programach z rodziny Microsoft.
Po drugie – postaw na klasykę
Wspomniana na początku różnorodność aplikacji pocztowych nie sprzyja stosowaniu
nowoczesnych rozwiązań przy projektowaniu szablonów e-mail. Dlatego do określenia
wyglądu wiadomości najlepiej zamiast stylów czy warstw zastosować tabele, choć te
pierwsze stają się coraz bardziej popularne przy projektowaniu stron internetowych.
Choć przestarzałe, tabele pozwolą na poprawne wyświetlanie treści e-maila w wielu
programach pocztowych – a o to właśnie chodzi.
Tabele oraz komórki powinny mieć stałą, określoną szerokość – optymalna to
500-600 pikseli dla całej wiadomości. Większa szerokość sprawi, że w niektórych
programach desktopowych lub Webmailach e-maile będą niewidoczne w całości, co w
przypadku przewijania poziomego negatywnie wpłynie na czytelność danego e-maila.
Wysokość wiadomości nie musi być limitowana, ponieważ większość Internautów i tak
przyzwyczajona jest do paska przesuwania pionowego.
Do wyśrodkowania kreacji zaleca się stosowanie atrybutu „align” w tabeli. Z kolei
marginesy można określić przy zastosowaniu znaczników cellMargin. Należy wiedzieć, że
niektóre programy do odbioru poczty nie obsługują atrybutów cellpadding i cellspacing,
stąd bezpieczniej jest zrezygnować z ich stosowania. Absolutnie niedozwolone jest
pozycjonowanie tekstu przy pomocy funkcji position: absolute. Odradza się również
używanie atrybutu rowspan dla znacznika td służącego łączeniu wierszy w kolumnie.
Wiele programów nie poradzi sobie z tak przygotowanym kodem, co spowoduje błędne
wyświetlenie wiadomości e-mail – alternatywą będzie tworzenie tabel wewnętrznych.
Stosowanie stylów jest jednym z najbardziej zawodnych elementów przy przygotowywaniu
szablonu HTML. Dzieje się to dlatego, że niemal każda aplikacja, czy to desktopowa, czy
webowa, interpretuje je na swój własny sposób – zazwyczaj odmienny od zamierzonego.
Warto wspomnieć tu chociażby o Webmailu Interia, który ich w ogóle nie obsługuje.
Należy też pamiętać o unikaniu definiowania stylów w sekcji HEAD, gdyż większość
Webmaili pomija bądź usuwa tę część kodu wraz ze znacznikiem BODY.
W przygotowywanym projekcie e-maila najlepiej stosować standardowe czcionki, takie
jak np.: Verdana, Tahoma, Arial lub Times New Roman z określeniem ich wielkość. Takie rozwiązanie
zapewni prawidłowe wyświetlanie tekstu w większości programów pocztowych.
Po trzecie – backup plan
Bardzo często osoby, które na co dzień wysyłają {link_wew 5798}newslettery{/link_wew} i wiadomości promocyjne
nie zdają sobie sprawy, że nadal spora część odbiorców poczty elektronicznej świadomie
lub z braku możliwości technicznych nie odbiera wiadomości w formacie HTML.
Co to oznacza? Jeżeli odbiorca otworzy wiadomość w trybie tekstowym nie zobaczy
ani obrazów, ani formatowania tekstu. Dlatego jeśli do przygotowywanej przez nas
kreacji szablonu HTML nie dołączymy tekstu zastępczego, wiadomość może okazać się
nieczytelna lub nie wyświetlić się w ogóle. Przygotowując wysyłkę reklamową warto
zatem skorzystać z funkcji dołączania do treści e-maila tekstu zastępczego, co dostępne
jest np. w platformie komunikacyjnej Redlink.pl. To działanie z pewnością zwiększy
liczbę sukcesywnie dostarczonych informacji, a co za tym idzie, przełoży się na większą
skuteczność przeprowadzonego mailingu.
Po czwarte – blokujemy obrazki
Ze względów bezpieczeństwa większość obecnych na rynku programów pocztowych
automatycznie blokuje wyświetlanie obrazków w korespondencji e-mail. Warto o tym
pamiętać projektując szablon HTML. Obrazki mogą podkreślać treść, wzbogacać ją
graficznie, ale nie mogą być niezbędne do odczytania wiadomości. Wiele firm, skuszonych
atrakcyjnym efektem wizualnym, zapomina o tej zasadzie.
Jednocześnie istnieje spora szansa, że odpowiednio zaimplementowana grafika w
szablonie e-mail zostanie pobrana przez odbiorców. Dopuszczalne rozszerzenia obrazków
w wiadomości to jpg, gif oraz png. Powinny być one umieszczane w kodzie HTML przy
użyciu znacznika img src i uzupełniane atrybutem alt, który pozwala na wstawienie
tekstu zamiennego (wyświetlanego w momencie blokady obrazków). Jeżeli obrazek jest
podlinkowany należy dodatkowo zdefiniować atrybut border=”0″. Przykład prawidłowego
osadzenia obrazka w e-mailu przedstawia się następująco:
Poleca się także załączanie grafik do treści e-maila zamiast umieszczania ich na
zewnętrznym serwerze WWW. Pamiętajmy jednak, aby załączane obrazki nie były zbyt
duże. Wskazane jest bowiem, aby wiadomości e-mail były jak najmniejsze.
Po piąte – zrezygnuj z tła
Spora część Webmaili, w tym także bardzo popularny Outlook 2007, nie wyświetla
obrazków umieszczanych jako tło. Warto więc zastanowić się czy nie lepiej zrezygnować
z obrazkowego tła na rzecz jednolitego (znacznik bgcolor). W ostateczności można użyć
atrybutu background dla znacznika td, który pozwoli wyświetlić tekst na jednolitym tle,
jeśli zablokowane zostało tło obrazkowe.
Kilka słów na zakończenie
Projektując mailing warto zrezygnować z użycia elementów takich, jak: JavaScript czy
Flash – są one pomijane przez większość popularnych programów pocztowych. Warto
natomiast wesprzeć się o opensourcowy projekt Alex’a Dunae o nazwie „PREMAILER”
– narzędzie to pozwala na sprawdzenie stworzonego kodu HTML pod kątem
kompatybilności z najpopularniejszymi programami pocztowymi. Narzędzie poprawia
również kod eliminując podstawowe błędy (np. zmianę adresów – linków, odwołania do
plików – z względnych na bezwzględne). Na podstawie wprowadzonego kodu program
generuje dodatkowo wersję tekstową wiadomości.
Powyższe rozważania oczywiście nie wyczerpują tematu prawidłowego projektowania
szablonu HTML dla korespondencji e-mail. Wskazują jednak na te elementy, które mają
kluczowy wpływ na skuteczność prowadzonej kampanii.
