1. Užitečné zdroje a nástroje pro
tvorbu HTML e-mailů
Tomáš Hejč
@taccz
tomas.hejc@superkoderi.cz
www.superkoderi.cz
#frontendisti, 26. 3. 2014

2. Osnova
• Zdroje informací a inspirace
• Inline stylery
• Frameworky
• Testování e-mailů

3. Zdroje informací
a inspirace

4. http://www.campaignmonitor.com/

5. Campaign monitor
http://www.campaignmonitor.com/css/

6. Campaign monitor
http://www.campaignmonitor.com/guides/

7. Campaign monitor
https://templates.campaignmonitor.com/

8. http://mailchimp.com/

9. MailChimp
http://templates.mailchimp.com/
• Informace pro developery i
designéry, marketéry apod.
• https://github.com/mailchimp/email-
blueprints

10. http://themeforest.net/category/marketing/email-templates

11. https://litmus.com/

12. Litmus
• statistiky – infografiky
• případové studie, tipy (př. jak vylepšit CTA)
• newsletter

13. Zdroj: https://litmus.com/blog/have-webmail-users-gone-mobile/webmail-email-market-share-infographic

14. Inline stylery
ONLINE

15. http://inlinestyler.torchboxapps.com/s
tyler/convert/

16. http://inlinestyler.torchboxapps.com/s
tyler/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)

17. MailChimp
http://beaker.mailchimp.com/inline-css
+
• Funguje správně
-
• Nelze konfigurovat

18. 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 

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

20. Inline stylery
scripty

21. Premailer API
http://premailer.dialect.ca/api
• API můžete volat odkukoliv
– existuje knihovna pro PHP
• Je v ruby

22. Emogrifier
https://github.com/jjriv/emogrifier
• PHP knihovna
• rychlost
• spolehlivost

23. Grunt
https://www.npmjs.org/package/grunt-juice-email
• Konfigurovatelnost
• Rychlost
• Spolehlivost

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

25. Frameworky

26. Boilerplates
• http://htmlemailboilerplate.com/
• http://www.emailology.org/
• Normalize
• Specifické třídy (yahoo, externalclass apod.)

27. ZURB INK
http://zurb.com/ink/
• Má připravený „grid“

28. ZURB INK
http://zurb.com/ink/
• Připravená „tlačítka“
• hide-for-small, show-for-desktop ...

29. 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)

30. Děkuji za pozornost
Tomáš Hejč
@taccz
tomas.hejc@superkoderi.cz
www.superkoderi.cz
#frontendisti, 26. 3. 2014