w aplikacjach pocztowych

Transkrypt

1 Technologia CSS w aplikacjach pocztowych Wytyczne dla projektantów newsle4erów Raport FreshMail sierpień 2011 Patroni medialni:

2 Spis treści: - Wstęp 03 - Metodologia badań 04 - Wyniki badań praktycznych rad dla Front End Developerów 12 - Przepis na idealny mailing 14 - Kod przykładowego mailingu 15 - Przydatne Linki 21 - O FreshMailu 22 - Zapraszamy do współpracy / kontakt 24 - Dodatek: szczegółowe wyniki badania 26 Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 2

3 Wstęp Kaskadowe arkusze stylów CSS to technologia pozwalająca w swobodny sposób manipulować 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ązań internetowych. Zastosowanie CSS nie ominęło również e- marke\ngu, 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ść 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ść 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 e- mailingu, którego wygląd w poszczególnych klientach pocztowych i webmailach nie będzie różny od zamierzeń jego projektantów. Kolejne zadanie to zaprezentowanie koderom oraz osobom związanych z e- marke\ngiem podstawowych błędów popełnianych przy przygotowywaniu projektów mailingowych. Całość 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. udanej lektury Zespół FreshMail Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 3

4 Metodologia badań 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 firmy Freshview. Materiały te nie wyczerpują jednak do końca tematyki dotyczącej CSS w e- mail markewngu, w szczególności jeśli chodzi o aplikacje dostępne na polskim rynku, stąd też po raz trzeci postanowiliśmy przeprowadzić ww. badanie na rynku polskim. W ramach badań nad technologią CSS wykonaliśmy szereg testów opartych na specjalnie przygotowanych szablonach e- mailingowych, 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 zmagań 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ść najpopularniejszych dysfunkcji narzędzi dostępnych na rynku. W celu pełnego przedstawienia wsparcia CSS przez poszczególne aplikacje pocztowe prezentujemy wyniki badań dla najpopularniejszych z nich, analizując dodatkowo wpływ silników przeglądarek internetowych na sposób wyświetlania wiadomości e- mail. Nie ulega wątpliwości, że badania nad zastosowaniem technologii CSS w e- mail marke\ngu są nieco niewdzięczne. Ilość 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 stworzyć dokument kompletny, który pozbawiony byłby najmniejszych błędów. Nie mniej warto posiadać wiedzę przedstawioną w raporcie i na bieżąco ją wzbogacać. Raport FreshMail Technologia CSS CSS w w aplikacjach pocztowych 4

5 Metodologia badań sprzęt i oprogramowanie Podczas badań nad zastosowaniem technologii CSS w e- mail markewngu 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 Ul\mate Service Pack 1 Apple MacBook Pro 13 Intel Core 2 Duo 2.8 GHz 4 GB Ram Apple MacBook White 13 Intel Core 2 Duo 2.16 GHz 2 GB Ram Aplikacje webowe Aplikacje desktopowe Przeglądarki internetowe Aol.pl duno.pl gery.pl gmail.com (gazeta.pl, vivapolskatv.pl) home.pl hotmail.com interia.pl nazwa.pl o2.pl (prokonto.pl) onet.pl pino.pl poczta.pl wp.pl yahoo.com Apple Mail 3.6 Apple Mail 4.5 Microsot Office Outlook 2003 Microsot Office Outlook 2007 Microsot Office Outlook 2010 (beta) Mozilla Thunderbird 2 Mozilla Thunderbird 3.1 The Bat! Windows Mail Lotus 6.5 Lotus 8.5 Google Chrome 12.0 Internet Explorer 9.0 Internet Explorer 8.0 Internet Explorer 7.0 Mozilla Firefox Mozilla Firefox 3.5 Opera Safari 4.0 Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 5

6 Metodologia badań Algorytm oceny aplikacji pocztowych Podczas badań przetestowano 25 aplikacji pocztowych, z czego 11 to programy desktopowe a pozostałe to aplikacje webowe. Przy interpretacji wyników wzięto również pod uwagę wpływ 9 najpopularniejszych przeglądarek internetowych na sposób prezentacji szablonów mailingowych. Bardzo często dochodzi do sytuacji, w których klienci zastanawiają się dlaczego e- mailingi 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: Współczynnik wsparcia właściowści CSS w aplikacjach pocztowych współczynnik wsparcia CSS = liczba wspieranych właściwości CSS (najwyższy wynik wśród analizowanych przeglądarek dla danej aplikacji pocztowej) Liczba badanych właściwości CSS (69) x 100% opis procent wysokie powyżej 50% 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 e- mail w danej aplikacji pocztowej. Badane przez nas przeglądarki pocztowe stanowią obecnie około 97% polskiego rynku (ranking.pl ). Liczba ta oznacza w naszym przypadku maksymalny poziom ryzyka podczas używania określonej właściwości CSS. średnie 30-50% niskie poniżej 30% Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 6

7 Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 7

8 Wyniki badań Sposób interpretacji CSS jest różny w poszczególnych aplikacjach pocztowych. Na poniższych stronach przedstawiamy zestawienie wsparcia własności CSS dla 25 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 Microsot 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 ignorować podczas tworzenia kampanii mailingowej. Zwróć uwagę na ostatnią kolumnę tabeli o nazwie Ryzyko stosowania. Pozwoli ci ona szybko podjąć decyzję o tym czy można bezpiecznie korzystać z danej właściwości CSS (wyniki na zielonym tle), czy lepiej z niej zrezygnować (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 korzystać. Porada: FreshMail posiada funkcjonalność 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 dostosować newslezer do grupy Twoich odbiorców Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 8

9 Wyniki badań - tabela 1 &014D&L]2,;2'DC)0)$2 &014D&L]2,$2@)$2!"# $%&'()*+,-.. /0012,3&41,567 /0012,3&41,869 :4(;)$',3&41 <=>(;2?@4?;,,A <=>(;2?@4?;,56B ">C1))D,AEBE,,@2C& ">C1))D,AEEF ">C1))D,AEE5 <=2,G&C H)C>',769 H)C>',I69 - '("./&/./0/+( X,Y,/ Z'CV12[Z\'CV12[,$,'2DL]4,Z=2&;[ ABO8A^ X,Y,G Z'CV12[Z\'CV12[,$,'2DL]4,Z@);V[ AIO9I^ --.,+$&/./0/+( XX,Y,/ Z14(D[Z\14(D[,,$,'2DL]4,Z=2&;[ O8A^ XX,Y,G Z14(D[Z\14(D[,$,'2DL]4,Z@);V[ EOEE^ --- '/./$(%3" XXX,Y,/ 2, A9OEE^ XXX,Y,G _, OFB^ XXX,Y,- 2,[,`, I9OFB^ XXX,Y,# 2a14(D, A9OEE^ XXX,Y,b 2a&LC4Q cOAI^ XXX,Y,d 2a=)Q2?, OFB^ XXX,Y,J 2a`)L>' I9OFB^ XXX,Y,U 2e` I9OFB^ XXX,Y,X 2f`))g FIO9F^ XXX,Y,h 26L1&''T&K2, A9OEE^ XXX,Y,! 2i4; AOB8^ XXX,Y,H 2a`4?'CY14(2, AOB8^ XXX,Y,3 2a`4?'CY12CC2?, AOB8^ 4 )5*67,)%67,&(5* O9F^ AIO9F^ "(2C601 :0601 JK&416L)K,MJ&N2C&601O, P4Q&R)1'D&<QS R)LNC&601 T&N$&601 U)CK&416L)K #>()601 J2?V601 W&=))6L)K R4()601 )A601,MR?)D)(C)601S /"H6L)K U)K2601 X(C2?4&601!"#"$%& '(%'%)*+,* AIO9F^ AIO9F^ Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 9

10 Wyniki badań - tabela 1 &014D&L]2,;2'DC)0)$2 &014D&L]2,$2@)$2!"# $%&'()*+,-.. /0012,3&41,567 /0012,3&41,869 :4(;)$',3&41 <=>(;2?@4?;,,A <=>(;2?@4?;,56B ">C1))D,AEBE,,@2C& ">C1))D,AEEF ">C1))D,AEE5 <=2,G&C H)C>',769 H)C>',I69 "(2C601 :0601 JK&416L)K,MJ&N2C&601O, P4Q&R)1'D&<QS R)LNC&601 T&N$&601 U)CK&416L)K #>()601 J2?V601 W&=))6L)K R4()601 )A601,MR?)D)(C)601S /"H6L)K U)K2601 X(C2?4&601!"#"$%& '(%'%)*+,* - 8 )5*67,)%67,&%93*0%)*+,* '("./&/./0/+( O9F^ BEOFB^ O9F^ IAOB8^ O9F^ O9F^ :.,'(" 5/ 14'CY'CV12Y4K&j cOAI^ 5G 14'CY'CV12Y0)'4C4)( B8OAI^ 5-14'CY'CV12YCV O9F^ ; 7#7,%+$, 8/ `)(CY`&K41V EOEE^ 8G `)(CY'4N EOEE^ 8- `)(CY'CV EOEE^ 8# `)(CYQ&?4&(C OI9^ 8b `)(CY$24j=C EOEE^ < 0*3=,+/'"&,&)7,>7,* 9/ K&?j4(, B8OAI^ 9G 0&;;4(j O9F^? )5*'7,)%67,&(/$'(@ 7/ L)1)?, O9F^ 7G ;4?2LC4)( BEOFB^ 7-12CC2?Y'0&L4(j FOB8^ 7# 14(2Y=24j=C O9F^ 7b C2kCY&14j(, EOEE^ 7d C2kCY;2L)?&C4)( EOEE^ 7J C2kCY4(;2(C, FOB8^ 7U C2kCYC?&('`)?K FOB8^ 7X $)?;Y'0&L4(j ABO8A^ 7h $=4C2Y'0&L A9OEE^ A B%#"7C%+%)*+,/ Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 10

11 Wyniki badań - tabela 1 &014D&L]2,;2'DC)0)$2 &014D&L]2,$2@)$2!"# $%&'()*+,-.. /0012,3&41,567 /0012,3&41,869 :4(;)$',3&41 <=>(;2?@4?;,,A <=>(;2?@4?;,56B ">C1))D,AEBE,,@2C& ">C1))D,AEEF ">C1))D,AEE5 <=2,G&C H)C>',769 H)C>',I69 "(2C601 :0601 JK&416L)K,MJ&N2C&601O, P4Q&R)1'D&<QS R)LNC&601 T&N$&601 U)CK&416L)K #>()601 J2?V601 W&=))6L)K R4()601 )A601,MR?)D)(C)601S /"H6L)K U)K2601 X(C2?4&601!"#"$%& '(%'%)*+,* - A '("./&/./0/+( B%#"7C%+%)*+,/ cOAI^ FG L&0C4)(Y'4;2, BFOI9^ F- L12&?, BEOFB^ F# L140, EOEE^ Fb ;4'01&V, BEOFB^ Fd `1)&C BEOFB^ FJ 12`C cOAI^ FU 0)'4C4)( cOAI^ FX?4j=C cOAI^ Fh C) cOAI^ F! Q2?C4L&1Y&14j( O9F^ FH NY4(;2k cOAI^ D 3%#0,*3 I/ =24j=C O9F^ IG $4;C= O9F^ I- K4(Y=24j=C AOB8^ I# K4(Y$4;C= I9OFB^ E,++/&)5*67,)%67, c/ L>?')? A9OEE^ cg 2K0CVYL211', BEOFB^ c- )0&L4CV, I9OFB^ c# )Q2?`1)$ AIO9F^ cb C&@12Y1&V)>C O9F^ cd Q4'4@414CV AOB8^!"# &014D&L]&,0)LNC)$& /0012,3&41,567 /0012,3&41,869 :4(;)$',3&41 <=>(;2?@4?;,,A <=>(;2?@4?;,56B ">C1))D,AEBE,,@2C& ">C1))D,AEEF ">C1))D,AEE5 <=2,G&C H)C>',769 H)C>',I69 "(2C601 :0601 JK&416L)K,MJ&N2C&601O, P4Q&R)1'D&<QS R)LNC&601 T&N$&601 U)CK&416L)K #>()601 J2?V601 W&=))6L)K R4()601 )A601,MR?)D)(C)601S /"H6L)K U)K2601 X(C2?4&601 &&&!"#"$%& '(%'%)*+,* $'0&?L42,-..,0?N2N,&014D&L]l cf^ cb^ I8^ cc^ c9^ 98^ 98^ I5^ 8B^ B7^ F9^ I5^ I7^ 8c^ IF^ F9^ FE^ 79^ IF^ FF^ FE^ I8^ I7^ IF^ 7I^ Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 11

12 21 praktycznych porad dla Front End Developerów W codziennej pracy nauczyliśmy się kilku trików podnoszących szanse dostarczenia wiadomości e- mail 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 opierać 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ść maila nie powinna przekraczać 650px. 5. Internet Explorer wspiera właściwość min- height tylko dla znacznika <td>. 6. Przy załączaniu w wiadomości e- mail elementów graficznych warto stosować 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 zrezygnować stosując pełne definiowanie właściwości (przykładowo: padding- let:0px;padding- right:10px;padding- top: 0px;padding- bozom:20px stosujemy zamiast padding:0 10px 20px 0px). 8. Należy pamiętać, aby każdy link w newslezerze posiadał swój atrybut Wtle, krótko opisujący stronę do której kieruje. 9. Wiadomość e- mail powinna posiadać link rezygnacji pozwalajacy na łatwe wypisanie się z subskrypcji. W przypadku FreshMaila, aby stworzyć link rezygnacji wystarczy w stopce dokumentu zamieścić znacznik $$resignlink$$ lub zapisać dowolny tekst pomiędzy znacznikami <resignlink> i </resignlink>. 10. Wszystkie bloki dokumentu zawierające kod powiązany z zastosowaniem Javascript lub Flash w newslezerze są przeważnie pomijane przez programy pocztowe. Porada: FreshMail posiada funkcję FreshMail Inspektora, która wykrywa ponad 30 najczęściej popełnianych błędów przez marketerów - warto zawsze pamiętać o odpowiednim sprawdzeniu swojej wiadomości zwłaszcza, że nic nas to nie kosztuje :) Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 12

13 21 praktycznych porad dla Front End Developerów 11. Architektura informacji to podstawa dobrego komunikatu owego. Należy pamiętać o prawach i regułach prezentowania najważniejszych informacji. 12. Warto pamiętać o atrybucie _blank dla linków. Jest on bardzo ważny, gdyż jego nieobecność może zakończyć się zawieszeniem aplikacji desktopowej obsługującej pocztę elektroniczną. 13. Wszelkiego rodzaju elementy obrazkowe używane podczas tworzenia wiadomości e- mailowej powinny być pobierane z absolutnych adresów URL. 14. Wiadomości e- mail powinny posiadać zarówno swój HTML- owy jak również tekstowy odpowiednik. Dzięki temu możemy być pewni, że komunikat dotrze do adresata. 15. Każdy projekt należy przetestować w jak największej liczbie programów pocztowych, aby zyskać pewność, że subskrybent zobaczy wiadomość w sposób, w jaki sobie życzysz. Z FreshMailem możesz to robić automatycznie bez konieczności instalowania jakichkolwiek aplikacji. 16. Ważne jest, aby unikać newslezerów będących jednym wielkim obrazkiem. Taka wiadomość ma spore szanse trafić do skrzynki spamowej Twoich odbiorców. 17. Wszystkie znaczniki języka HTML, typu: table, td, tr, img itd. muszą być domknięte. 18. Należy unikać krzykliwych czcionek mogących sugerować filtrom antyspamowym, że e- mail jest wiadomością niepożądaną. We FreshMailu istnieje możliwość sprawdzenia przed wysłaniem wiadomości, czy e- mail nie zostanie potraktowany jako spam. 19. Filtry antyspamowe analizują składnię każdej wiadomości. Należy unikać stosowania słów sugerujących, że Twoja wiadomość ma charakter testowy (np. Lorem ipsum). 20. Większość programów pocztowych usuwa z kodu szablonu zawartość sekcji <head>. W związku z tym wszystko co jest ich częścią możemy traktować jako zbyteczne. 21. 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. Porada: FreshMail posiada funkcję spam testu - dzięki niemu możesz w łatwy sposób sprawdzić czy Twoja wiadomość nie zostanie zakwalifikowana jako spam przez następujące zabezpieczenia: SpamAssassin MS Outlook 2003 MS Outlook 2007 Poczta Home.pl Poczta O2.pl Poczta onet.pl Poczta gadu- gadu Gmail.com Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 13

14 Przepis na idealny mailing E- mail markewng od wielu lat jest w ścisłej czołówce najskuteczniejszych form markewngu interaktywnego. Jednym z ważniejszych składników wpływających na skuteczność mailingu jest jego kreacja wizualna. Niestety z powodu niedopracowania technologicznego klientów pocztowych, z których korzystają użytkownicy, należy znaleźć 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ądać identycznie, gwarantując poprawność prezentacji. Od czego zacząć? Na bazie wiedzy na temat technologii CSS w aplikacjach pocztowych sugerujemy przyjąć następujący schemat przygotowania projektu e- mailowego. 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ącymi standardów kodowania szablonów, przy czym stale nadzorujemy pracę kreacji i konsultujemy poszczególne odsłony szablonu, aby na koniec przystąpić do jego kodowania. Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 14

15 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. Szablon e- mailingu powinien składać się z czterech podstawowych elementów: element pozycjonujący (wrapper) nagłówek (header) główna zawartość 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ść dokumentu wynosi 610px 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>. 1. Budowa sekcji <head> <!- - Element DOCTYPE jest przeważnie konwertowany lub usuwany przez większość klientów pocztowych, w związku z tym może być 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> Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 15

16 Kod przykładowego mailingu 2. Budowa sekcji <body> <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ść dokumentu) --> <!- - FOOTER (stopka) - - > <!-- EOF MAIN BODY (koniec zawartości głównej dokumentu) --> </td> </tr> </table> </body> </html> Porada: Kod dokumentu powinien być 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, Helve\ca, sans- serif; font- size: 14px"> Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 16

17 Kod przykładowego mailingu 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ść {display:block} dla atrybutu img zabezpiecza przed problemem pustych obszarów podczas umieszczania elementów graficznych wewnątrz tabeli. Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 17

18 Kod przykładowego mailingu 2b. Główna zawartość dokumentu (main body) <!-- MAIN BODY CONTENT (zawartość 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="let" 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="let" 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> Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 18

19 Kod przykładowego mailingu 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) - - > Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 19

20 <html> <body> Przykładowy kod <!- - 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ść 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="let" width="305" style="font- family:tahoma, Verdana, sans- serif; font- size:11px; > <!-- wypełnienie kolumny lewej--> </td> <!- - EOF LEFT COLUMN (koniec lewej 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> <!- - RIGHT COLUMN (prawa kolumna) - - > <td valign="top" align="let" 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) --> Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 20

21 Przydatne linki Poniżej linki, które mogą okazać się pomocne wszystkim Front End Developerom zmagającym się z kodowaniem malingów. hzp:// hzp:// FAQ/answer/Common- HTML- - Coding- Mistakes hzp://mailchimp.blogs.com/blog/2006/01/im_a_web_design.html hzp:// standards.org hzp:// html- - newslezers hzp://interaktywnie.com/newsy/1/e- mail- marke\ng hzp:// hzp:// news.pl/message.php?cat=45 hzp:// standards.org hzp:// hzp:// hzp:// hzp:// hzp:// hzp:// beau\ful- html- hzp:// hzp:// marke\ng- reports.com hzp:// hzp:// Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 21

22 O systemie FreshMail FreshMail posiada wiele niezwykłych funkcjonalności, które pozwolą Ci w profesjonalny sposób zarządzać swoją komunikacją e- mail marke\ngową. Średnio co 2 tygodnie wprowadzamy nową funkcjonalność jednocześnie jesteśmy otwarci na suges\e, jak jeszcze ulepszyć FreshMail. Jeżeli masz ciekawy pomysł - wdrożymy go za darmo:- ) FreshMail pozwala na wykorzystanie wielu narzędzi zwiększających efektywność Twoich kampanii, m.in.: SpamTest - pozwoli sprawdzić, czy Twój mail wygląda jak spam w 8 najpopularniejszych filtrach antyspamowych, a jeżeli tak jest, podpowie jak go poprawić; Testy A/B - dzięki którym sprawdzisz, jaki temat wiadomości czy kreację graficzną preferują Twoi odbiorcy; ScreenTest - daje możliwość zobaczenia jak wyświetli się Twoja wiadomość w 36 klientach pocztowych (outlook, gmail, itd.) i pozwoli ustrzec się tzw "rozsypanej wysyłki"; FreshMail OpWmizer - pozwala łatwo sprawdzić jaki dzień i jaka pora dnia jest najbardziej optymalna dla przeprowadzenia Twojej kampanii; Targetowanie behawioralne - polegające na tworzeniu grup odbiorców w oparciu o ich zachowanie we wcześniejszych kampaniach (np. możesz stworzyć grupę, która otworzyła daną kampanię i kliknęła w konkretny link); Personalizacja - pozwala wykorzystać informacje jakie przechowujesz w bazie do personalizacji tematu wiadomości, treści oraz linków (np. zwrócisz się do swoich odbiorców po imieniu odmienionym przez odpowiedni przypadek)... i wiele innych, które możesz dokładnie poznać na naszej stronie. Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 22

23 Usługi z zakresu e- mail markewngu FreshMail to nie tylko samo narzędzie do wysyłki maili, to także zespół ludzi z doświadczeniem w zakresie e- markewngu, którzy wielokrotnie byli nagradzani i wyróżniani na preswżowych konkursach markewngowych za efektywne działania e- mail markewngowe. Co możemy Ci zaproponować? Strategia komunikacji e- mail markewngowej 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 marke\ngowej. Budowanie bazy adresowej powiedz tylko jakie dane chcesz zbierać, a my zaproponujemy ci efektywną strategię pozyskania adresów do Twojej bazy. Planowanie kampanii jeżeli nie masz własnej bazy, zaproponujemy Ci kampanię e- mail marke\ngową 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 oznaczać kilkukrotnie wyższą efektywność jeśli chodzi o klikalność, ale przede wszystkim wyższy stopień zapamiętania samego przekazu zawartego w newslezerze. Ale to dopiero początek naszej współpracy. Skuteczne działania e- marke\ngowe to proces ciągłej, długookresowej komunikacji z klientem. Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 23

24 Zapraszamy do współpracy Przetestuj wszystkie funkcjonalności FreshMaila za darmo na: Osoba kontaktowa Marcin Kusz New Business Manager 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 wyeliminować wszystkie potencjalne błędy. Zapraszamy wszystkich zainteresowanych Front End Developerów do współpracy przy tworzeniu kolejnych jego wersji odezwij się do nas na css@freshmail.pl Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 24

25 Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 25

26 Dodatek: szczegółowe wyniki badania Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 26

27 !"#$%&'!#()*#+,%-&.$/#,0%12#*/+,%-&3 cb[! "#$%&'&%&(&)# 89&:+; 89&<+; 89&=+; >0($%%#&A+; D#E#4$&?+F+C GH40")&CC+; GH40")&CF+; Gmail.com,4()5%67#42# I7($#J&,4()5%67#42$&K& 4LM2I&K)7JI5& 4L(L20& 4#M2$M5+,% <N<OP CAN;OP FN;=P FFN::P ;NA<P ;N?:P CCNA;P C?N=OP IdL*20K#M$#& 8&Q&R S1*L%)TSU1*L%)T& K&1)2VW$&SH)#7T * * * * * * * * * +,-./0 8&Q&X!! %1)2'&%&(&)# 88&Q&R 88&Q&X!!! "&%&2#34$ S1*L%)TSU1*L%)T& K&1)2VW$&SY07LT * * * * * * * * * +,-./0 S%$M2TSU%$M2T&&K& 1)2VW$&SH)#7T * * * * * * * * * +,-./0 S%$M2TSU%$M2T&K& 1)2VW$&SY07LT * * * * * * * * * +,-./0 888&Q&R )& * * 5 * 5 5 * &Q&X Z& * * 5 * * * * * * &Q&G )&T&E& * * * * * * * * * +,-./0 888&Q&[ )\%$M2& * * * * * * * * * +,-./0 888&Q&9 )\#V]/) * * * * * * * * * +,-./0 888&Q&^ )\H0/)4& * * Q * * * * * * +,-./0 888&Q&! )\E0VI1 * * Q * * * * _UQ _UQ &Q&` )_E * * 5 * 5 5 * &Q&8 )ae00b * * * * * * * * * +,-./0 Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 27

28 !"#$%&'!#()*#+,%-&.$/#,0%12#*/+,%-&3,4()5%67#42# 89&:+; 89&<+; 89&=+; %&'()**+),%"!!!!!!!!! "#$%&'!!!"-" %./0!!!!!!!!! "#$%&'!!!"#"1 %234*5#(/6%"!!!!!!!!! "#$%&'!!!"#"7 %234*5#(%8%4"!!!!!!!!! "#$%&' # ()*+,-(.+,-/0)* 9: ;)'<=4>?60#'>(> $22' ;)'<=4>?60# 9@ /,)=%"!!!!!!!!! "#$%&' 9A ;)'<=4>?60# 4%B%)5"!!!!!!!!! "#$%&' 9C ;)'<=4>?60# B>*/D>6!!!!!!!!! "#$%&' ()*+,-(.+,-/ 3.45*6.(*7-* E: ;>40%4" $22' ;>40%4# E@ FB>*/D>6G#'>(>4" 1 1! 1!! 1!! 89$89' EA ;>40%4#'>(()B*%" $22' EC ;>40%4#*B)'/6="!!! 1 1! $89' EH ;>40%4#*5I(% $22' EJ ;>40%4#K/05L $22' : ;-<0= M: (/*5#*5I(%#/,)=%!!!!!!!!! "#$%&' M@ (/*5#*5I(%#B>*/D> $22' MA (/*5#*5I(%#5IB% $22' 8,>,-.7?- >0($%%#&A+; B,)4#&CC+@; D#E#4$&?+F+C GH40")&CC+; GH40")&CF+; Gmail.com Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 28

29 !"#$%&'!#()*#+,%-&.$/#,0%12#*/+,%-&3,4()5%67#42# 89&:+; 89&<+; 89&=+; Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 29 >0($%%#&?+@ N: O>65#O),/(I $22' N@ O>65#*/P% $22' NA O>65#*5I(% $22' NC O>65#Q)4/) $22' NH O>65#K%/=L $22' 6*5@-7A<=/-/ 9 (,-B,-*!" #$%&'()!!!!!"#!"#!!"#!"# $%$$&!* +$,,'(&!!!!!!!!! $%$$& ()*+,-(./,-0 ' "./0/%)!!!!!!!!! $%$$& -*,'%1.2/(!!!!!!!!! $%$$& %56+$.'(&!!!!!!!!! $%$$& -7 0'(1581'&89!!!!!!!!! $%$$& -: 91;95$0'&()!!!!!!!!! $%$$& -< 91;95,1./%$2/(!!!!!!!!! $%$$& -= 91;95'(,1(9)!!!!!!!!! $%$$& $%$$& $%$$& 8,>,-.7?- -C B8'9156+$.1 #!! 5%56& 8.9:,;.<.(*<- 7 2 E" F/4/#) # # # # # # $%$$& E7.0'+) # # # # # # 5=%>'& E: >0($%%#&A+; B,)4#&CC+@; D#E#4$&?+F+C GH40")&CC+; GH40")&CF+; Gmail.com

30 !"#$%&'!#()*#+,%-&.$/#,0%12#*/+,%-&3,4()5%67#42# 89&:+; 89&<+; 89&=+; E:,'6+0$G)!!!!!!!!! $%$$& E< H/$9!!!!!!!!! $%$$& E= 01I # # # # # # # # # 5=%>'& E> +/6'2/( # # # # # # # # # 5=%>'& EA %'&89 # # # # # # # # # 5=%>'& EC 9/+ # # # # # # # # # 5=%>'& EJ K1%2.$05$0'&(!!!!!!!!! $%$$& EL M5'(,1; # # # # # # # # # 5=%>'& >?.9@-*? N" 81'&89!!!! # #! # # A'%A'& N* B',98!!!! #!!!! 5%56& N3 #'(581'&89 #!!!!!!!! 5%56&!" #$%&'$()*! " " "! " " " " #$%#$& ())*+ ',-./0(,1/0( +, -./01/!!!!!!!!! '2%3$& +2 3#4)5& " "! " " " "!! 4%44& $)57!!!!!!!!! '2%3$& +" 1:3/;1' " "! "!! "!! 56%56& +< )9=63&6951.) " " " " " " " " " 4%44& +> :$0$=$6$)5!!!!!!!!! '2%3$& 70*).+,89.:0(.+;<< >0($%%#&A+; B,)4#&CC+@; D#E#4$&?+F+C GH40")&CC+; GH40")&CF+; Gmail.com PK" 4/?3@6A(9/B9 C<7DEF C<7!EF C<7+EF G1?$6697HEI G1?$6697JEF K43/97LLEIF M9N9/$7HEOEL 8*/1#37LLEF 8*/1#37LOEF 5'& 65& 6#& 66& 5'& 65& 65& 64& 64& OQDI Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 30

31 !"#$%&'()* `;W % &'()*+*)*,*-'!012(3!014(3!015(3 67+&**'18(9 )%+$,*-.'%/' C.+&'D1 )%+$,*-.'%/&1E1 %F"/C1E$.DC,1 %'"/&",()* 4G4HI <:G3HI?G35I!!"##$?8GH9I 3G:4I 3G82I <<G:3I <8G5HI 67+&**'1:(3 Interia.pl %F+F/71 CaF#/7E'"&'1!1J1K LM#F*$NLOM#F*$N1 E1M$/PQ&1LA$'.N R R. R. R R.. /"//$!1J1S %% )0-1+*)*,*-' LM#F*$NLOM#F*$N1 E1M$/PQ&1LT7.FN R R. R. R R.. /"//$!!1J1K L*&"/NLO*&"/N11E1 M$/PQ&1LA$'.N J J. J. U J.. #!"#!$!!1J1S %%% &*)*1'23( L*&"/NLO*&"/N1E1 M$/PQ&1LT7.FN J J. J. U J.. #!"#!$!!!1J1K $1 R R. R. R R.. /"//$!!!1J1S V1 R R. R J R R J J 45"45$!!!1J1@ $1N1>1 J J J J J J J J J 64"57$!!!1J1W $X*&"/1 R R. R. R R.. /"//$!!!1J10 $X'PYZ$ R R. R. R R.. /"//$!!!1J1[ $XA7Z$%1 R R. R. R R.. /"//$!!!1J1\ $X>7PCM J J J J J J J J J 64"57$!!!1J1] $R> J J. J. R J.. 89"89$!!!1J1! $^>77_ J J. R. R R..!#"!#$$ Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 31

32 !"#$%&'()*!012(3!014(3!015(3 67+&**'18(9 )%+$,*-.'%/'!!!"#"$ C.+&'D1 %&'()**+),%" - -! -! - -!! "#""$!!!"."/ % ! -! - -!! "#""$!!!"#"3 %456*7#(18%" - -! -! - -!! "#""$!!!"#"9 %456*7#(%:%6" - -! -! - -!! "#""$ % &'()*+&,)*+-.'( ;< =)'>?6@A82#'@(@- -! -! - -!! "#""$ =)'>?6@A82# ;B 1,)?%" - -! -! - -!! "#""$ ;C =)'>?6@A82# 6%D%)7" - -! -! - -!! "#""$ ;E =)'>?6@A82# D@*1F@8 - -! -! - -!! "#""$ &'()*+&,)*+- /,01(2,&(3+( G< =@62%6" - -! -! - -!! "#""$ 67+&**'1:(3 Interia.pl GB =@62%6# HD@*1F@8I#'@(@6" # # # # # # # # # 4%#56$ GC =@62%6#'@(()D*%" - -! -! - -!! "#""$ GE =@62%6#*D)'18?" - -! -! - -!! "#""$ GJ =@62%6#*7K(% - -! -! - -!! "#""$ GL =@62%6#M127N - -! -! - -!! "#""$ : O< (1*7#*7K(%#1,)?% - - # - # # - # # ;<#;<$ OB (1*7#*7K(%#D@*1F@8- -! -! - -!! "#""$ OC (1*7#*7K(%#7KD% - -! -! - -!! "#""$ ; *=*+,3>+ Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 32

33 !"#$%&'()* )%+$,*-.'%/' ; C.+&'D1 *=*+,3>+!012(3!014(3!015(3 Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych &**'18(9 P< Q@87#Q),1(K - -! -! - -!! "#""$ PB Q@87#*1R% - -! -! - -!! "#""$ PC Q@87#*7K(% - -! -! - -!! "#""$ PE Q@87#S)61)87 - -! -! - -!! "#""$ PJ Q@87#M%1?N7 - -! -! - -!! "#""$ "#$%&'()*+&+!,-&.-&#!" #$%&'() * * *+, * *+, *+, * *+, *+, /0//1!-.$//'(& * * 2 * 2 * * 2 2 /0//1,4#)-&,56-&+ 3 7(8)79 0" 1232%) * * 2 * 2 * * 2 2 /0//1 0- /'%4152(,,,,,,,,, :;0< %,8.$1'(& * * 2 * 2 * * 2 2 /0//1 09 3'(4,:4'&:; * * 2 * 2 * * 2 2 /0//1 0< ;4=;,$3'&() * * 2 * 2 * * 2 2 /0//1 0> ;4=;,/412%$52( * * 2 * 2 * * 2 2 /0//1 0? ;4=;,'(/4(;) * * 2 * 2 * * 2 2 /0//1 0@ ;4=;,;%$(8A2%# * * 2 * 2 * * 2 2 /0//1 0B C2%/,8.$1'(& * * 2 * 2 * * 2 2 /0//1 0D C:';4,8.$14,+* *, *,, *,, =!0=!1?5@*-A5'5,#'& > ( E" F272#),, 2, 2,, 2 2 >B0>B1 E- 1$.52(,8'/4) * * 2 * 2 * * 2 2 /0//1 E6 134$%) * * 2 * 2 * * 2 2 /0//1 E9 13'.),,,, 2,,,, >B0>B1 E< /'8.3$G) * * 2 * 2 * * 2 2 /0//1 67+&**'1:(3 Interia.pl

34 !"#$%&'()*!012(3!014(3!015(3 67+&**'18(9 )%+$,*-.'%/' E< C.+&'D1 /'8.3$G) * * 2 * 2 * * 2 2 /0//1 E> H2$; * * 2 * 2 * * 2 2 /0//1 E? 34I,, 2, 2 *, 2 2!=0!=1 E@.28'52(,, 2, 2 *, 2 2!=0!=1 EB %'&:;,, 2, 2 *, 2 2!=0!=1 ED ;2.,, 2, 2 *, 2 2 >B0>B1 EJ K4%51$3,$3'&( * * 2 * 2 * * 2 2 /0//1 EL M,'(/4=,,,, 2,,,, >B0>B1 < $5@"&#$ N" :4'&:; * * 2 * 2 * * 2 2 /0//1!" #$%&' ( (! (! ( (!! "#""$!) *$+,'-$.'&,,,,,,,,, %&#'($!/ *$+,#$%&',,,,,,,,, %&#'($ )**+, % -./01)-201) ,,,,,,,,, %&#'($ 0" -*7&8,2-995: ( (! (! ( (!! "#""$ 0) 67;2$&8:,,,,,,,,, %&#'($ 0/ 6<-4=6#,,,,! (,,, '&#'&$ 0> &;?9-,9;863& ( (! (! ( (!! "#""$ 0@ <$5$?$9$&8,,!,! (,!! 34#34$ 51+*/,-67/81)/,9:: 67+&**'1:(3 Interia.pl QL/ 74A-.9B%;4C; D>:EFG D>:!FG D>:0FG H6A$99;:IFJ H6A$99;:KFG L7-4;:MMFJG N;O;4$:IFPFM )'46*-:MMFG )'46*-:MPFG ('$ ;"$ ;%$ ;&$ '<$ ;&$ ;&$ ;'$ ;'$ IRJJ Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 34

35 !"#$%&' _!V! "#$%&'&%&(&)# /012%3 /014%3 /015%3 67)8''-19%: &()#*'+,-(.- C,)8-D1 &()#*'+,-(.81E1 (F".C1E#,DC*1 (-".8"*%&' 4G4HI <;G3HI?G35I??G22I?9GH:I 3G;4I 3G92I <<G;3I <9G5HI Onet.pl (F)F.71 C`F$.7E-"8-1 /1J1K LM$F'#NLOM$F'#N1 E1M#.PQ81LA#-,N R R R R R R R R R *+**, /1J1S!! %/)0'&%&(&)# LM$F'#NLOM$F'#N1 E1M#.PQ81LT7,FN J J R J R R J R R -.+-., //1J1K L'8".NLO'8".N11E1 M#.PQ81LA#-,N J J R J R R J R R 12+12, //1J1S!!! "&%&0#34$ L'8".NLO'8".N1E1 M#.PQ81LT7,FN J J R J R R J R R 12+12, ///1J1K #1 R R R R R R R R R *+**, ///1J1S U1 R R R R J R R R R *+**, ///1J1@ #1N1>1 R R R R R R R R R 5+*5, ///1J1V #W'8".1 R R R R R R R R R *+**, ///1J10 #W-PXY# R R R R R R R J J 5+56, ///1J1Z #WA7Y#(1 R R R R R R R R R *+**, ///1J1[ #W>7PCM J R R R R R R R R 21+21, ///1J1\ #R> J J R R R R R R R.-+.-, ///1J1/ #]>77^ J J R R R R R R R.-+.-, Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 35

36 !"#$%&' &()#*'+,-(.- /012%3 /014%3 /015%3 67)8''-19%:!!!"#"$ %&'()**+),%" !"!!#!!!"#". %/ !"!!#!!!"#"2 %345*6#(07%" !"!!#!!!"#"8 %345*6#(%9%5" !"!!# $ %&'()*%+()*,-&' :; <)'=>5?@71#'?(? !"!!# <)'=>5?@71# :A 0,)>%" !"!!# :B <)'=>5?@71# 5%C%)6" !"!!# :D <)'=>5?@71# C?*0E? !"!!# %&'()*%+()*,. +/0'1+%'2*' F; <?51%5" !"!!# Onet.pl FA <?51%5# GC?*0E?7H#'?(?5" !"!!# FB <?51%5#'?(()C*%" !"!!# FD <?51%5#*C)'07>" # # ".3# FI <?51%5#*6J(% !"!!# FK <?51%5#L016M !"!!# 4 5*6-7 N; (0*6#*6J(%#0,)>% - - # - # # - # # 89"89# NA (0*6#*6J(%#C?*0E? !"!!# NB (0*6#*6J(%#6JC% !"!!# 8 ):)*+2;* Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 36

37 !"#$%&' &()#*'+,-(.- 8 ):)*+2;* /012%3 /014%3 /015%3 Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 37 67)8''-19%: O; P?76#P),0(J !"!!# OA P?76#*0Q% !"!!# OB P?76#*6J(% !"!!# OD P?76#R)50) !"!!# OI P?76#L%0>M !"!!# "#$%&'()*+&+!,-&.-&#!" #$%&'() * * *+, * *+, *+, * *+, *+, /0//1!-.$//'(& * * * * * * * * * /0//1,3#)-&,45-&+ 2 6(7)68 0" 1232%) * * * * * * * * * /0//1 0- /'%4152( * * * * * * * * * /0// %,8.$1'(& * * * * * * * * * /0//1 09 3'(4,:4'&:; * * * * * * * * * /0//1 0< ;4=;,$3'&() * * * * * * * * * /0//1 0> ;4=;,/412%$52( * * * * * * * * * /0//1 0? ;4=;,'(/4(;) * * * * * * * * * /0//1 0@ ;4=;,;%$(8A2%# * * * * * * * * * /0//1 0B C2%/,8.$1'(& * * * * * * * * * /0//1 0D C:';4,8.$14,+* * * * * * * * * /0//1 :4;*-<4'4,#'& 9 ( E" F272#) * * * * * * * * * /0//1 E- 1$.52(,8'/4) * * * * * * * * * /0//1 E6 134$%) * * * * * * * * * /0//1 E9 13'.) * *,,,,,,, 9=09=1 E< /'8.3$G) * * * * * * * * * /0//1 Onet.pl

38 !"#$%&' &()#*'+,-(.- /012%3 /014%3 /015%3 67)8''-19%: E< /'8.3$G) * * * * * * * * * /0//1 E> H2$; * * * * * * * * * /0//1 E? 34I * * * * * * * * * /0//1 E@.28'52( * * * * * * * * * /0//1 EB %'&:; * * * * * * * * * /0//1 ED ;2. * * * * * * * * * /0//1 EJ K4%51$3,$3'&( * * * * * * * * * /0//1 EL M,'(/4=,, *, *,, * * 2>02>1? $4;"&#$ N" :4'&:; * * * * * * * * * /0//1!" #$%&' ( ( ( ( ( ( ( ( (!"!!#!) *$+,'-$.'&,, ( ( ( ( (,, $%"$%#!/ *$+,#$%&',, ( ( ( ( ( ( ( &'"&'# )**+, ( -./01)-201) ( ( ( ( ( ( ( ( (!"!!# 0" -*7&8,2-995: ( ( ( ( ( ( ( ( (!"!!# 0) 67;2$&8:,,, ( ( ( ( ( ( &'"&'# 0/ 6<-4=6# ( (, ( ( ( (,,!"!!# 0> &;?9-,9;863& ( ( ( ( ( ( ( ( (!"!!# 0@ <$5$?$9$&8 ( ( ( ( ( ( ( ( (!"!!# 31+*/,-45/61)/,788 Onet.pl QL/ 74A-.9B%;4C; D>:EFG D>:!FG D>:0FG H6A$99;:IFJ H6A$99;:KFG L7-4;:MMFJG: N;O;4$:IFPFM )'46*-:MMFG )'46*-:MPFG 9&# 9'# (:# (&# (;# (<# (&# ($# ($# KRSK Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 38

39 !"#"$ `:W! "#$%&'&%&(&)# -./0#1 -./2#1 -./3#1 45&6$$+/7#8 "%&'($)*+%,+ B*&6+C/ "%&'($)*+%,6/D/ %EF,B/D'*CB(/ %+F,6F(#"$ 2G2HI ;9G1HI >G13I >>G00I >7GH8I 1G92I 1G70I ;;G91I ;7G3HI 45&6$$+/9#1 :"'%+/;;#81 Wp.pl %E&E,5/ BaEN,5D+F6+/ -/J/K LMNE$'OLPMNE$'O/ S S S S S S S S S *+**, -/J/T!! %/)0'&%&(&)# LMNE$'OLPMNE$'O/ D/M',QR6/LU5*EO S S J S J J S S S -.+-., --/J/K L$6F,OLP$6F,O//D/ M',QR6/L@'+*O S S S S S S S S S *+**, --/J/T!!! "&%&0#34$ L$6F,OLP$6F,O/D/ M',QR6/LU5*EO S S S S S S S J J 1+12, ---/J/K '/ S S S S S S S S S *+**, ---/J/T V/ S S S S S J S J J -.+-., ---/J/? '/O/=/ S S J S J S S S S -.+-., ---/J/W 'X$6F,/ S S S S S S S S S *+**, ---/J/. 'X+QYZ' S S S S S S S S S *+**, ---/J/[ 'X@5Z'%/ S S S S S S S J J 1+12, ---/J/\ 'X=5QBM J S J S J J S S S 52+52, ---/J/] 'S= J J S S S S S S S -.+-., ---/J/- '^=55_ J J S S S S S S S -.+-., Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 39

40 !"#"$ -./0#1 -./2#1 -./3#1 45&6$$+/7#8 "%&'($)*+%,+!!!"#"$ B*&6+C/ %&'()**+),%" !"!!#!!!"."/ %012 # $%"$%#!!!"#"3 %456*7#(18%" !"!!#!!!"#"9 %456*7#(%:%6" !"!!# $ &'()*+&,)*+-.'( ;< =)'>?6@A82#'@(@ !"!!# =)'>?6@A82# ;B 1,)?%" !"!!# ;C =)'>?6@A82# 6%D%)7" !"!!# ;E =)'>?6@A82# D@*1F@ !"!!# &'()*+&,)*+- /,01(2,&(3+( G< =@62%6" !"!!# 45&6$$+/9#1 :"'%+/;;#81 <+=+%6/7#>#;?@%5A'/;;#1?@%5A'/7#1 Wp.pl GB =@62%6# HD@*1F@8I#'@(@6" - - # - # # /4"/4# GC =@62%6#'@(()D*%" !"!!# GE =@62%6#*D)'18?" # - # - # "56# GJ =@62%6#*7K(% !"!!# GL =@62%6#M127N !"!!# O< (1*7#*7K(%#1,)?% - - # - # # - # # :;":;# OB (1*7#*7K(%#D@*1F@ !"!!# OC (1*7#*7K(%#7KD% !"!!# : *<*+,3=+ Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 40

41 !"#"$ "%&'($)*+%,+ : B*&6+C/ *<*+,3=+ -./0#1 -./2#1 -./3#1 Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 41 45&6$$+/7#8 P< Q@87#Q),1(K !"!!# PB Q@87#*1R% !"!!# PC Q@87#*7K(% !"!!# PE Q@87#S)61) !"!!# PJ Q@87#M%1?N !"!!# "#$%&'()*+&+!,-&.-&#!" #$%&'() * * *+, * *+, *+, * *+, *+, /0//1!-.$//'(& * * * * * * * * * /0//1,3#)-&,45-&+ 2 6(7)68 0" 1232%) * * * * * * * * * /0//1 0- /'%4152( * *, *,, * * * 9:09: %,8.$1'(& * * * * * * * * * /0//1 09 3'(4,:4'&:; * * * * * * * * * /0//1 0< ;4=;,$3'&() * * * * * * * * * /0//1 0> ;4=;,/412%$52( * * * * * * * * * /0//1 0? ;4=;,'(/4(;) * * * * * * * * * /0//1 0@ ;4=;,;%$(8A2%# * * * * * * * * * /0//1 0B C2%/,8.$1'(& * * * * * * * * * /0//1 0D C:';4,8.$14,+* *, *,, * * * 9:09:1 ;4<*-=4'4,#'& : ( E" F272#) * *, *,, * * * 9:09:1 E- 1$.52(,8'/4) * * * * * * * * * /0//1 E6 134$%) * * * * * * * * * /0//1 E9 13'.) * *, *,, * * * 9:09:1 E< /'8.3$G) * * * * *, * * * /0//1 45&6$$+/9#1 :"'%+/;;#81 <+=+%6/7#>#;?@%5A'/;;#1?@%5A'/7#1 Wp.pl

42 !"#"$ -./0#1 -./2#1 -./3#1 45&6$$+/7#8 "%&'($)*+%,+ E< B*&6+C/ /'8.3$G) * * * * *, * * * /0//1 E> H2$; * * * * * * * * * /0//1 E? 34I * *, *,, * * * 9:09:1 E@.28'52( * *, *,, * * * 9:09:1 EB %'&:; * *, *,, * * * 9:09:1 ED ;2. * *, *,, * * * 9:09:1 EJ K4%51$3,$3'&( * * * * * * * * * /0//1 EL M,'(/4= * *, *, * * * * >?0>?1? $4<"&#$ N" :4'&:; * * * * * * * * * /0//1!" #$%&' ( ( ( ( ( ( ( ( (!"!!#!) *$+,'-$.'&,,, (,, ( ( ( $%"$%#!/ *$+,#$%&',,, (,, (,, &'"&'# )**+, ( -./01)-201) ( (, (, ( ( ( (!"!!# 0" -*7&8,2-995: ( ( ( ( ( ( ( ( (!"!!# 0) 67;2$&8:,,, (,, ( ( ( $%"$%# 0/ 6<-4=6# ( (, (,, (,, $%"$%# 0> &;?9-,9;863& ( ( ( ( ( ( ( ( (!"!!# 0@ <$5$?$9$&8 ( (, (,, ( ( ( 34"34# 51+*/,-67/81)/,9:: 45&6$$+/9#1 :"'%+/;;#81 <+=+%6/7#>#;?@%5A'/;;#1?@%5A'/7#1 Wp.pl QL/ 74A-.9B%;4C; D>:EFG D>:!FG D>:0FG H6A$99;:IFJ H6A$99;:KFG L7-4;:MMFJG N;O;4$:IFPFM )'46*-:MMFG )'46*-:MPFG &4# (;# <(# '!!# <(# ((# '!!# ('# ('# J Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 42

43 !"#$%&'()*+*,-*#$%. b!x % &'()*+*)*,*-' 56&7#8 56&9#8 56&:#8 ;*/<%%4&=#> ;*/<%%4&?#8!$0)4&@@#>8 A4B4)<&=#"#@ CD)*E0&@@#8 CD)*E0&@"#8 O2.pl $)/01%234)+4 F3/<4G& $)/01%234)+<&H& )I,+F&H03GF1& )I/I+*& )4,+<,1#$% "J8:L!!"##$ "=JK>L FcI-+*H4,<4& 5&M&N OP-I%0QORP-I%0Q& H&P0+ST<&OD043Q /"//$ 5&M&U %% )0-1+*)*,*-' OP-I%0QORP-I%0Q& H&P0+ST<&OV*3IQ /"//$ 55&M&N O%<,+QOR%<,+Q&&H& P0+ST<&OD043Q "34$ 55&M&U %%% &*)*1'56( O%<,+QOR%<,+Q&H& P0+ST<&OV*3IQ "34$ 555&M&N 0& /"//$ 555&M&U W& /"//$ 555&M&C 0&Q&B& "73$ 555&M&X 0Y%<,+& /"//$ 555&M&6 0Y4SZ[ "73$ 555&M&\ 0YD*[0)& /"//$ 555&M&] 0YB*SFP "89$ 555&M&^ 0_B "34$ 555&M&5 0`B**a !#"!#$ Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 43

44 !"#$%&'()*+*,-*#$%. $)/01%234)+4 56&7#8 56&9#8 56&:#8 ;*/<%%4&=#>!!!"#"$ %&'()**+),%"!!!!!!!!! "#""$!!!"-". %/01!!!!!!!!! "#""$!!!"#"2 %345*6#(07%"!!!!!!!!! "#""$!!!"#"8 %345*6#(%9%5"!!!!!!!!! "#""$ % &'()*+&,)*+-.'( :; <)'=>5?@71#'?(?!!!!!!!!! "#""$ <)'=>5?@71# :A 0,)>%"!!!!!!!!! "#""$ :B <)'=>5?@71# 5%C%)6"!!!!!!!!! "#""$ :D <)'=>5?@71# C?*0E?7!!!!!!!!! "#""$ &'()*+&,)*+- /,01(2,&(3+( F; <?51%5"!!!!!!!!! "#""$ ;*/<%%4&?#8!$0)4&@@#>8 A4B4)<&=#"#@ CD)*E0&@@#8 CD)*E0&@"#8 O2.pl FA <?51%5# GC?*0E?7H#'?(?5"!!!!!!!!! "#""$ FB <?51%5#'?(()C*%"!!!!!!!!! "#""$ FD <?51%5#*C)'07>" 4 4 4!!!!!! /5#/5$ FI <?51%5#*6J(%!!!!!!!!! "#""$ FK <?51%5#L016M!!!!!!!!! "#""$ N; (0*6#*6J(%#0,)>%!! 4! 4 4! 4 4 :;#:;$ NA (0*6#*6J(%#C?*0E?7!!!!!!!!! "#""$ NB (0*6#*6J(%#6JC%!!!!!!!!! "#""$ : *<*+,3=+ Raport FreshMail 2011 Technologia CSS w aplikacjach pocztowych 44