STANDARDY KODOWANIA MAILINGÓW

Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? II. Budowa nagłówka wiadomości. III. Style kaskadowe CSS. IV. Elementarna budowa szablonu. V. Podsumowanie. 2 I. Dlaczego standardy kodowania mailingów są istotne? Wraz z niepohamowanym rozwojem branży internetowej stale wzrasta konkurencja wśród producentów przeglądarek internatowych, klientów pocztowych jak również stale wyłaniających się serwisów pocztowych. Niestety pomimo rozwiniętej literatury przedmiotu nie wszystkie produkty obecne na rynku, zostały wyposażone w odpowiednio skonfigurowany interpreter poleceo kodu HTML, XHTML oraz CSS. Dyskusja na temat standardów sieciowych jest jedna z najczęściej przywoływanych w świecie biznesu internetowego. W jaki sposób standardy sieciowe wpływają na klientów branży wirtualnej? Przede wszystkim odpowiednio przestrzegane, umożliwiają redukcję kosztów związanych z trafnością i jakością dostarczanych informacji, z drugiej strony udostępniają użytkownikom większą swobodę w projektowaniu i budowaniu własnego wizerunku. FreshMail jest firmą dla której najważniejszymi celem jest funkcjonalnośd na najwyższym poziomie, oparta o kontakt z klientem w ramach wszystkich kanałów komunikacji, dlatego też prezentujemy Paostwu specyfikację będącą swoistym, praktycznym przygotowaniem do samodzielnego budowania szablonów mailingowych w oparciu o standardy sieciowe. 3 II. Budowa nagłówka wiadomości Poprawny kod nagłówka wiadomości:  <html> <head>  <style type = text/css > a {  } body{  }  </style> KOMENTARZ: definicja styli CSS pomiędzy znacznikami <HEAD> sprawia, że zostają one pomijane w niektórych aplikacjach takich jak Gmail, Hotmail czy też Interia.pl. Metoda odradzana. </head> III. Style kaskadowe CSS Atrybuty CSS, umożliwiają strukturalne wystylizowanie przygotowywanego mailingu. Dla poprawnego ich zaimplementowania doradza się stosowania tzw. style inline, oznaczającej definiowanie poszczególnych znaczników kodu HTML, XHTML za pomocą własności CSS w znaczniku body dokumentu.

Przykład poprawnego użycia: <td style="font-family:tahoma, Arial, Helvetica, sans-serif; font-size: 14px"> 4 IV. Budowa sekcji głównej szablonu Szablon mailingu powinien składad się z czterech podstawowych elementów: element pozycjonujący (wrapper) nagłówek (header) główna zawartość dokumentu (main body) stopka (footer) Kod dokumentu powinien byd oparty na tabelarycznej strukturze (table, tr, td). Dla poniższego przykładu stosujemy następujące właściwości: a. mailing jest wyśrodkowany w stosunku do obszaru okna b. szerokość dokumentu wynosi 610px Element pozycjonujący (wrapper): <html> <body>  <table width="610" border="0" align="center" cellpadding="0" cellspacing="0"> <td>    </body> </html> 5 Nagłówek (header):   <img style= display:block src="link do elementu graficznego" alt="alt" width="610" height="40" border="0">  KOMENTARZ: własność display:block dla atrybutu img zabezpiecza przed problemem pustych obszarów podczas umieszczania elementów graficznych wewnątrz tabeli. Główna część dokumentu (main body):!-- MAIN BODY CONTENT (zawartość główna dokumentu) --> <table width="610" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <td style="font-family:tahoma, Verdana, sans-serif; font-size: 11px" valign="top">  <table border="0" cellpadding="0" cellspacing="0" width="610">  <td valign="top" align="left" width="305" style="font-family:tahoma, Verdana, sans-serif; font-size:11px; >

<td valign="top" align="left" width="305" style="font-family:tahoma, Verdana, sans-serif; font-size:11px;">     6 Stopka (footer): <p style= font-size:10px > <resignlink> Link rezygnacji </resignlink> </p>  7 PRZYKŁADOWY POPRAWNY KOD: <html> <body>  <table width="610" border="0" align="center" cellpadding="0" cellspacing="0"> <td>   <img style= display:block src="link do elementu graficznego" alt="alt" width="610" height="40" border="0"> !-- MAIN BODY CONTENT (zawartość główna dokumentu) --> <table width="610" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <td style="font-family:tahoma, Verdana, sans-serif; font-size: 11px" valign="top">  <table border="0" cellpadding="0" cellspacing="0" width="610">  <td valign="top" align="left" width="305" style="font-family:tahoma, Verdana, sans-serif; font-size:11px; >    <td valign="top" align="left" width="305" style="font-family:tahoma, Verdana, sans-serif; font-size:11px;">    <p style= font-size:10px > <resignlink> Link rezygnacji </resignlink>

</p>   </body> </html> 8 V. Podsumowanie 1. Kodujemy w standardzie ISO-8859-2 (tzw. Latin-2). Pozostałe kodowania Windows-1250 oraz UTF 8 są zdecydowanie bardziej problematyczne, dlatego zalecamy korzystanie z tego pierwszego. 2. Przygotowany szablon powinien w całości opierad się na formie tabelarycznej odpowiednio sformatowanej przy pomocy stylów CSS. 3. Szerokośd maila, którą rekomendujemy to ok. 600 px. Zazwyczaj, możemy polecid przedział pomiędzy 500 a 600 pikseli. Większe kreacje u użytkowników, którzy korzystają z ekranów o mniejszej rozdzielczości, mogą wymagad przewijania w poziomie, a jak wiadomo jest to niezgodne z utartymi zasadami użyteczności i projektowania. 4. Konieczne, przy załączaniu w e-mailu elementów graficznych, jest stosowanie tagu alt, z odpowiednio przygotowaną treścią, przekonywującą do pobrania grafiki, gdy jest ona automatycznie blokowana (np. Pobierz grafikę i zobacz co przygotowaliśmy dla Ciebie ). Do każdego obrazka dodajemy border="0" i display:block. 5. Najlepiej stosowad czcionki Verdana, Tahoma, Arial lub Times New Roman z określeniem ich wielkości. 6. Zalecamy też aby nie używad atrybutu <style> w sekcji HEAD. 7. Grafiki umieszczane w tle (table>td> lub tr>) mogą byd niepoprawnie wyświetlane w niektórych programach pocztowych. Dlatego też zalecamy użycie atrybutu bgcolor. 8. Wiadomośd e-mail powinna posiadad link rezygnacji. Żeby go wstawid wystarczy aby w stopce dokumentu zamieścid link poprzez znacznik $$resignlink$$ lub zapisując dowolny tekst pomiędzy znacznikami <resignlink> i </resignlink>. 9. Wszelkie bloki dokumentu zawierające kod powiązany z językiem Javascript lub Flash są przeważnie pomijane przez większośd popularnych programów pocztowych. 10. Import własnego szablonu do systemu FreshMail polega na spakowaniu plików dokumentu w formacie ZIP. Struktura takiego katalogu po rozpakowaniu powinna zawierad plik główny z rozszerzeniem.html, oraz pliki graficzne w dowolnym formacie wskazanym w dokumencie. 11. Wiadomośd nie powinna mied więcej niż 100 kb aby nie zapychad skrzynek Twoich klientów :-) 12. Zamiast <p> lepiej użyd znacznika <span>. Sprawia mniej problemów.

13. Paddingi nie zadziałają. Wszelkie przestrzenie uzyskujemy tylko poprzesz zakodowanie pustych komórek tabel o określonych szerokościach. 14. Wszystkie szerokości tabel i komórek w nich zawartych muszą zgadzad się co do piksela i muszą byd określone (chodby HTML-owo). 15. Im więcej w newsletterze tekstu, tym lepiej. Obrazki nie zawsze otwierają się domyślnie. Czasami trzeba kliknąd "Pobierz obrazki", żeby je zobaczyd. Tekst widzimy od razu. Dlatego mailing, który powstał w oparciu tylko o obrazki to nie jest dobry pomysł. Ponadto, zbyt duże obrazki (rozmiarowo/wagowo) najprawdopodobniej spowodują, że newsletter wpadnie w spam. Jeżeli taka sytuacja się zdarzy, trzeba je pociąd na mniejsze. 16. Atrybut line-height jest bardzo trudny do kontrolowania. W każdym kliencie pocztowym interpretowany jest nieco inaczej. Dlatego nie zaleca się projektowania kreacji newsletterów, w których występują boksy otoczone borderem z zaokrąglonymi rogami. Tych ostatnich nie da się bowiem skodowad czystym HTML-em, czy CSS-em. Wstawianie borderów, jako grafiki jest z kolei bardzo ryzykownym przedsięwzięciem. * Wszelkie informacje dotyczące problemów, spostrzeżeo związanych z kodowaniem i przygotowywaniem szablonów mailingowych prosimy wysyład na nowo uruchomiony adres css@freshmail.pl 9