Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Užitečné zdroje a nástroje pro tvorbu HTML e-mailů

1,561 views

Published on

Published in: Technology
  • Be the first to comment

Užitečné zdroje a nástroje pro tvorbu HTML e-mailů

  1. 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. 2. Osnova • Zdroje informací a inspirace • Inline stylery • Frameworky • Testování e-mailů
  3. 3. Zdroje informací a inspirace
  4. 4. http://www.campaignmonitor.com/
  5. 5. Campaign monitor http://www.campaignmonitor.com/css/
  6. 6. Campaign monitor http://www.campaignmonitor.com/guides/
  7. 7. Campaign monitor https://templates.campaignmonitor.com/
  8. 8. http://mailchimp.com/
  9. 9. MailChimp http://templates.mailchimp.com/ • Informace pro developery i designéry, marketéry apod. • https://github.com/mailchimp/email- blueprints
  10. 10. http://themeforest.net/category/marketing/email-templates
  11. 11. https://litmus.com/
  12. 12. Litmus • statistiky – infografiky • případové studie, tipy (př. jak vylepšit CTA) • newsletter
  13. 13. Zdroj: https://litmus.com/blog/have-webmail-users-gone-mobile/webmail-email-market-share-infographic
  14. 14. Inline stylery ONLINE
  15. 15. http://inlinestyler.torchboxapps.com/s tyler/convert/
  16. 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. 17. MailChimp http://beaker.mailchimp.com/inline-css + • Funguje správně - • Nelze konfigurovat
  18. 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. 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. 20. Inline stylery scripty
  21. 21. Premailer API http://premailer.dialect.ca/api • API můžete volat odkukoliv – existuje knihovna pro PHP • Je v ruby
  22. 22. Emogrifier https://github.com/jjriv/emogrifier • PHP knihovna • rychlost • spolehlivost
  23. 23. Grunt https://www.npmjs.org/package/grunt-juice-email • Konfigurovatelnost • Rychlost • Spolehlivost
  24. 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. 25. Frameworky
  26. 26. Boilerplates • http://htmlemailboilerplate.com/ • http://www.emailology.org/ • Normalize • Specifické třídy (yahoo, externalclass apod.)
  27. 27. ZURB INK http://zurb.com/ink/ • Má připravený „grid“
  28. 28. ZURB INK http://zurb.com/ink/ • Připravená „tlačítka“ • hide-for-small, show-for-desktop ...
  29. 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. 30. Děkuji za pozornost Tomáš Hejč @taccz tomas.hejc@superkoderi.cz www.superkoderi.cz #frontendisti, 26. 3. 2014

×