Technologia CSS w aplikacjach...

Technologia CSS w aplikacjach pocztowych Wytyczne dla projektantów newsletterów

Raport FreshMail

Maj 2010

2

Raport FreshMail Technologia CSS w aplikacjach pocztowych

Spis treści

Wstęp 03

Metodologia badao 04

Wyniki badao 07

21 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

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 e-mailingu, 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

Odwiedź blog oraz bazę wiedzy FreshMail na http://freshmail.pl

3

http://freshmail.pl/

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 e-mail 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 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

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 e-mail.

Nie ulega wątpliwości, że badania nad zastosowaniem technologii CSS

w e-mail 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 e-mail 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

5


Aplikacje webowe

aol.pl

duno.pl

gazeta.pl

gery.pl

gmail.com

home.pl

hotmail.com

interia.pl

nazwa.pl

o2.pl

onet.pl

pino.pl

poczta.pl

prokonto.pl

vivapolskatv.pl

wp.pl

yahoo.com

Aplikacje desktopowe

Apple Mail 3.6

Microsoft Office Outlook 2003

Microsoft Office Outlook 2007

Microsoft Office Outlook 2010 (beta)

Mozilla Thunderbird 2

The Bat!

Windows Mail

Lotus 8.5

Lotus 6.5

Przeglądarki internetowe

Google Chrome 3.0

Internet Explorer 6.0



Mozilla Firefox 3.5

Mozilla Firefox 2.0

Opera 9.63

Safari 4.0

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 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 CSS =

* 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 e-mail w danej aplikacji pocztowej. Badane

przez nas przeglądarki pocztowe stanowią obecnie około 92% polskiego

rynku (ranking.pl – 7.01.2009). 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%

Liczba wspieranych właściwości CSS *

Liczba badanych właściwości CSS (69)

x 100

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 2003.

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.

8


aplikacje desktopowe aplikacje webowe

KOD

własnośd CSS

Ap

ple

Mai

l 3.6

Win

do

ws

Mai

l

Thu

nd

erb

ird

2

Ou

tlo

ok

20

07

Ou

tlo

ok

20

03

The

Bat

Ou

tlo

ok

20

10

bet

a

Lotu

s 6

.5

Lotu

s 8

.5

On

et.p

l

Wp

.pl

Gm

ail.

com

Gaz

eta.

pl

Viv

aPo

lsk

aTv

Po

czta

.pl

Naz

wa

.pl

Ho

tmai

l.co

m

Du

no

.pl

Ger

y.p

l

Yah

oo

.co

m

Pro

kon

to.p

l

Pin

o.p

l

o2

.pl

AO

L.p

l

Ho

me.

pl

Inte

ria.

pl

Ryz

yko

sto

sow

ania

I style element I - A <style></style> w sekcji <head> + + + + + + + - + + + - - - + + + - + + + - + + + + 23,08%

I - B <style></style> w sekcji <body> + + + + + + + - + - + - - - + + + - + + + - + + + + 26,92% II link element II - A <link></link> w sekcji <head> + + + + + - + + + - + - - - + - + - + + - - - - + - 46,15%

II - B <link></link> w sekcji <body> + + + + + - + - + - + - - - + - + - + + - - - - + - 50,00% III selektory III - A e + + + + + - + - + + + - - - + + + - + + + - + + + + 26,92% III - B * + + + - + - - - + + + - - - + + + - + + + - + + + + 34,62%

III - C e > f + - + - - - - - - - - - - - - - - - - - - - - - - - 92,31% III - D e:link + + + + + - + - + + + - - - + + + - + + + - + + + + 26,92% III - E e:active + + + - + - - - + + + - - - + + + - + + + - + + + + 34,62%

III - F e:hover + + + - + - - - + + + - - - + + + - + + + - + + + + 34,62% III - G e:focus + - + - - - - - - - - - - - - - - - - - - - - - - - 92,31% III - H e+f + - + - - - - - - - - - - - - - - - - - - - - - - - 92,31% III - I e[foo] + - + - - - - - - - - - - - - - - - + - - - - + - - 84,62%

III - J e.className + + + + + - + - + + + - - - + + + - + + + - + + + + 26,92% III - K e#id + + + + + - + - + + - - - - + + - - + + + - + + + + 34,62% III - L e:first-line + + + - + - - - + + + - - - + + + - + + + - + + + + 34,62% III - M e:first-letter + + + - + - - - + + + - - - + + + - + + + - + + + + 34,62%

1 właściwości tła 1A background-color + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85% 1B background-image + + + - + + - - - + + - - - + + - + + + + + + + + + 30,77%

1C background-repeat + + + - + + - - - + + - - - + + - + + + + + + + + + 30,77% 1D background-position + + + - + + - - - + + - - - + + - + + + + + + + + + 30,77% 2 właściwości obramowania 2A border + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85%

2B border-[position]-color + + + + + - + - + + + + + + + + + + + + + + + + + - 11,54% 2C border-collapse + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85%

9


2D border-spacing - - + - - + - - - - - - - - - - - - - - - - - - - + 88,46% 2E border-style + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85% 2F border-width + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85% 3 listy

3A list-style-image + + + - + - - - - + + - - - + + - + + + + + + + + + 34,62% 3B list-style-position + + + - + - - - - + + + + + + + + + + + + + + + + + 19,23% 3C list-style-type + + + + + - + + + + + + + + + + + + + + + + + + + + 3,85%

4 czcionki 4A font-family + + + + + + + + + + + + + + + + + + + + + + + + + + 0,00% 4B font-size + + + + + + + + + + + + + + + + + + + + + + + + + + 0,00% 4C font-style + + + + + + + + + + + + + + + + + + + + + + + + + + 0,00%

4D font-variant + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85% 4E font-weight + + + + + + + + + + + + + + + + + + + + + + + + + + 0,00% 5 marginesy i wcięcia 5A margin + + + + + - + - + + + + + + + + + + + + + + + + + + 7,69%

5B padding + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85% 6 własciwości tekstu 6A color + + + + + - + + + + + + + + + + + + + + + + + + + + 3,85%

6B direction + + + + + - + - + + + + + + + + + + + + + + + + + - 11,54% 6C letter-spacing + + + + + - + - + + + + + + + + + + + + + + + + + + 7,69% 6D line-height + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85% 6E text-align + + + + + + + + + + + + + + + + + + + + + + + + + + 0,00%

6F text-decoration + + + + + + + + + + + + + + + + + + + + + + + + + + 0,00% 6G text-indent + + + + + - + - + + + + + + + + + + + + + + + + + + 7,69% 6H text-transform + + + + + - + - + + + + + + + + + + + + + + + + + + 7,69%

6I word-spacing + - + - - - - - + + + + + + + + + + + + + + + + + + 23,08% 6J white-space + - + + - + + - - -+ -+ -+ -+ -+ - + -+ -+ -+ -+ - -+ - -+ -+ -+ 26,92% 7 pozycjonowanie 7A bottom + + + - + - - - + + + - - - + - - + + - + + + + + - 42,31%

7B caption-side + - + + - - + - - + + + + + + + + + + + + + + + + + 19,23% 7C clear + + + - + + - - + + + + + + + + + + + + + + + + + + 11,54% 7D clip + + + - + - - - - + + - - - + - - - - - + + + + + - 53,85% 7E display + + + - + - - + + + + + + + + + + + + + + + + + + + 11,54%

7F float + + + - + - - + + + + + + + + + + + + + + + + + + + 11,54% 7G left + + + - + - - - + + + - - - + - - + + - + + + + + - 42,31% 7H position + + + - + - - - + + + - - - + - - + + - + + + + + - 42,31%

7I right + + + - + - - - + + + - - - + - - + + - + + + + + - 42,31% 7J top + + + - + - - - + + + - - - + - - + + - + + + + + - 42,31% 7K vertical-align + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85%

10


7L z-index + + + - + - - - + + + - - - + - - + + - + + + + + - 42,31% 8 rozmiar 8A height + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85% 8B width + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85%

8C min-height - - + - - - - - + -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ -+ - 30,77% 8D min-width + - - - - - - - + - - - - - - - - - - - - - - - - - 92,31% 9 inne właściwości

9A cursor + + + - + + - - + + + - - - + + + + + + + + + + + - 26,92% 9B empty-cells + + + + - + + - - + + + + + + + + + + + + + + + + + 11,54% 9C opacity + - + - - - - - - - - - - - - - - - - - - + - - - - 88,46% 9D overflow + + + - + - - - - + + + + + + + + - + + + + + + + - 26,92%

9E table-layout + + + + + + + - + + + + + + + + + + + + + + + + + + 3,85% 9F visibil ity + + + - + - - - - + + - - - + + + + + + + + + + + - 34,62%

KOD

aplikacja pocztowa A

pp

le M

ail 3

.6

Win

do

ws

Mai

l

Thu

nd

erb

ird

2

Ou

tlo

ok

20

07

Ou

tlo

ok

20

03

The

Bat

Ou

tlo

ok

20

10

Lotu

s 6

.5

Lotu

s 8

.5

On

et.p

l

Wp

.pl

Gm

ail.

com

Gaz

eta.

pl

Viv

aPo

lsk

aTv

Po

czta

.pl

Naz

wa

.pl

Ho

tmai

l.co

m

Du

no

.pl

Ger

y.p

l

Yah

oo

.co

m

Pro

kon

to.p

l

Pin

o.p

l

o2

.pl

AO

L.p

l

Ho

me.

pl

Inte

ria.

pl

R

yzy

ko s

toso

wan

ia

wsparcie CSS przez aplikację 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

%

11


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-8859-2 lub UTF-8.

2. 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 e-mail 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; padding-

right: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 e-mail 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

emailowego. Należy pamiętad o prawach i regułach

prezentowania najważniejszych informacji.

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 emailowej powinny byd pobierane z

absolutnych adresów URL.

15. Wiadomości e-mail powinny posiadad zarówno swój HTML-

owy 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 e-mail jest wiadomością

niepożądaną. We FreshMailu istnieje możliwośd sprawdzenia

przed wysłaniem wiadomości, czy e-mail 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.

13


Przepis na idealny mailing Email 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 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ą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)

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>



<html>

<head>



<style type="text/css" >

a {



}

body{



}



</style>



</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>.

15


2. Budowa sekcji głównej szablonu <body>

Szablon e-mailingu 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>



<table width="610" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td>









</td>

</tr>

</table>

</body>

</html>

16


2a. nagłówek (header)





<table width="610" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">

<tr>

<td align="center">

<img s tyle=”display:block” s rc="link do elementu graficznego" al t="alt" width="610" height="40" border="0">

</td>

</tr>

</table>



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">

17


2b. główna zawartośd dokumentu (main body)



<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">



<table border="0" cellpadding="0" cellspacing="0" width="610">

<tr>



<td valign="top" align="left" width="305" style="font-family:Tahoma , Verdana , sans-serif; font-size :11px;”>



</td>





<td valign="top" align="left" width="305" s tyle="font-family:Tahoma, Verdana, sans-serif; font-size :11px;">



</td>



</tr>

</table>






</td>

</tr>

</table>

18


2c. stopka (footer)



<tr>

<td align="center">

<p style=”font-size:10px”>

<resignlink> Link rezygnacji </resignlink>

</p>

</td>

</tr>

</table>

19


Przykładowy kod

<html>

<body>



<table width="610" border="0" align="center" cellpadding="0" cellspacing="0"> <tr>

<td>  


<tr>

<td align="center"> <img s tyle=”display:block” s rc="link do elementu graficznego" al t="alt" width="610" height="40" border="0">

</td> </tr> </table> 

!-- 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"> 

<table border="0" cellpadding="0" cellspacing="0" width="610"> <tr>



<td valign="top" align="left" width="305" style="font-family:Tahoma , Verdana , sans-serif; font-size :11px;”> 

</td>



 <td valign="top" align="left" width="305" style="font-family:Tahoma , Verdana , sans-serif; font-size :11px;">  </td>

20




</tr>

</table>

 

<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>



</td> </tr> </table> 

</td>

</tr> </table>

</body>

</html>

21


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

http://www.webdepot.umn.edu/email/coding.php

http://www.benchmarkemail.com/help-FAQ/answer/Common-HTML-Email-Coding-Mistakes

http://mailchimp.blogs.com/blog/2006/01/im_a_web_design.html

http://www.email-standards.org

http://www.sitepoint.com/article/code-html-email-newsletters

http://interaktywnie.com/newsy/1/e-mail-marketing

http://www.freshmail.pl/blog

http://www.marketing-news.pl/message.php?cat=45

http://www.email-standards.org

http://www.emaillabs.com/email_marketing_articles

http://www.alistapart.com

http://www.b2bemailmarketing.com

http://www.clickz.com/showPage.html?page=experts/em_mkt

http://www.emailsherpa.com

http://www.sitepoint.com/article/principles-beautiful-html-email

http://www.marketingsherpa.com/sample.cfm?contentID=2776#

http://www.email-marketing-reports.com

http://www.campaigner.com/education.php

http://www.quirksmode.org/css

http://www.webdepot.umn.edu/email/coding.php

http://www.benchmarkemail.com/help-FAQ/answer/Common-HTML-Email-Coding-Mistakes

http://mailchimp.blogs.com/blog/2006/01/im_a_web_design.html

http://www.email-standards.org/

http://www.sitepoint.com/article/code-html-email-newsletters

http://interaktywnie.com/newsy/1/e-mail-marketing

http://www.freshmail.pl/blog

http://www.marketing-news.pl/message.php?cat=45

http://www.email-standards.org/

http://www.emaillabs.com/email_marketing_articles

http://www.alistapart.com/

http://www.b2bemailmarketing.com/

http://www.clickz.com/showPage.html?page=experts/em_mkt

http://www.emailsherpa.com/

http://www.sitepoint.com/article/principles-beautiful-html-email

http://www.marketingsherpa.com/sample.cfm?contentID=2776

http://www.email-marketing-reports.com/

http://www.campaigner.com/education.php

http://www.quirksmode.org/css

22


O systemie FreshMail FreshMail posiada wiele niezwykłych funkcjonalności, które pozwolą Ci w profesjonalny sposób zarządzad swoją

komunikacją e-mail 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 http://freshmail.pl .

22


http://freshmail.pl/cennik

http://freshmail.pl/kontakt


23


Usługi z zakresu e-mail 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 e-mail 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ę e-mail 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 http://freshmail.pl .

23


24


Zapraszamy do współpracy Przetestuj wszystkie funkcjonalności FreshMaila za darmo na: http://freshmail.pl

Osoba kontaktowa Rafał Pantula

key account manager

[email protected]

tel.: 12 252 37 44

gsm: 502 714 784

Pomóż w rozwoju raportu Raport ma na celu pomóc w codziennym zmaganiach z projektowaniem i wdrażaniem szablonów emailowych. 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.


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 3.2.1 Chrome 3.0 ryzyko użytkowania 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%

I style element I - A <style></style> w sekcji <head> + + + + + + + + 0,00% I - B <style></style> w sekcji <body> - - - - - - - - 91,86%

II link element II - A <link></link> w sekcji <head> - - - - - - - - 91,86% II - B <link></link> w sekcji <body> - - - - - - - - 91,86% III selektory

III - A e + + + + + + + + 0,00% III - B * + + + + + + + + 0,00% III - C e > f - + + + + + + + 7,95% III - D e:link + + + + + + + + 0,00%

III - E e:active + + + + + + + + 0,00% III - F e:hover + + + + + + + + 0,00% III - G e:focus - - + + + + + + 23,71%

III - H e+f - - - + + + + + 32,59% III - I e[foo] - - - + + + + + 32,59% III - J e.className + + + + + + + + 0,00% III - K e#id + + + + + + + + 0,00%

III - L e:first-line + + + + + + + + 0,00% III - M e:first-letter + + + + + + + + 0,00% 1 właściwości tła 1A background-color + + + + + + + + 0,00%

1B background-image + + + + + + + + 0,00% 1C background-repeat + + + + + + + + 0,00% 1D background-position + + + + + + + + 0,00%

2 właściwości obramowania 2A border + + + + + + + + 0,00%

26


2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - - - + + + + + 32,59% 2E border-style + + + + + + + + 0,00%

2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image + + + + + + + + 0,00%

3B list-style-position + + + + + - + + 3,88% 3C list-style-type + + + + + + + + 0,00% 4 czcionki 4A font-family + + + + + + + + 0,00%

4B font-size + + + + + + + + 0,00% 4C font-style + + + + + + + + 0,00% 4D font-variant + + + + + + + + 0,00% 4E font-weight + + + + + + + + 0,00%

5 marginesy i wcięcia 5A margin + + + + + + + + 0,00% 5B padding + + + + + + + + 0,00%

6 własciwości tekstu 6A color + + + + + + + + 0,00% 6B direction + + + + + + + + 0,00% 6C letter-spacing + + + + + + + + 0,00%

6D line-height + + + + + + + + 0,00% 6E text-align + + + + + + + + 0,00% 6F text-decoration + + + + + + + + 0,00%

6G text-indent + + + + + + + + 0,00% 6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space -/+ -/+ + -/+ + + + + 0,00%

7 pozycjonowanie 7A bottom + + + + + + + + 0,00% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%

7D clip + + + - - - - - 59,27% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00%

7G left + + + + + + + + 0,00% 7H position + + + + + + + + 0,00% 7I right + + + + + + + + 0,00%

27


7J top + + + + + + + + 0,00% 7K vertical-align + + + + + + + + 0,00% 7L z-index + - - - - - - - 83,91% 8 rozmiar

8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - - + + + + + 24,64%

8D min-width - - - - + + + + 34,44% 9 inne właściwości 9A cursor + + + + + + + + 0,00% 9B empty-cells + + + + + + + + 0,00%

9C opacity - - - + + + + + 32,59% 9D overflow + + + + + + + + 0,00% 9E table-layout + + + + + + + + 0,00% 9F visibil ity + + + + + + + + 0,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 3.2.1 Chrome 3.0

4,64 łącznie dla przeglądarki 83% 83% 86% 90% 93% 91% 93% 93%

28


Wp.pl

KOD



I style element

I - A <style></style> w sekcji <head> + + + + + + + + 0,00% I - B <style></style> w sekcji <body> + + + + + + + + 0,00% II link element

II - A <link></link> w sekcji <head> + + + + + + + + 0,00% II - B <link></link> w sekcji <body> + + + + + + + + 0,00% III selektory III - A e + + + + + + + + 0,00%

III - B * + + + + + + + + 0,00% III - C e > f - + + + + + + + 7,95% III - D e:link + + + + + + + + 0,00%

III - E e:active + + + + + + + + 0,00% III - F e:hover + + + + + + + + 0,00% III - G e:focus - - + + + + + + 23,71% III - H e+f - - - + + + + + 32,59%

III - I e[foo] - - - + + + + + 32,59% III - J e.className + + + + + + + + 0,00% III - K e#id - - + + + + + + 23,71% III - L e:first-line + + + + + + + + 0,00%

III - M e:first-letter + + + + + + + + 0,00% 1 właściwości tła 1A background-color + + + + + + + + 0,00%

1B background-image + + + + + + + + 0,00% 1C background-repeat + + + + + + + + 0,00% 1D background-position + + + + + + + + 0,00% 2 właściwości obramowania

2A border + + + + + + + + 0,00% 2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - - + + + + + + 23,71%

2E border-style + + + + + + + + 0,00%

29


2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image + + + + + + + + 0,00% 3B list-style-position + + + + + - + + 3,88%

3C list-style-type + + + + + + + + 0,00% 4 czcionki 4A font-family + + + + + + + + 0,00%


5 marginesy i wcięcia 5A margin + + + + + + + + 0,00% 5B padding + + + + + + + + 0,00% 6 własciwości tekstu

6A color + + + + + + + + 0,00% 6B direction + + + + + + + + 0,00% 6C letter-spacing + + + + + + + + 0,00%

6D line-height + + + + + + + + 0,00% 6E text-align + + + + + + + + 0,00% 6F text-decoration + + + + + + + + 0,00% 6G text-indent + + + + + + + + 0,00%

6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space -/+ -/+ + -/+ + + + + 0,00%


7D clip + + + + + + + + 0,00% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left + + + + + + + + 0,00%

7H position + + + + + + + + 0,00% 7I right + + + + + + + + 0,00% 7J top + + + + + + + + 0,00%

7K vertical-align + + + + + + + + 0,00% 7L z-index + + + + + + + + 0,00% 8 rozmiar

30


8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - - + + + + + 24,64% 8D min-width - - - - + + + + 34,44%

9 inne właściwości 9A cursor + + + + + + + + 0,00% 9B empty-cells + + + + + + + + 0,00%


Ocena wsparcia CSS



31


Gmail

KOD



I style element

I - A <style></style> w sekcji <head> - - - - - - - - 91,86% I - B <style></style> w sekcji <body> - - - - - - - - 91,86% II link element

II - A <link></link> w sekcji <head> - - - - - - - - 91,86% II - B <link></link> w sekcji <body> - - - - - - - - 91,86% III selektory III - A e - - - - - - - - 91,86%

III - B * - - - - - - - - 91,86% III - C e > f - - - - - - - - 91,86% III - D e:link - - - - - - - - 91,86%

III - E e:active - - - - - - - - 91,86% III - F e:hover - - - - - - - - 91,86% III - G e:focus - - - - - - - - 91,86% III - H e+f - - - - - - - - 91,86%

III - I e[foo] - - - - - - - - 91,86% III - J e.className - - - - - - - - 91,86% III - K e#id - - - - - - - - 91,86% III - L e:first-line - - - - - - - - 91,86%

III - M e:first-letter - - - - - - - - 91,86% 1 właściwości tła 1A background-color + + + + + + + + 0,00%

1B background-image - - - - - - - - 91,86% 1C background-repeat - - - - - - - - 91,86% 1D background-position - - - - - - - - 91,86% 2 właściwości obramowania

2A border + + + + + + + + 0,00% 2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - - - + + + + + 32,59%

2E border-style + + + + + + + + 0,00%

32


2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image - - - - - - - - 91,86% 3B list-style-position + + + + + - + + 3,88%






6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space -/+ -/+ + -/+ + + - + 0,37%

7 pozycjonowanie 7A bottom - - - - - - - - 91,86% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%

7D clip - - - - - - - - 91,86% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left - - - - - - - - 91,86%

7H position - - - - - - - - 91,86% 7I right - - - - - - - - 91,86% 7J top - - - - - - - - 91,86%

7K vertical-align + + + + + + + + 0,00% 7L z-index - - - - - - - - 91,86% 8 rozmiar

33


8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - + + + + + + 15,76% 8D min-width - - + - + + + + 25,56%

9 inne właściwości 9A cursor - - - - - - - - 91,86% 9B empty-cells + + + + + + + + 0,00%

9C opacity - - - - - - - - 91,86% 9D overflow + + + + + + + + 0,00% 9E table-layout + + + + + + + + 0,00% 9F visibil ity - - - - - - - - 91,86%

Ocena wsparcia CSS



34


Gazeta.pl

KOD



I style element









2E border-style + + + + + + + + 0,00%

35













36





Ocena wsparcia CSS



37


Viva-polska.tv

KOD



I style element









2E border-style + + + + + + + + 0,00%

38













39





Ocena wsparcia CSS



40


Poczta.pl

KOD



I style element





III - I e[foo] - - - + + + + + 32,59% III - J e.className + + + + + + + + 0,00% III - K e#id + + + + + + + + 0,00% III - L e:first-line + + + + + + + + 0,00%




2E border-style + + + + + + + + 0,00%

41








6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space - - - - - - - - 91,86%





42


8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - - + + + + + 24,64% 8D min-width - - - + + + + + 32,59%



Ocena wsparcia CSS



43


Nazwa.pl

KOD



I style element


II - A <link></link> w sekcji <head> - - - - - - - - 91,86% II - B <link></link> w sekcji <body> - - - - - - - - 91,86% III selektory III - A e + + + + + + + + 0,00%



III - I e[foo] - - + + + + + + 23,71% III - J e.className + + + + + + + + 0,00% III - K e#id + + + + + + + + 0,00% III - L e:first-line + + + + + + + + 0,00%




2E border-style + + + + + + + + 0,00%

44








6H text-transform + + + + + + + + 0,00% 6I word-spacing + + + + + + + + 0,00% 6J white-space + + + + + + + + 0,00%

7 pozycjonowanie 7A bottom - - + + + + + + 23,71% 7B caption-side + + + + + + + + 0,00% 7C clear + + + + + + + + 0,00%

7D clip - - - - - - - - 91,86% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left - - + + + + + + 23,71%

7H position - - + + + + + + 23,71% 7I right - - + + + + + + 23,71% 7J top - - + + + + + + 23,71%


45





Ocena wsparcia CSS



46


Hotmail.com

KOD



I style element



III - B * + + + + + + + + 0,00% III - C e > f - - - - - - - - 91,86% III - D e:link + + + + + + + - 3,33%

III - E e:active + + + + + + + - 3,33% III - F e:hover + + + + + + + - 3,33% III - G e:focus - - - - - - - - 91,86% III - H e+f - - - - - - - - 91,86%

III - I e[foo] - - - - - - - - 91,86% III - J e.className + + + + + + + + 0,00% III - K e#id - - - - - - - - 91,86% III - L e:first-line + + + + + + + + 0,00%



2A border + + + + + + + + 0,00% 2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - - - + + - - - 40,17%

2E border-style + + + + + + + + 0,00%

47













48


8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - - + + + + + 24,64% 8D min-width - - - - - - - - 91,86%


9C opacity - - - - - - - - 91,86% 9D overflow + + + + + + + + 0,00% 9E table-layout + + + + + + + + 0,00% 9F visibil ity + + + + + + + + 0,00%

Ocena wsparcia CSS



49


Duno.pl

KOD



I style element








2A border + + + + + + + + 0,00% 2B border-[position]-color + + + + + + + + 0,00% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing - + + + + + + + 7,95%

2E border-style + + + + + + + + 0,00%

50










7D clip - - - - - - - - 91,86% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left + + + + + + + + 0,00%



51




9C opacity - - - + + + + + 32,59% 9D overflow - - - - - - - - 91,86% 9E table-layout + + + + + + + + 0,00% 9F visibil ity + + + + + + + + 0,00%

Ocena wsparcia CSS



52


Gery.pl

KOD



I style element





III - I e[foo] + + + + + + + + 0,00% III - J e.className + + + + + + + + 0,00% III - K e#id + + + + + + + + 0,00% III - L e:first-line + + + + + + + + 0,00%




2E border-style + + + + + + + + 0,00%

53










7D clip - - + + + + + + 23,71% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left + + + + + + + + 0,00%



54





Ocena wsparcia CSS



55


Yahoo.com

KOD



I style element




III - E e:active + + + + + + + + 0,00% III - F e:hover + + + + + + + + 0,00% III - G e:focus - - + + + + + + 23,71% III - H e+f - - - - - - - - 91,86%





2E border-style + + + + + + + + 0,00%

56













57


8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - + + + + + + 15,76% 8D min-width - - - + + + + + 32,59%



Ocena wsparcia CSS



58


Prokonto.pl

KOD



I style element









2E border-style + + + + + + + + 0,00%

59













60


8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height -/+ - + + + + + + 15,76% 8D min-width - - - - + + + + 34,44%



Ocena wsparcia CSS



61


O2.pl

KOD



I style element









2E border-style + + + + + + + + 0,00%

62













63





Ocena wsparcia CSS



64


Pino.pl

KOD



I style element

I - A <style></style> w sekcji <head> - - - + + + + + 32,59% I - B <style></style> w sekcji <body> - - - + + + + + 32,59% II link element

II - A <link></link> w sekcji <head> - - - + + + + + 32,59% II - B <link></link> w sekcji <body> - - - + + + + + 32,59% III selektory III - A e - - - + + + + + 32,59%

III - B * - - - + + + + + 32,59% III - C e > f - + + + + + + + 7,95% III - D e:link - - - + + + + + 32,59%

III - E e:active - - - + + + + + 32,59% III - F e:hover - - - + + + + + 32,59% III - G e:focus - - + + + + + + 23,71% III - H e+f - - - + + + + + 32,59%

III - I e[foo] - - - + + + + + 32,59% III - J e.className - - - + + + + + 32,59% III - K e#id - - - + + + + + 32,59% III - L e:first-line - - - + + + + + 32,59%

III - M e:first-letter - - - + + + + + 32,59% 1 właściwości tła 1A background-color + + + + + + + + 0,00%



2E border-style + + + + + + + + 0,00%

65


2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image + + + + + + + + 0,00% 3B list-style-position + + + + + - - + 4,25%








7D clip + + + + + - - - 7,58% 7E display + + + + + + + + 0,00% 7F float + + + + + + + + 0,00% 7G left + + + + + + + + 0,00%


7K vertical-align + + + + + + + + 0,00% 7L z-index + + + + + - - - 7,58% 8 rozmiar

66




9C opacity + + + + + + + + 0,00% 9D overflow + + + + + + + + 0,00% 9E table-layout + + + + + + + + 0,00% 9F visibil ity + + + + + + + + 0,00%

Ocena wsparcia CSS



67


AOL

KOD



I style element



III - B * + + + + + + + + 0,00% III - C e > f - - - - - - - - 91,86% III - D e:link + + + + + + + + 0,00%


III - I e[foo] + + + + + + + + 0,00% III - J e.className + + + + + + + + 0,00% III - K e#id + + + + + + + + 0,00% III - L e:first-line + + + + + + + + 0,00%




2E border-style + + + + + + + + 0,00%

68


2F border-width + + + + + + + + 0,00% 3 listy 3A list-style-image + + + + + + + + 0,00% 3B list-style-position + + + + + + + + 0,00%











69





Ocena wsparcia CSS



70


Home.pl

KOD



I style element









2E border-style + + + + + + + + 0,00%

71













72





Ocena wsparcia CSS



73


Interia.pl

KOD



I style element



III - B * + + + + + + + + 0,00% III - C e > f - - - - - - - - 91,86% III - D e:link + + + + + + + + 0,00%

III - E e:active + + + + + + + + 0,00% III - F e:hover + + + + + + + + 0,00% III - G e:focus - - - - - - - - 91,86% III - H e+f - - - - - - - - 91,86%




2A border + + + + + + + + 0,00% 2B border-[position]-color - - - - - - - - 91,86% 2C border-collapse + + + + + + + + 0,00% 2D border-spacing + + + + + + + + 0,00%

2E border-style + + + + + + + + 0,00%

74






6A color + + + + + + + + 0,00% 6B direction - - - - - - - - 91,86% 6C letter-spacing + + + + + + + + 0,00%







75


8A height + + + + + + + + 0,00% 8B width + + + + + + + + 0,00% 8C min-height - - - - - - - - 91,86% 8D min-width - - - - - - - - 91,86%


9C opacity - - - - - - - - 91,86% 9D overflow - - - - - - - - 91,86% 9E table-layout + + + + + + + + 0,00% 9F visibil ity - - - - - - - - 91,86%

Ocena wsparcia CSS



Technologia CSS w aplikacjach...

Documents

Transcript of Technologia CSS w aplikacjach...