Jak ugryźć HTML w programie pocztowym?

Tomasz Pakulski z firmy Vercom, dostawcy platformy Redlink.pl do efektywnej komunikacji bezpośredniej 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 najlepiej zastosować standard HTML 4.01 zamiast, coraz popularniejszego, XHTML.

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=”center” 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 styli 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ści np.: <p><font size=1>Przykładowy tekst.</font></p>. 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ą newslettery 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: <img src=”grafika.png” border=”0” alt=”Zobacz jak wygląda nasz produkt”>.

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.

Źródło: BEST image PR, 2010-09-09