Základní vysvětlení jak stavět HTML e-maily. Best practice HTML mailů. Čemu se vyhnout při kódování. CSS3 v e-mailech. Pár tipů a triků pro lepší newslettery a nakonec i nějaké odkazy na zajímavé servery zabývající se e-mailovými šablonami.

1. kódování html e-mailů a
kódování html e-mailů akódování html e-mailů a
newsletterů
newsletterůnewsletterů
sk. Tomáš Krejčísk. Tomáš Krejčí
www.superkoderi.czwww.superkoderi.cz || @tomkrej@tomkrej

2. o čem to bude?
o čem to bude?o čem to bude?
Základní pravidla pro kódováníZákladní pravidla pro kódování••
Best practiceBest practice••
Co nikdy nedělat?Co nikdy nedělat?••
CSS3CSS3••
Tipy a trikyTipy a triky••
TestováníTestování••

3. základní pravidla pro
základní pravidla prozákladní pravidla pro
kódování
kódováníkódování

4. html
htmlhtml
Co používat a nepoužívat za elementy?Co používat a nepoužívat za elementy?••
Jak postavit layoutJak postavit layout••
Obalující tabulkaObalující tabulka••
Vnitřní tabulkaVnitřní tabulka••
Tabulka pro tmavé pozadíTabulka pro tmavé pozadí••

5. css
csscss
Jak vkládat CSS?Jak vkládat CSS?••
linkování externích stylůlinkování externích stylů••
styly v hlavičcestyly v hlavičce••
styly na jednotlivých elementechstyly na jednotlivých elementech
((http://inlinestyler.torchboxapps.com/http://inlinestyler.torchboxapps.com/))
••
Seznam podporovaných vlastnostíSeznam podporovaných vlastností
http://www.campaignmonitor.com/css/http://www.campaignmonitor.com/css/
••

6. obrázky
obrázkyobrázky
pozor na velikostpozor na velikost••
embed (102kb)embed (102kb)••
vyhnout se PNG - pokud optimalizujete pro Lotus Notesvyhnout se PNG - pokud optimalizujete pro Lotus Notes••

7. best practice
best practicebest practice
Co je dobré nastavovat na jednotlivých elementechCo je dobré nastavovat na jednotlivých elementech

8. <table>
<table><table>
table width 100% border 0 cellpadding 0 cellspacing 0
style margin:0; padding:0; font-size:13px; font-family:Arial, Helvetica, sans-serif; width:100%; background:#05aff0;
atributy
atributyatributy
widthwidth••
borderborder••
cellpaddingcellpadding••
cellspacingcellspacing••
css
csscss
vyresetovat paddingvyresetovat padding••
vyresetovat marginvyresetovat margin••
font-sizefont-size••
font-familyfont-family••
widthwidth••
colorcolor••

9. <img />
<img /><img />
img src ./img/logo-superkoderi.png alt SuperKodéři width 154 height 62 style vertical-align:middle; border:none;
atributy
atributyatributy
widthwidth••
heightheight••
altalt••
css
csscss
vertical-align nebo display:block;vertical-align nebo display:block;••
borderborder••

10. <p>
<p><p>
p style line-height:20px; margin:0 0 15px; Lorem ipsum dolor sit amet, consectetur adipisicing elit. p
line-heightline-height••
marginmargin••

11. nadpisy
nadpisynadpisy
h1 style font-size:30px; line-height:36px; margin:0 0 20px; Nadpis h1
font-sizefont-size••
line-heightline-height••
marginmargin••

12. co nikdy nedělat?
co nikdy nedělat?co nikdy nedělat?

13. <table>
<table><table>
marginmargin••

14. <td>
<td><td>
různé paddingyrůzné paddingy••
ruzné velikosti borderůruzné velikosti borderů••
height menší než výška textu/line-heightheight menší než výška textu/line-height••

15. obecně
obecněobecně
floatyfloaty••
speciální fontyspeciální fonty••
absolutní poziceabsolutní pozice••
záporné marginyzáporné marginy••
nepřetypovávat inlinové elementy na blokové a naopaknepřetypovávat inlinové elementy na blokové a naopak••
nezapisovat písmo zkráceným zápisem font:nezapisovat písmo zkráceným zápisem font:••
nezkracovat ani #000nezkracovat ani #000••
nepoužívat javascript, video a flashnepoužívat javascript, video a flash••

16. css3
css3css3

17. kdy a jak použít?
kdy a jak použít?kdy a jak použít?

18. co použít
co použítco použít
border-radiusborder-radius••
box-shadowbox-shadow••
text-shadowtext-shadow••
font-facefont-face••

19. tipy a triky
tipy a trikytipy a triky

20. jak na hover na odkazech
jak na hover na odkazechjak na hover na odkazech
head
style
a:hover
color red !important
style
head

21. embed obrázků - base64
embed obrázků - base64embed obrázků - base64
img src data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAABYCAYAAACee5lPAAAgAElEQVR4nO29B5hd1XnvfXyTL8V
Jeden z mnoha konvertorůJeden z mnoha konvertorů
(http://webcodertools.com/imagetobase64converter)(http://webcodertools.com/imagetobase64converter)
PNGHatPNGHat

22. zvětšený font-size na
zvětšený font-size nazvětšený font-size na
iphonech
iphonechiphonech
-webkit-text-size-adjust none

23. jak udělat obrázek na
jak udělat obrázek najak udělat obrázek na
pozadí v outlooku
pozadí v outlookupozadí v outlooku
http://backgrounds.cm/http://backgrounds.cm/
td background http://i.imgur.com/XCnBXwP.pnghttp://i.imgur.com/XCnBXwP.png bgcolor #7bceeb width 120 height 92 valign top
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
<v:fill type="tile" src="http://i.imgur.com/XCnBXwP.pnghttp://i.imgur.com/XCnBXwP.png" color="#7bceeb" />
<v:textbox inset="0,0,0,0">
<![endif]-->
...
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
td

24. nedělejte tlačítka pomocí
nedělejte tlačítka pomocínedělejte tlačítka pomocí
css
csscss
i když?i když? http://buttons.cm/http://buttons.cm/

25. testování
testovánítestování

26. jak testuji
jak testujijak testuji

27. pro jaké e-mailové klienty
pro jaké e-mailové klientypro jaké e-mailové klienty
testuji
testujitestuji
webmaily
webmailywebmaily
GmailGmail••
SeznamSeznam•• e-mailový
e-mailovýe-mailový
klienti
klientiklienti
Outlook 2003Outlook 2003
(Express/Mail)(Express/Mail)
••
Outlook 2010Outlook 2010
(2013/2007)(2013/2007)
••
ThunderbirdThunderbird••
Apple mailApple mail••
responsivní
responsivníresponsivní
e-maily
e-mailye-maily
iPhoneiPhone•• automaticky
automatickyautomaticky
LitmusLitmus••

28. pár učitečných odkazů na
pár učitečných odkazů napár učitečných odkazů na
závěr
závěrzávěr
templates.mailchimp.comtemplates.mailchimp.com••
campaignmonitor.com/resourcescampaignmonitor.com/resources••
litmus.com/learninglitmus.com/learning••

29. děkuji za pozornost
děkuji za pozornostděkuji za pozornost
@tomkrej@tomkrej
www.superkoderi.czwww.superkoderi.cz
tomas.krejci@superkoderi.cztomas.krejci@superkoderi.cz
Využit framework pro prezentaceVyužit framework pro prezentace FlowTimeFlowTime