Kódování HTML e-mailů a newsletterů

1,889 views

Published on

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.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,889
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Kódování HTML e-mailů a newsletterů

  1. 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. 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. 3. základní pravidla pro základní pravidla prozákladní pravidla pro kódování kódováníkódování
  4. 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. 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. 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. 7. best practice best practicebest practice Co je dobré nastavovat na jednotlivých elementechCo je dobré nastavovat na jednotlivých elementech
  8. 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. 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. 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. 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. 12. co nikdy nedělat? co nikdy nedělat?co nikdy nedělat?
  13. 13. <table> <table><table> marginmargin••
  14. 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. 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. 16. css3 css3css3
  17. 17. kdy a jak použít? kdy a jak použít?kdy a jak použít?
  18. 18. co použít co použítco použít border-radiusborder-radius•• box-shadowbox-shadow•• text-shadowtext-shadow•• font-facefont-face••
  19. 19. tipy a triky tipy a trikytipy a triky
  20. 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. 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. 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. 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. 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. 25. testování testovánítestování
  26. 26. jak testuji jak testujijak testuji
  27. 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. 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. 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

×