Kodowanie mailingu
- najlepsze praktyki
Jeden szablon wyświetlający się bezbłędnie każdemu z odbiorców - czy to możliwe? Oczywiście, a my ułatwiamy osiągnięcie tego celu. Zajrzyj do raportu przygotowanego przez ekspertów FreshMaila w którym omówionych zostało 40 najczęściej wykorzystywanych programów pocztowych. 75 stron solidnej i przystępnej wiedzy do Twojej dyspozycji.
W raporcie znajdziesz
- Wyniki badań
- Praktyczne porady dla projektantów mailingów i developerów
- Kod przykładowego mailingu
- Przepis na idealny mailing
- Przydatne linki
Pobierz pełny raport za darmo
Pobierz RaportTabela zbiorcza wyników badań
Zapoznaj się z analizą właściwości CSS dla 16 najbardziej popularnych aplikacji pocztowych. Jeśli chcesz dowiedzieć się wiecej, pobierz pełny raport..
| Właściwości CSS / klienty | Apple Mail | Outlook '03 | Outlook '07 / '10 / '13 | Outlook 2011 | Opera Mail | Thunderbird | Windows Live Mail 2012 | Gmail.com | Interia.pl | O2.pl | Office 365 | Outlook.com | Onet.pl | Yahoo! Mail | Wp.pl |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| preheader | Tak | Nie | Tak | Nie | Nie | Nie | Nie | Tak | Nie | Nie | Tak | Nie | Tak | Tak | Nie |
| Tło (kolor i obrazki): background - body | |||||||||||||||
| background-image | Tak | NieTak | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Tak |
| background-repeat | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Tak |
| background-position | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Nie | Nie | Nie | Nie | Tak |
| background-size (px) | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Nie | Nie | Nie | Tak |
| background-size (%) | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Nie | Nie | Nie | Tak |
| background-size: cover (mniejszy bok) | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Nie | Nie | Nie | Tak |
| background-size: contain (dłuższy bok) | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Nie | Nie | Nie | Tak |
| Tło (kolor i obrazki): background - table | |||||||||||||||
| background-color | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| background-image | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| background-repeat | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Nie | Nie | Tak | Tak | Tak |
| background-position | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Nie | Tak | Tak | Tak | Tak |
| background-size (px) | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Tak | Tak | Nie | Tak |
| background-size (%) | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Tak | Tak | Nie | Tak |
| background-size: cover (mniejszy bok) | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Tak | Tak | Nie | Tak |
| background-size: contain (dłuższy bok) | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Tak | Tak | Nie | Tak |
| Tło (kolor i obrazki): background - td | |||||||||||||||
| background-color | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| background-image | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| background-repeat | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak | Tak |
| background-position | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Nie | Tak | Tak | Tak | Tak |
| background-size (px) | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Tak | Tak | Nie | Tak |
| background-size (%) | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Tak | Tak | Nie | Tak |
| background-size: cover (mniejszy bok) | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Tak | Tak | Nie | Tak |
| background-size: contain (dłuższy bok) | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Tak | Tak | Nie | Tak |
| display: block | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| display: inline | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| display: inline-block | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| display: none | Tak | Tak | Tak (txt) | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Nie | Tak | Tak | Tak | Tak |
| style element | |||||||||||||||
| <style></style> element w sekcji <head> | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Tak |
| <style></style> element w sekcji <body> | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| link element | |||||||||||||||
| <style></style> element w sekcji <head> | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Nie | Nie | Nie | Tak |
| <style></style> element w sekcji <body> | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Nie | Nie | Nie | Tak |
| niestandardowe fonty | |||||||||||||||
| czcionka zewnętrzna -> link | Tak | Nie | Nie | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Nie | Nie | Tak | Nie | Tak |
| czcionka zewnętrzna -> @import w head | Tak | Nie | Nie | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Nie | Nie | Nie | Nie | Tak |
| czcionka zewnętrzna -> @import w body | Tak | Nie | Nie | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Nie | Nie | Nie | Nie | Tak |
| @Font-Face | Tak | Nie | Nie | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Nie | Nie | Tak | Nie | Tak |
| selektory | |||||||||||||||
| e | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| * | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Nie | Nie | Nie |
| e > f | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak |
| e:link | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Nie | Tak | Tak | Tak | Tak |
| e:active | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Nie | Nie | Tak | Tak | Tak |
| e:hover | Nie | Tak | Nie | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Nie | Tak | Tak | Tak | Tak |
| e:focus | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Tak | Nie | Nie | Tak | Tak | Tak |
| e+f | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Tak | Nie | Tak |
| e[foo] | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| e.className | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| e#id | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| e:first-line | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Nie | Tak | Tak | Tak | Tak |
| e:first-letter | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Tak | Nie | Tak | Tak | Tak | Tak |
| właściwości obramowania | |||||||||||||||
| border | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| border-color | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak |
| border-collapse | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| border-spacing | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| border-style | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| border-width | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| listy | |||||||||||||||
| list-style-position | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| list-style-type | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| fonty | |||||||||||||||
| font-family | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| font-size | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| font-style | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| font-variant | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| font-weight | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| marginesy i wcięcia | |||||||||||||||
| margin (działa tylko z elementami blokowymi) | Nie | Nie | Nie | Nie | Nie | Nie | Nie | Nie | Nie | Nie | Nie | Nie | Nie | Nie | Nie |
| padding | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| własciwości tekstu | |||||||||||||||
| color | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| direction | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak |
| letter-spacing | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| line-height | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| text-align | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| text-decoration | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| text-indent | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| text-transform (uppercase) | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| word-spacing | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| white-space | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Tak | Tak | Tak | Tak |
| pozycjonowanie | |||||||||||||||
| bottom | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak | Nie | Tak | Nie | Tak |
| clear | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Nie | Tak |
| clip | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Tak | Nie | Nie | Tak | Nie | Tak |
| float | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak |
| left | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Nie | Tak |
| position | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak | Nie | Tak | Nie | Tak |
| right | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak | Nie | Tak | Nie | Tak |
| top | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak | Nie | Tak | Nie | Tak |
| vertical-align | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| z-index | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak | Nie | Tak | Nie | Tak |
| rozmiar | |||||||||||||||
| height | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| width | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| min-height (działa tylko z elementami blokowymi) | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Tak (block) | Nie | Nie | Tak | Tak (block) | Nie | Tak | Tak |
| min-width | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak |
| inne właściwości | |||||||||||||||
| cursor | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Tak | Nie | Tak | Tak | Tak | Tak |
| empty-cells | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| opacity | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Tak | Tak | Nie | Tak |
| outline | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Tak | Nie | Tak | Nie | Nie | Tak | Tak | Tak |
| overflow | Nie | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak |
| box resize | Tak | Nie | Nie | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Nie | Nie | Tak | Nie | Tak |
| visibility | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| Gradienty | |||||||||||||||
| gradient - tło mailingu | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Nie | Nie | Tak |
| gradient - button | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Tak | Nie | Nie | Tak |
| CSS 3 i HTML 5 | |||||||||||||||
| <canvas> | Tak | Nie | Nie | Nie | Nie | Nie | Tak | Nie | Nie | Nie | Nie | Tak | Tak | Nie | Tak |
| border-radius | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Tak | Tak | Nie | Tak |
| box-shadow | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Tak | Nie | Nie | Tak |
| box sizing (border-box;) | Tak | Nie | Nie | Tak | Tak | Nie | Tak | Nie | Nie | Nie | Nie | Tak | Tak | Nie | Tak |
| multiple background Images | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Tak | Nie | Tak | Nie | Nie | Tak | Nie | Tak |
| transition | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Tak | Tak | Nie | Tak |
| multiple Columns | Tak | Tak | Nie | Nie | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Nie | Tak | Nie | Tak |
| <svg> | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Tak | Tak | Nie | Tak |
| text-shadow | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Tak | Nie | Tak | Tak |
| <video> | Nie | Nie | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Nie | Nie | Tak | Nie | Tak |
| animacja | |||||||||||||||
| Animowany gif | Tak | Tak | Nie | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| responsive | |||||||||||||||
| RED | n/d | n/d | n/d | Tak | Tak | n/d | n/d | n/d | n/d | n/d | n/d | n/d | n/d | n/d | n/d |
| Media Queries | n/d | n/d | n/d | Tak | Tak | n/d | n/d | n/d | n/d | n/d | n/d | n/d | n/d | n/d | n/d |
| kolory | |||||||||||||||
| HEX | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| RGB | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak | Tak |
| RGBa | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Tak | Tak | Nie | Tak |
| HSL | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Tak | Nie | Tak |
| HSLa | Tak | Nie | Nie | Tak | Tak | Tak | Tak | Tak | Nie | Nie | Nie | Nie | Tak | Nie | Tak |