![Page 1: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/1.jpg)
Užitečné zdroje a nástroje pro tvorbu HTML e-mailů
Tomáš Hejč
www.superkoderi.cz
#frontendisti, 26. 3. 2014
![Page 2: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/2.jpg)
Osnova
• Zdroje informací a inspirace• Inline stylery• Frameworky• Testování e-mailů
![Page 3: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/3.jpg)
Zdroje informací a inspirace
![Page 5: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/5.jpg)
Campaign monitorhttp://www.campaignmonitor.com/css/
![Page 6: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/6.jpg)
Campaign monitorhttp://www.campaignmonitor.com/guides/
![Page 7: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/7.jpg)
Campaign monitorhttps://templates.campaignmonitor.com/
![Page 8: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/8.jpg)
http://mailchimp.com/
![Page 9: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/9.jpg)
MailChimphttp://templates.mailchimp.com/
• Informace pro developery i designéry, marketéry apod.
• https://github.com/mailchimp/email-blueprints
![Page 10: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/10.jpg)
http://themeforest.net/category/marketing/email-templates
![Page 12: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/12.jpg)
Litmus
• statistiky – infografiky• případové studie, tipy (př. jak vylepšit CTA)• newsletter
![Page 13: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/13.jpg)
Zdroj: https://litmus.com/blog/have-webmail-users-gone-mobile/webmail-email-market-share-infographic
![Page 14: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/14.jpg)
Inline stylery ONLINE
![Page 15: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/15.jpg)
http://inlinestyler.torchboxapps.com/styler/convert/
![Page 16: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/16.jpg)
http://inlinestyler.torchboxapps.com/styler/convert/
+• Zobrazí seznam vlastností a skóre
-• Nelze konfigurovat• Vyhazuje media queries• Dělá chyby (požírá mezery – což může
způsobit problém)
![Page 17: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/17.jpg)
MailChimphttp://beaker.mailchimp.com/inline-css
+• Funguje správně
-• Nelze konfigurovat
![Page 18: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/18.jpg)
Premailer http://premailer.dialect.ca/
+• Konfigurovatelnost• Kromě stylů přidává i atributy• Možnost přidání tracking kódu k odkazům• Generuje plaintext verzi
-• ! Aplikuje i styly z media-queries
![Page 19: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/19.jpg)
ZURB INK inliner http://zurb.com/ink/inliner.php
+• Funguje správně• Možnost přidání tracking kódu k odkazům
-• Nelze konfigurovat
![Page 20: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/20.jpg)
Inline styleryscripty
![Page 21: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/21.jpg)
Premailer APIhttp://premailer.dialect.ca/api
• API můžete volat odkukoliv – existuje knihovna pro PHP
• Je v ruby
![Page 22: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/22.jpg)
Emogrifier https://github.com/jjriv/emogrifier
• PHP knihovna• rychlost• spolehlivost
![Page 23: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/23.jpg)
Grunthttps://www.npmjs.org/package/grunt-juice-email
• Konfigurovatelnost• Rychlost• Spolehlivost
![Page 24: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/24.jpg)
Na co dávat pozor
• „validní“ kód• pokročilejší selektory – * selector, first-child,
last-child ...• pozor na nastavení – pokud necháte
odstraňování <style> odstraní se media-queries
![Page 25: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/25.jpg)
Frameworky
![Page 26: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/26.jpg)
Boilerplates
• http://htmlemailboilerplate.com/• http://www.emailology.org/
• Normalize• Specifické třídy (yahoo, externalclass apod.)
![Page 28: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/28.jpg)
ZURB INKhttp://zurb.com/ink/
• Připravená „tlačítka“
• hide-for-small, show-for-desktop ...
![Page 29: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/29.jpg)
TESTOVÁNÍ
Litmus.com• $79 / měsíc (7 dní trial)• (používá i mailchimp)
Campaignmonitor.com/testing/ • zdarma v Unlimited Planu ($29/měsíc)
![Page 30: Užitečné zdroje a nástroje pro tvorbu HTML e-mailů](https://reader034.vdocuments.pub/reader034/viewer/2022052619/55633067d8b42a5c7b8b4d67/html5/thumbnails/30.jpg)
Děkuji za pozornost
Tomáš Hejč
www.superkoderi.cz
#frontendisti, 26. 3. 2014