Technologia CSS w aplikacjach pocztowych

Transkrypt

1 Technologia CSS w aplikacjach pocztowych Wytyczne dla projektantów newsletterów Raport FreshMail Maj 2010

2 Spis treści Wstęp 03 Metodologia badao 04 Wyniki badao praktycznych rad dla Front End Developerów 11 Przepis na idealny mailing 13 Kod przykładowego mailingu 14 Przydatne Linki 21 Możliwości FreshMail 22 Zapraszamy do współpracy / kontakt 24 Dodatek: szczegółowe wyniki badania 25 2

3 Wstęp Kaskadowe arkusze stylów CSS to technologia pozwalająca w swobodny sposób manipulowad warstwą prezentacyjną dokumentów (X)HTML. Technologia ta powstała pod koniec 1996 roku, wraz z rozwojem branży internetowej stała się jednym z nieodzownych elementów nowoczesnych rozwiązao internetowych. Zastosowanie CSS nie ominęło również e-marketingu, gdzie arkusze stylów wyznaczyły nowe trendy w projektowaniu szablonów mailingowych. Dziś, rozwój technologii CSS zdecydowanie wyprzedza możliwości klientów pocztowych, zarówno tych desktopowych, jak również webowych. Jakośd i możliwości interpretacji właściwości CSS różnią się w zależności od używanych narzędzi, których szeroko rozumiana kompatybilnośd pozostawia wiele do życzenia. Narzędzia do obsługi poczty elektronicznej, mimo że obsługują określone właściwości CSS, często interpretują je w sposób nieadekwatny do dokumentacji przygotowanej przez twórców kaskadowych arkuszy stylów. Niniejsza publikacja jest przewodnikiem spełniającym dwa główne cele. Pierwszy i najważniejszy z nich to prezentacja podstaw merytorycznych umożliwiających przygotowanie szablonu ingu, którego wygląd w poszczególnych klientach pocztowych i webmailach nie będzie różny od zamierzeo jego projektantów. Kolejne zadanie to zaprezentowanie koderom oraz osobom związanych z e-marketingiem podstawowych błędów popełnianych przy przygotowywaniu projektów mailingowych. Całośd raportu to także unikalna baza wiedzy na temat właściwości CSS obsługiwanych przez poszczególne aplikacje pocztowe, która będzie znakomitym źródłem informacji i dobrych praktyk dla web developerów. Jarosław Królewski manager badania 3 Raport FreshMail Technologia CSS w aplikacjach Odwiedź blog pocztowych oraz bazę wiedzy FreshMail na

4 Metodologia badao Badania nad technologią CSS w aplikacjach pocztowych rozpoczęła analiza dostępnej obecnie na rynku literatury. Niepodważalnym źródłem inspiracji były raporty, które dla potrzeb klientów przygotowane zostały przez specjalistów z CampaignMonitor. Materiały te nie wyczerpują jednak do kooca tematyki dotyczącej CSS w marketingu, w szczególności jeśli chodzi o aplikacje dostępne na polskim rynku. W ramach badao nad technologią CSS wykonaliśmy szereg testów opartych na specjalnie przygotowanych szablonach ingowych, które dostarczały informacji na temat interpretacji właściwości CSS w poszczególnych narzędziach. Badaliśmy je także podczas codziennych zmagao z szablonami, które przygotowujemy dla naszych klientów. Już po pierwszych testach i weryfikacji właściwości CSS zdaliśmy sobie sprawę, jak ważne jest projektowanie szablonów mailingowych oparte nie tylko na najnowszych standardach kodowania, ale przede wszystkim na doświadczeniu, które oznacza znajomośd najpopularniejszych dysfunkcji narzędzi dostępnych na rynku. W celu pełnego przedstawienia wsparcia CSS przez poszczególne aplikacje pocztowe prezentujemy wyniki badao dla najpopularniejszych z nich, analizując dodatkowo wpływ silników przeglądarek internetowych na sposób wyświetlania wiadomości . Nie ulega wątpliwości, że badania nad zastosowaniem technologii CSS w marketingu są nieco niewdzięczne. Ilośd wyjątków oraz różnego rodzaju problemów, zależnych nawet od sposobu formatowania kodu (np. problem białych znaków w kodzie po znaczniku <img>) sprawiają, że bardzo trudno stworzyd dokument kompletny, który pozbawiony byłby najmniejszych błędów. Nie mniej warto posiadad wiedzę przedstawioną w raporcie i na bieżąco ją wzbogacad. Sprzęt i oprogramowanie Podczas badao nad zastosowaniem technologii CSS w marketingu użyto następującego sprzętu, oprogramowania, przeglądarek internetowych: Komputer klasy PC AMD Athlon 64 X@ Dual Core Processor 4000+, 2.10 Ghz 2 GB Ram 32-bitowy system operacyjny Windows Vista Ultimate Service Pack 1 Apple MacBook Pro 15 Intel Core 2 Duo 2.8 Ghz 4 GB Ram 4

5 Aplikacje webowe Aplikacje desktopowe Przeglądarki internetowe aol.pl Apple Mail 3.6 Google Chrome 3.0 duno.pl Microsoft Office Outlook 2003 Internet Explorer 6.0 gazeta.pl Microsoft Office Outlook 2007 Internet Explorer 7.0 gery.pl Microsoft Office Outlook 2010 (beta) Internet Explorer 8.0 gmail.com Mozilla Thunderbird 2 Mozilla Firefox 3.5 home.pl The Bat! Mozilla Firefox 2.0 hotmail.com Windows Mail Opera 9.63 interia.pl Lotus 8.5 Safari 4.0 nazwa.pl Lotus 6.5 o2.pl onet.pl pino.pl poczta.pl prokonto.pl vivapolskatv.pl wp.pl yahoo.com 5

6 Algorytm oceny aplikacji pocztowych Podczas badao przetestowano 26 aplikacji pocztowych, z czego 9 to programy desktopowe a pozostałe to aplikacje webowe. Przy interpretacji wyników wzięto również pod uwagę wpływ 8 najpopularniejszych przeglądarek internetowych na sposób prezentacji szablonów mailingowych. Bardzo często dochodzi do sytuacji, w których klienci zastanawiają się dlaczego ingi przez nich zaprojektowane wyglądają różnie w poszczególnych przeglądarkach, mimo, że np. dana aplikacja pocztowa obsługuje określone właściwości CSS. Powodem takich rozbieżności są silniki przeglądarek, wpływające na sposób prezentacji warstwy wizualnej szablonu. Skala ocen, którą zastosowaliśmy do badania poszczególnych aplikacji, została podzielona według skali 3-stopniowej, opartej na poniższym wzorze: Liczba wspieranych właściwości CSS * współczynnik wsparcia CSS = Liczba badanych właściwości CSS (69) x 100 * najwyższy wynik wśród analizowanych przeglądarek dla danej aplikacji pocztowej Podczas analizy aplikacji webowych w zależności od przeglądarki, określono ryzyko stosowania danej właściwości CSS, które (w oparciu o aktualny udział przeglądarek w rynku internetowym) informuje nas jaki potencjalny odsetek użytkowników narażony jest na niepoprawne wyświetlenie się wiadomości w danej aplikacji pocztowej. Badane przez nas przeglądarki pocztowe stanowią obecnie około 92% polskiego rynku (ranking.pl ). Liczba ta oznacza w naszym przypadku maksymalny poziom ryzyka podczas używania określonej właściwości CSS. Współczynnik wsparcia właściwości CSS w aplikacjach pocztowych opis procent wysokie powyżej 50% średnie 30-50% niskie poniżej 30% 6

7 Wyniki badao Sposób interpretacji CSS jest różny w poszczególnych aplikacjach pocztowych. Na poniższych stronach przedstawiamy zestawienie wsparcia własności CSS dla 26 najpopularniejszych w Polsce aplikacji pocztowych. Badania aplikacji pocztowych potwierdziły, jak bardzo różnorodne są narzędzia obecnie dostępne na rynku. Wśród aplikacji desktopowych zdecydowanie prym wiedzie Mozilla Thunderbird, która niemal bezbłędnie interpretuje dostępne właściwości CSS. Niewiele gorzej wypada Apple Mail, plasując się na drugim miejscu. Rozczarowują natomiast mało popularny The Bat oraz powszechnie używany Microsoft Outlook 2007, który - co ciekawe radzi sobie gorzej z interpretacją CSS niż jego poprzednik - Outlook Wśród aplikacji webowych, najgorzej wypadają skrzynki pocztowe korzystające z systemu Google (gmail.com, gazeta.pl, viva-polska.tv), które niemal połowę właściwości CSS kompletnie pomijają. Biorąc pod uwagę liczbę użytkowników korzystających z tych aplikacji nie można ich ignorowad podczas tworzenia kampanii mailingowej. Zwród uwagę na ostatnią kolumnę tabeli o nazwie Ryzyko stosowania. Pozwoli ci ona szybko podjąd decyzję o tym czy można bezpiecznie korzystad z danej właściwości CSS (wyniki na zielonym tle), czy lepiej z niej zrezygnowad (wynik czerwoną czcionką). Atrybuty oznaczone czarną czcionką niosą za sobą ryzyko nieprawidłowej interpretacji, jednak w drodze wyjątku można z nich w miarę bezpiecznie korzystad. Porada: FreshMail posiada funkcjonalnośd pozwalającą na określenie z jakich klientów pocztowych korzystają subskrybenci (Raporty > Klienci pocztowi). Wiedza uzyskana z systemu FreshMail połączona z poniższą tabelą pozwoli lepiej dostosowad newsletter do grupy Twoich odbiorców. 7

8 Apple Mail 3.6 Windows Mail Thunderbird 2 Outlook 2007 Outlook 2003 The Bat Outlook 2010 beta Lotus 6.5 Lotus 8.5 Onet.pl Wp.pl Gmail.com Gazeta.pl VivaPolskaTv Poczta.pl Nazwa.pl Hotmail.com Duno.pl Gery.pl Yahoo.com Prokonto.pl Pino.pl o2.pl AOL.pl Home.pl Interia.pl Ryzyko stosowania aplikacje desktopowe aplikacje webowe KOD własnośd CSS I style element I - A <style></style> w sekcji <head> ,08% I - B <style></style> w sekcji <body> ,92% II link element II - A <link></link> w sekcji <head> ,15% II - B <link></link> w sekcji <body> ,00% III selektory III - A e ,92% III - B * ,62% III - C e > f ,31% III - D e:link ,92% III - E e:active ,62% III - F e:hover ,62% III - G e:focus ,31% III - H e+f ,31% III - I e[foo] ,62% III - J e.classname ,92% III - K e#id ,62% III - L e:first-line ,62% III - M e:first-letter ,62% 1 właściwości tła 1A background-color ,85% 1B background-image ,77% 1C background-repeat ,77% 1D background-position ,77% 2 właściwości obramowania 2A border ,85% 2B border-[position]-color ,54% 2C border-collapse ,85% 8

9 2D border-spacing ,46% 2E border-style ,85% 2F border-width ,85% 3 listy 3A list-style-image ,62% 3B list-style-position ,23% 3C list-style-type ,85% 4 czcionki 4A font-family ,00% 4B font-size ,00% 4C font-style ,00% 4D font-variant ,85% 4E font-weight ,00% 5 marginesy i wcięcia 5A margin ,69% 5B padding ,85% 6 własciwości tekstu 6A color ,85% 6B direction ,54% 6C letter-spacing ,69% 6D line-height ,85% 6E text-align ,00% 6F text-decoration ,00% 6G text-indent ,69% 6H text-transform ,69% 6I word-spacing ,08% 6J white-space ,92% 7 pozycjonowanie 7A bottom ,31% 7B caption-side ,23% 7C clear ,54% 7D clip ,85% 7E display ,54% 7F float ,54% 7G left ,31% 7H position ,31% 7I right ,31% 7J top ,31% 7K vertical-align ,85% 9

10 97% 84% 99% 54% 83% 41% 54% 16% 75% 83% 86% 49% 49% 49% 87% 75% 70% 65% 87% 77% 84% 70% 84% 86% 87% 68% Apple Mail 3.6 Windows Mail Thunderbird 2 Outlook 2007 Outlook 2003 The Bat Outlook 2010 Lotus 6.5 Lotus 8.5 Onet.pl Wp.pl Gmail.com Gazeta.pl VivaPolskaTv Poczta.pl Nazwa.pl Hotmail.com Duno.pl Gery.pl Yahoo.com Prokonto.pl Pino.pl o2.pl AOL.pl Home.pl Interia.pl Ryzyko stosowania 7L z-index ,31% 8 rozmiar 8A height ,85% 8B width ,85% 8C min-height ,77% 8D min-width ,31% 9 inne właściwości 9A cursor ,92% 9B empty-cells ,54% 9C opacity ,46% 9D overflow ,92% 9E table-layout ,85% 9F visibility ,62% KOD aplikacja pocztowa wsparcie CSS przez aplikację 10

11 21 praktycznych porad dla Front End Developerów W codziennej pracy nauczyliśmy się kilku trików podnoszących szanse dostarczenia wiadomości do skrzynki adresata w niezmienionej formie. Poniżej dzielimy się tą praktyczną wiedzą i zachęcamy do jej stosowania. 1. Podstawą dla tworzenia szablonów mailingowych jest stosowanie kodowania: ISO lub UTF Przygotowany szablon powinien w całości opierad się na formie tabelarycznej, odpowiednio sformatowanej przy pomocy technologii CSS. 3. Stosowanie styli umieszczanych w kodzie metodą inline jest znacznie bardziej bezpieczne niż umieszczenie ich zarówno w sekcji <head> lub <body> przy pomocy elementu <link>. 4. Optymalna szerokośd maila nie powinna przekraczad 650px. 5. Internet Explorer wspiera właściwośd min-height tylko dla znacznika <td>. 6. Przy załączaniu w wiadomości elementów graficznych warto stosowad atrybutu alt, wraz z treścią przekonywującą do pobrania grafiki (np. Pobierz grafikę i zobacz jaką atrakcyjną ofertę przygotowaliśmy specjalnie dla Ciebie). 7. Stosowanie popularnych skrótów dla właściwości CSS, nie jest mile widziane w niektórych klientach pocztowych. W związku z tym warto z nich zrezygnowad stosując pełne definiowanie właściwości (przykładowo: padding-left:0px; paddingright:10px;padding-top:0px;padding-bottom:20px stosujemy zamiast padding:0 10px 20px 0px). 8. Należy pamiętad, aby każdy link w newsletterze posiadał swój atrybut title, krótko opisujący stronę do której kieruje. 9. Wiadomośd powinna posiadad link rezygnacji pozwalajacy na łatwe wypisanie się z subskrypcji. W przypadku FreshMaila, aby stworzyd link rezygnacji wystarczy w stopce dokumentu zamieścid znacznik $$resignlink$$ lub zapisad dowolny tekst pomiędzy znacznikami <resignlink> i </resignlink>. 10. Wszystkie bloki dokumentu zawierające kod powiązany z zastosowaniem Javascript lub Flash w newsletterze są przeważnie pomijane przez programy pocztowe. 11. Fakt, że dany klient pocztowy obsługuje określone właściwości CSS, nie oznacza, że zawsze robi to w ten sam sposób (kompatybilny z innymi klientami) jak jego konkurencja. 12. Architektura informacja to podstawa dobrego komunikatu owego. Należy pamiętad o prawach i regułach prezentowania najważniejszych informacji. 11

12 13. Warto pamiętad o atrybucie _blank dla linków. Jest on bardzo ważny, gdyż jego nieobecnośd może zakooczyd się zawieszeniem aplikacji desktopowej obsługującej pocztę elektroniczną. 14. Wszelkiego rodzaju elementy obrazkowe używane podczas tworzenia wiadomości owej powinny byd pobierane z absolutnych adresów URL. 15. Wiadomości powinny posiadad zarówno swój HTMLowy jak również tekstowy odpowiednik. Dzięki temu możemy byd pewni, że komunikat dotrze do adresata. 16. Każdy projekt należy przetestowad w jak największej liczbie programów pocztowych, aby zyskad pewnośd, że subskrybent zobaczy wiadomośd w sposób, w jaki sobie życzysz. Z FreshMailem możesz to robid automatycznie bez konieczności instalowania jakichkolwiek aplikacji. 17. Ważne jest, aby unikad newsletterów będących jednym wielkim obrazkiem. Taka wiadomośd ma spore szansę trafid do skrzynki spamowej Twoich odbiorców. 18. Wszystkie znaczniki języka HTML, typu: table, td, tr, img itd. muszą byd domknięte. 19. Należy unikad krzykliwych czcionek mogących sugerowad filtrom antyspamowym, że jest wiadomością niepożądaną. We FreshMailu istnieje możliwośd sprawdzenia przed wysłaniem wiadomości, czy nie zostanie potraktowany jako spam. 20. Filtry antyspamowe analizują składnię każdej wiadomości. Należy unikad stosowania słów sugerujących, że Twoja wiadomośd ma charakter testowy (np. Lorem ipsum). 21. Większośd programów pocztowych usuwa z kodu szablonu zawartośd sekcji <head>. W związku z tym wszystko co jest ich częścią możemy traktowad jako zbyteczne. 12

13 Przepis na idealny mailing marketing od wielu lat jest w ścisłej czołówce najskuteczniejszych form marketingu interaktywnego. Jednym z ważniejszych składników wpływających na skutecznośd mailingu jest jego kreacja wizualna. Niestety z powodu niedopracowania technologicznego klientów pocztowych, z których korzystają użytkownicy, należy znaleźd złoty środek, który będzie łączył cechy wyrafinowania graficznego z wyrachowaniem technologicznym. Dzięki temu, przygotowana kreacja u każdego z użytkowników będzie wyglądad identycznie, gwarantując poprawnośd prezentacji. Od czego zacząd? Na bazie wiedzy na temat technologii CSS w aplikacjach pocztowych sugerujemy przyjąd następujący schemat przygotowania projektu owego. Rozpoczynamy standardowo, tworząc szkic makiety naszego szablonu, który będzie zrozumiały i atrakcyjny dla subskrybenta. Następnie nasz projekt trafia do grafika, wraz z wytycznymi dotyczącym standardów kodowania szablonów, przy czym stale nadzorujemy pracę kreacji i konsultujemy poszczególne odsłony szablonu, aby na koniec przystąpid do jego kodowania. Jeśli poprawnie przygotowujemy etap I i II, kodowanie będzie łatwe i przyjemne, gdyż już na początku pozbędziemy się elementów wymagających użycia zabronionych, nietolerowanych właściwości CSS. 1. Przygotowanie makiety (architektury informacji) szablonu 2. Graficzna wizualizacja szablonu 3. Kodowanie szablonu (CSS + HTML) 13

14 Kod przykładowego mailingu Na kilku kolejnych stronach przedstawiamy kod przykładowego, prawidłowo skodowanego mailingu. Skorzystamy z wcześniejszych rad i dorzucimy kilka nowych. 1. Budowa sekcji <head> <!-- Element DOCTYPE jest przeważnie konwertowany lub usuwany przez większośd klientów pocztowych, w związku z tym może byd pominięty --> <html> <head> <!-- Definicja CSS --> <style type="text/css" > a { <!-- Właściwości --> } body{ <!-- Właściwości --> } <!-- Inne deklaracje --> </style> <!-- Koniec definicji CSS --> </head> Porada: Definicja stylów CSS pomiędzy znacznikami <head> sprawia, że zostają one pominięte w niektórych aplikacjach takich jak Gmail czy też Interia.pl. Zalecam jednak stosowanie tej metody jeśli równocześnie definicję stylów powtórzymy w sekcji <body>. 14

15 2. Budowa sekcji głównej szablonu <body> Szablon ingu powinien składad się z czterech podstawowych elementów: element pozycjonujący (wrapper) nagłówek (header) główna zawartośd dokumentu (main body) stopka (footer) Dla poniższego przykładu stosujemy następujące założenia: mailing jest wyśrodkowany w stosunku do obszaru okna szerokośd dokumentu wynosi 610px <html> <body> <!-- WRAPPER TABELA POZYCJONUJACA DOKUMENT--> <table width="610" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <!-- HEADER (nagłówek) --> <!-- MAIN BODY (główna zawartośd dokumentu) --> <!-- FOOTER (stopka) --> <!-- EOF MAIN BODY (koniec zawartości głównej dokumentu) --> </td> </tr> </table> </body> </html> 15

16 2a. nagłówek (header) <!-- HEADER (początek nagłówka) --> <!-- w tym przykładzie stosujemy tabelę dla nagłówka wypełnioną jednym elementem graficznym (układ jednokolumnowy)--> <table width="610" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <tr> <td align="center"> <img style= display:block src="link do elementu graficznego" alt="alt" width="610" height="40" border="0"> </td> </tr> </table> <!-- EOF HEADER (koniec nagłówka) --> Porada: Własnośd {display:block} dla atrybutu img zabezpiecza przed problemem pustych obszarów podczas umieszczania elementów graficznych wewnątrz tabeli. Porada: Kod dokumentu powinien byd oparty na tabelarycznej strukturze (table, tr, td). Dla poprawnego zastosowania właściwości CSS doradzam stosowanie tzw. stylów inline. Przykładowe poprawne użycie wygląda tak: <td style="font-family:tahoma, Arial, Helvetica, sans-serif; font-size: 14px"> 16

17 2b. główna zawartośd dokumentu (main body) <!-- MAIN BODY CONTENT (zawartośd główna dokumentu) --> <table width="610" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <tr> <td style="font-family:tahoma, Verdana, sans-serif; font-size: 11px" valign="top"> <!-- COLUMNS (kolumny) --> <table border="0" cellpadding="0" cellspacing="0" width="610"> <tr> <!-- LEFT COLUMN (lewa kolumna) --> <td valign="top" align="left" width="305" style="font-family:tahoma, Verdana, sans-serif; font-size:11px; > <!-- wypełnienie kolumny lewej--> </td> <!-- EOF LEFT COLUMN (koniec lewej kolumny) --> <!-- RIGHT COLUMN (prawa kolumna) --> <td valign="top" align="left" width="305" style="font-family:tahoma, Verdana, sans-serif; font-size:11px;"> <!-- wypełnienie kolumny prawej --> </td> <!-- EOF RIGHT COLUMN (koniec prawej kolumny) --> </tr> </table> <!-- EOF COLUMNS (koniec tabeli zawierającej kolumny) --> <!-- FOOTER (stopka) --> <!-- EOF MAIN BODY CONTENT (koniec zawartości głównej dokumentu) --> </td> </tr> </table> 17

18 2c. stopka (footer) <!-- FOOTER (stopka) --> <table width="610" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <tr> <td align="center"> <p style= font-size:10px > <resignlink> Link rezygnacji </resignlink> </p> </td> </tr> </table> <!-- EOF FOOTER (stopka) --> 18

19 Przykładowy kod <html> <body> <!-- WRAPPER TABELA POZYCJONUJACA DOKUMENT--> <table width="610" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <!-- HEADER (początek nagłówka) --> <!-- w tym przykładzie stosujemy tabelę dla nagłówka wypełnioną jednym elementem graficznym (układ jednokolumnowy)--> <table width="610" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <tr> <td align="center"> <img style= display:block src="link do elementu graficznego" alt="alt" width="610" height="40" border="0"> </td> </tr> </table> <!-- EOF HEADER (koniec nagłówka) -->!-- MAIN BODY CONTENT (zawartośd główna dokumentu) --> <table width="610" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <tr> <td style="font-family:tahoma, Verdana, sans-serif; font-size: 11px" valign="top"> <!-- COLUMNS (kolumny) --> <table border="0" cellpadding="0" cellspacing="0" width="610"> <tr> <!-- LEFT COLUMN (lewa kolumna) --> <td valign="top" align="left" width="305" style="font-family:tahoma, Verdana, sans-serif; font-size:11px; > <!-- wypełnienie kolumny lewej--> </td> <!-- EOF LEFT COLUMN (koniec lewej kolumny) --> <!-- RIGHT COLUMN (prawa kolumna) --> <td valign="top" align="left" width="305" style="font-family:tahoma, Verdana, sans-serif; font-size:11px;"> <!-- wypełnienie kolumny prawej --> </td> 19

20 </tr> </table> <!-- EOF RIGHT COLUMN (koniec prawej kolumny) --> <!-- EOF COLUMNS (koniec tabeli zawierającej kolumny) --> <!-- FOOTER (stopka) --> <table width="610" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <tr> <td align="center"> <p style= font-size:10px > <resignlink> Link rezygnacji </resignlink> </p> </td> </tr> </table> <!-- EOF FOOTER (stopka) --> </td> </tr> </table> <!-- EOF MAIN BODY CONTENT (koniec zawartości głównej dokumentu) --> </td> </tr> </table> </body> </html> 20

21 Przydatne linki Poniżej linki, które mogą okazad się pomocne wszystkim Front End Developerom zmagającym się z kodowaniem malingów

22 O systemie FreshMail FreshMail posiada wiele niezwykłych funkcjonalności, które pozwolą Ci w profesjonalny sposób zarządzad swoją komunikacją marketingową. Średnio co 2 tygodnie wprowadzamy nową funkcjonalnośd jednocześnie jesteśmy otwarci na sugestie, jak jeszcze ulepszyd FreshMail. Jeżeli masz ciekawy pomysł - wdrożymy go za darmo:-) FreshMail pozwala na wykorzystanie wielu narzędzi zwiększających efektywnośd Twoich kampanii, m.in.: SpamTest - pozwoli sprawdzid, czy Twój mail wygląda jak spam, a jeżeli tak jest, podpowie jak go poprawid. Testy A/B - dzięki którym sprawdzisz, jaki temat wiadomości czy kreację graficzną preferują Twoi odbiorcy. ScreenTest - daje możliwośd zobaczenia jak wyświetli się Twoja wiadomośd u poszczególnych klientów pocztowych (Outlook, Gmail, itd.) i pozwoli ustrzec się tzw "rozsypanej wysyłki". Targetowanie behawioralne - polegające na tworzeniu grup odbiorców w oparciu o ich zachowanie we wcześniejszych kampaniach (np. możesz stworzyd grupę, która otworzyła daną kampanię i kliknęła w konkretny link). Personalizacja - pozwala wykorzystad informacje jakie przechowujesz w bazie do personalizacji tematu wiadomości, treści oraz linków (np. zwrócisz się po imieniu odmienionym przez odpowiedni przypadek do swoich odbiorców)..i wiele innych, które możesz dokładnie poznad na naszej stronie. Co warto podkreślid, nie wymagamy żadnych opłat abonamentowych. Płacisz tylko za wysłane kampanie. Bardzo łatwo możesz obliczyd koszty korzystając z cennika na naszej stronie WWW, a jeśli w danym miesiącu nie wysyłasz mailingu, to po prostu nie płacisz nic. Jeżeli taki sposób rozliczenia nie jest dla Ciebie odpowiedni (przykładowo planujesz duże lub częste kampanie) skontaktuj się z nami, a zaoferujemy Ci atrakcyjny system rabatów. Przetestuj wszystkie funkcjonalności FreshMail za darmo. Załóż konto na

23 Usługi z zakresu marketingu FreshMail to nie tylko samo narzędzie do wysyłki maili, to także zespół ludzi z doświadczeniem w zakresie e-marketingu. Co możemy Ci zaproponowad? Strategia komunikacji marketingowej przeanalizujemy Twoją komunikację w Internecie, zoptymalizujemy sposoby pozyskiwania informacji o Klientach, a także zaproponujemy nowe. Skrupulatnie przyjrzymy się Twoim produktom i konsumentom oraz zasugerujemy segmentację grup komunikacji marketingowej. Budowanie bazy adresowej powiedz tylko jakie dane chcesz zbierad, a my zaproponujemy ci efektywną strategię pozyskania adresów do Twojej bazy. Planowanie kampanii jeżeli nie masz własnej bazy, zaproponujemy Ci kampanię marketingową przy użyciu zewnętrznych dostawców baz danych Kreacja czy wiesz, jak wielkie znaczenie ma dobrze dobrany komunikat i właściwie skrojona kreacja? Dobrze zaprojektowany mailing może oznaczad kilkukrotnie wyższą efektywnośd jeśli chodzi o klikalnośd, ale przede wszystkim wyższy stopieo zapamiętania samego przekazu zawartego w newsletterze. e-crm jeśli prowadzisz sklep internetowy lub jesteś właścicielem dużego portalu, powiemy Ci jak wykorzystad wiedzę o zachowaniach konsumentów do jeszcze skuteczniejszej komunikacji. Dzięki e-crmowi dotrzesz do konsumenta z przekazem stargetowanym na podstawie jego zachowao na stronie internetowej (np. klienci którzy w sklepie online kupili aparat fotograficzny z niewielką kartą pamięci, otrzymają mailem atrakcyjna ofertę bardziej pojemnych kart). Ale to dopiero początek naszej współpracy. Skuteczne działania e- marketingowe to proces ciągłej, długookresowej komunikacji z klientem. Przetestuj wszystkie funkcjonalności FreshMail za darmo. Załóż konto na

24 Zapraszamy do współpracy Przetestuj wszystkie funkcjonalności FreshMaila za darmo na: Osoba kontaktowa Rafał Pantula key account manager tel.: gsm: Pomóż w rozwoju raportu Raport ma na celu pomóc w codziennym zmaganiach z projektowaniem i wdrażaniem szablonów owych. Wszelkie konstruktywne uwagi, informacje o błędach oraz spostrzeżenia czytelników są mile widziane i z pewnością pomogą nam wyeliminowad wszystkie potencjalne błędy. Zapraszamy wszystkich zainteresowanych Front End Developerów do współpracy przy tworzeniu kolejnych jego wersji. 24

25 Dodatek: szczegółowe wyniki badania Onet.pl KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari Chrome 3.0 udział przeglądarki w rynku według ranking.pl 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33% ryzyko użytkowania I style element I - A <style></style> w sekcji <head> ,00% I - B <style></style> w sekcji <body> ,86% II link element II - A <link></link> w sekcji <head> ,86% II - B <link></link> w sekcji <body> ,86% III selektory III - A e ,00% III - B * ,00% III - C e > f ,95% III - D e:link ,00% III - E e:active ,00% III - F e:hover ,00% III - G e:focus ,71% III - H e+f ,59% III - I e[foo] ,59% III - J e.classname ,00% III - K e#id ,00% III - L e:first-line ,00% III - M e:first-letter ,00% 1 właściwości tła 1A background-color ,00% 1B background-image ,00% 1C background-repeat ,00% 1D background-position ,00% 2 właściwości obramowania 2A border ,00% 25

26 2B border-[position]-color ,00% 2C border-collapse ,00% 2D border-spacing ,59% 2E border-style ,00% 2F border-width ,00% 3 listy 3A list-style-image ,00% 3B list-style-position ,88% 3C list-style-type ,00% 4 czcionki 4A font-family ,00% 4B font-size ,00% 4C font-style ,00% 4D font-variant ,00% 4E font-weight ,00% 5 marginesy i wcięcia 5A margin ,00% 5B padding ,00% 6 własciwości tekstu 6A color ,00% 6B direction ,00% 6C letter-spacing ,00% 6D line-height ,00% 6E text-align ,00% 6F text-decoration ,00% 6G text-indent ,00% 6H text-transform ,00% 6I word-spacing ,00% 6J white-space -/+ -/+ + -/ ,00% 7 pozycjonowanie 7A bottom ,00% 7B caption-side ,00% 7C clear ,00% 7D clip ,27% 7E display ,00% 7F float ,00% 7G left ,00% 7H position ,00% 7I right ,00% 26

27 7J top ,00% 7K vertical-align ,00% 7L z-index ,91% 8 rozmiar 8A height ,00% 8B width ,00% 8C min-height -/ ,64% 8D min-width ,44% 9 inne właściwości 9A cursor ,00% 9B empty-cells ,00% 9C opacity ,59% 9D overflow ,00% 9E table-layout ,00% 9F visibility ,00% Ocena wsparcia CSS KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari Chrome 3.0 łącznie dla przeglądarki 83% 83% 86% 90% 93% 91% 93% 93% 4,64 27

28 Wp.pl KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari Chrome 3.0 ryzyko udział przeglądarki w rynku użytkowania 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33% według ranking.pl I style element I - A <style></style> w sekcji <head> ,00% I - B <style></style> w sekcji <body> ,00% II link element II - A <link></link> w sekcji <head> ,00% II - B <link></link> w sekcji <body> ,00% III selektory III - A e ,00% III - B * ,00% III - C e > f ,95% III - D e:link ,00% III - E e:active ,00% III - F e:hover ,00% III - G e:focus ,71% III - H e+f ,59% III - I e[foo] ,59% III - J e.classname ,00% III - K e#id ,71% III - L e:first-line ,00% III - M e:first-letter ,00% 1 właściwości tła 1A background-color ,00% 1B background-image ,00% 1C background-repeat ,00% 1D background-position ,00% 2 właściwości obramowania 2A border ,00% 2B border-[position]-color ,00% 2C border-collapse ,00% 2D border-spacing ,71% 2E border-style ,00% 28

29 2F border-width ,00% 3 listy 3A list-style-image ,00% 3B list-style-position ,88% 3C list-style-type ,00% 4 czcionki 4A font-family ,00% 4B font-size ,00% 4C font-style ,00% 4D font-variant ,00% 4E font-weight ,00% 5 marginesy i wcięcia 5A margin ,00% 5B padding ,00% 6 własciwości tekstu 6A color ,00% 6B direction ,00% 6C letter-spacing ,00% 6D line-height ,00% 6E text-align ,00% 6F text-decoration ,00% 6G text-indent ,00% 6H text-transform ,00% 6I word-spacing ,00% 6J white-space -/+ -/+ + -/ ,00% 7 pozycjonowanie 7A bottom ,00% 7B caption-side ,00% 7C clear ,00% 7D clip ,00% 7E display ,00% 7F float ,00% 7G left ,00% 7H position ,00% 7I right ,00% 7J top ,00% 7K vertical-align ,00% 7L z-index ,00% 8 rozmiar 29

30 8A height ,00% 8B width ,00% 8C min-height -/ ,64% 8D min-width ,44% 9 inne właściwości 9A cursor ,00% 9B empty-cells ,00% 9C opacity ,59% 9D overflow ,00% 9E table-layout ,00% 9F visibility ,00% Ocena wsparcia CSS KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari Chrome 3.0 łącznie dla przeglądarki 86% 87% 93% 97% 100% 99% 100% 100% 5,00 30

31 Gmail KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari Chrome 3.0 ryzyko udział przeglądarki w rynku użytkowania 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33% według ranking.pl I style element I - A <style></style> w sekcji <head> ,86% I - B <style></style> w sekcji <body> ,86% II link element II - A <link></link> w sekcji <head> ,86% II - B <link></link> w sekcji <body> ,86% III selektory III - A e ,86% III - B * ,86% III - C e > f ,86% III - D e:link ,86% III - E e:active ,86% III - F e:hover ,86% III - G e:focus ,86% III - H e+f ,86% III - I e[foo] ,86% III - J e.classname ,86% III - K e#id ,86% III - L e:first-line ,86% III - M e:first-letter ,86% 1 właściwości tła 1A background-color ,00% 1B background-image ,86% 1C background-repeat ,86% 1D background-position ,86% 2 właściwości obramowania 2A border ,00% 2B border-[position]-color ,00% 2C border-collapse ,00% 2D border-spacing ,59% 2E border-style ,00% 31

32 2F border-width ,00% 3 listy 3A list-style-image ,86% 3B list-style-position ,88% 3C list-style-type ,00% 4 czcionki 4A font-family ,00% 4B font-size ,00% 4C font-style ,00% 4D font-variant ,00% 4E font-weight ,00% 5 marginesy i wcięcia 5A margin ,00% 5B padding ,00% 6 własciwości tekstu 6A color ,00% 6B direction ,00% 6C letter-spacing ,00% 6D line-height ,00% 6E text-align ,00% 6F text-decoration ,00% 6G text-indent ,00% 6H text-transform ,00% 6I word-spacing ,00% 6J white-space -/+ -/+ + -/ ,37% 7 pozycjonowanie 7A bottom ,86% 7B caption-side ,00% 7C clear ,00% 7D clip ,86% 7E display ,00% 7F float ,00% 7G left ,86% 7H position ,86% 7I right ,86% 7J top ,86% 7K vertical-align ,00% 7L z-index ,86% 8 rozmiar 32

33 8A height ,00% 8B width ,00% 8C min-height -/ ,76% 8D min-width ,56% 9 inne właściwości 9A cursor ,86% 9B empty-cells ,00% 9C opacity ,86% 9D overflow ,00% 9E table-layout ,00% 9F visibility ,86% Ocena wsparcia CSS KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari Chrome 3.0 łącznie dla przeglądarki 49% 49% 54% 52% 55% 54% 54% 55% 2,75 33

34 Gazeta.pl KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari Chrome 3.0 ryzyko udział przeglądarki w rynku użytkowania 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33% według ranking.pl I style element I - A <style></style> w sekcji <head> ,86% I - B <style></style> w sekcji <body> ,86% II link element II - A <link></link> w sekcji <head> ,86% II - B <link></link> w sekcji <body> ,86% III selektory III - A e ,86% III - B * ,86% III - C e > f ,86% III - D e:link ,86% III - E e:active ,86% III - F e:hover ,86% III - G e:focus ,86% III - H e+f ,86% III - I e[foo] ,86% III - J e.classname ,86% III - K e#id ,86% III - L e:first-line ,86% III - M e:first-letter ,86% 1 właściwości tła 1A background-color ,00% 1B background-image ,86% 1C background-repeat ,86% 1D background-position ,86% 2 właściwości obramowania 2A border ,00% 2B border-[position]-color ,00% 2C border-collapse ,00% 2D border-spacing ,59% 2E border-style ,00% 34

35 2F border-width ,00% 3 listy 3A list-style-image ,86% 3B list-style-position ,88% 3C list-style-type ,00% 4 czcionki 4A font-family ,00% 4B font-size ,00% 4C font-style ,00% 4D font-variant ,00% 4E font-weight ,00% 5 marginesy i wcięcia 5A margin ,00% 5B padding ,00% 6 własciwości tekstu 6A color ,00% 6B direction ,00% 6C letter-spacing ,00% 6D line-height ,00% 6E text-align ,00% 6F text-decoration ,00% 6G text-indent ,00% 6H text-transform ,00% 6I word-spacing ,00% 6J white-space -/+ -/+ + -/ ,37% 7 pozycjonowanie 7A bottom ,86% 7B caption-side ,00% 7C clear ,00% 7D clip ,86% 7E display ,00% 7F float ,00% 7G left ,86% 7H position ,86% 7I right ,86% 7J top ,86% 7K vertical-align ,00% 7L z-index ,86% 8 rozmiar 35

36 8A height ,00% 8B width ,00% 8C min-height -/ ,76% 8D min-width ,56% 9 inne właściwości 9A cursor ,86% 9B empty-cells ,00% 9C opacity ,86% 9D overflow ,00% 9E table-layout ,00% 9F visibility ,86% Ocena wsparcia CSS KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari Chrome 3.0 łącznie dla przeglądarki 49% 49% 54% 52% 55% 54% 54% 55% 2,75 36

37 Viva-polska.tv KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari Chrome 3.0 ryzyko udział przeglądarki w rynku użytkowania 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33% według ranking.pl I style element I - A <style></style> w sekcji <head> ,86% I - B <style></style> w sekcji <body> ,86% II link element II - A <link></link> w sekcji <head> ,86% II - B <link></link> w sekcji <body> ,86% III selektory III - A e ,86% III - B * ,86% III - C e > f ,86% III - D e:link ,86% III - E e:active ,86% III - F e:hover ,86% III - G e:focus ,86% III - H e+f ,86% III - I e[foo] ,86% III - J e.classname ,86% III - K e#id ,86% III - L e:first-line ,86% III - M e:first-letter ,86% 1 właściwości tła 1A background-color ,00% 1B background-image ,86% 1C background-repeat ,86% 1D background-position ,86% 2 właściwości obramowania 2A border ,00% 2B border-[position]-color ,00% 2C border-collapse ,00% 2D border-spacing ,59% 2E border-style ,00% 37

38 2F border-width ,00% 3 listy 3A list-style-image ,86% 3B list-style-position ,88% 3C list-style-type ,00% 4 czcionki 4A font-family ,00% 4B font-size ,00% 4C font-style ,00% 4D font-variant ,00% 4E font-weight ,00% 5 marginesy i wcięcia 5A margin ,00% 5B padding ,00% 6 własciwości tekstu 6A color ,00% 6B direction ,00% 6C letter-spacing ,00% 6D line-height ,00% 6E text-align ,00% 6F text-decoration ,00% 6G text-indent ,00% 6H text-transform ,00% 6I word-spacing ,00% 6J white-space -/+ -/+ + -/ ,37% 7 pozycjonowanie 7A bottom ,86% 7B caption-side ,00% 7C clear ,00% 7D clip ,86% 7E display ,00% 7F float ,00% 7G left ,86% 7H position ,86% 7I right ,86% 7J top ,86% 7K vertical-align ,00% 7L z-index ,86% 8 rozmiar 38

39 8A height ,00% 8B width ,00% 8C min-height -/ ,76% 8D min-width ,56% 9 inne właściwości 9A cursor ,86% 9B empty-cells ,00% 9C opacity ,86% 9D overflow ,00% 9E table-layout ,00% 9F visibility ,86% Ocena wsparcia CSS KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari Chrome 3.0 łącznie dla przeglądarki 49% 49% 54% 52% 55% 54% 54% 55% 2,75 39

40 Poczta.pl KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari Chrome 3.0 ryzyko udział przeglądarki w rynku użytkowania 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33% według ranking.pl I style element I - A <style></style> w sekcji <head> ,00% I - B <style></style> w sekcji <body> ,00% II link element II - A <link></link> w sekcji <head> ,00% II - B <link></link> w sekcji <body> ,00% III selektory III - A e ,00% III - B * ,00% III - C e > f ,95% III - D e:link ,00% III - E e:active ,00% III - F e:hover ,00% III - G e:focus ,71% III - H e+f ,59% III - I e[foo] ,59% III - J e.classname ,00% III - K e#id ,00% III - L e:first-line ,00% III - M e:first-letter ,00% 1 właściwości tła 1A background-color ,00% 1B background-image ,00% 1C background-repeat ,00% 1D background-position ,00% 2 właściwości obramowania 2A border ,00% 2B border-[position]-color ,00% 2C border-collapse ,00% 2D border-spacing ,59% 2E border-style ,00% 40

41 2F border-width ,00% 3 listy 3A list-style-image ,00% 3B list-style-position ,88% 3C list-style-type ,00% 4 czcionki 4A font-family ,00% 4B font-size ,00% 4C font-style ,00% 4D font-variant ,00% 4E font-weight ,00% 5 marginesy i wcięcia 5A margin ,00% 5B padding ,00% 6 własciwości tekstu 6A color ,00% 6B direction ,00% 6C letter-spacing ,00% 6D line-height ,00% 6E text-align ,00% 6F text-decoration ,00% 6G text-indent ,00% 6H text-transform ,00% 6I word-spacing ,00% 6J white-space ,86% 7 pozycjonowanie 7A bottom ,00% 7B caption-side ,00% 7C clear ,00% 7D clip ,00% 7E display ,00% 7F float ,00% 7G left ,00% 7H position ,00% 7I right ,00% 7J top ,00% 7K vertical-align ,00% 7L z-index ,00% 8 rozmiar 41

42 8A height ,00% 8B width ,00% 8C min-height -/ ,64% 8D min-width ,59% 9 inne właściwości 9A cursor ,00% 9B empty-cells ,00% 9C opacity ,59% 9D overflow ,00% 9E table-layout ,00% 9F visibility ,00% Ocena wsparcia CSS KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari Chrome 3.0 łącznie dla przeglądarki 87% 88% 90% 99% 99% 97% 99% 99% 4,92 42

43 Nazwa.pl KOD przeglądarka IE 6.0 IE 7.0 IE 8.0 Mozilla 2.0 Mozilla 3.5 Opera 9.63 Safari Chrome 3.0 ryzyko udział przeglądarki w rynku użytkowania 7,95% 15,76% 8,88% 1,85% 49,84% 3,88% 0,37% 3,33% według ranking.pl I style element I - A <style></style> w sekcji <head> ,00% I - B <style></style> w sekcji <body> ,00% II link element II - A <link></link> w sekcji <head> ,86% II - B <link></link> w sekcji <body> ,86% III selektory III - A e ,00% III - B * ,00% III - C e > f ,95% III - D e:link ,00% III - E e:active ,00% III - F e:hover ,00% III - G e:focus ,71% III - H e+f ,59% III - I e[foo] ,71% III - J e.classname ,00% III - K e#id ,00% III - L e:first-line ,00% III - M e:first-letter ,00% 1 właściwości tła 1A background-color ,00% 1B background-image ,00% 1C background-repeat ,00% 1D background-position ,00% 2 właściwości obramowania 2A border ,00% 2B border-[position]-color ,00% 2C border-collapse ,00% 2D border-spacing ,71% 2E border-style ,00% 43