Užitečné zdroje a nástroje pro tvorbu HTML e-mailů
Tomáš Hejč
www.superkoderi.cz
#frontendisti, 26. 3. 2014
Osnova
• Zdroje informací a inspirace• Inline stylery• Frameworky• Testování e-mailů
Zdroje informací a inspirace
Campaign monitorhttp://www.campaignmonitor.com/css/
Campaign monitorhttp://www.campaignmonitor.com/guides/
Campaign monitorhttps://templates.campaignmonitor.com/
http://mailchimp.com/
MailChimphttp://templates.mailchimp.com/
• Informace pro developery i designéry, marketéry apod.
• https://github.com/mailchimp/email-blueprints
http://themeforest.net/category/marketing/email-templates
Litmus
• statistiky – infografiky• případové studie, tipy (př. jak vylepšit CTA)• newsletter
Zdroj: https://litmus.com/blog/have-webmail-users-gone-mobile/webmail-email-market-share-infographic
Inline stylery ONLINE
http://inlinestyler.torchboxapps.com/styler/convert/
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)
MailChimphttp://beaker.mailchimp.com/inline-css
+• Funguje správně
-• Nelze konfigurovat
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
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
Inline styleryscripty
Premailer APIhttp://premailer.dialect.ca/api
• API můžete volat odkukoliv – existuje knihovna pro PHP
• Je v ruby
Emogrifier https://github.com/jjriv/emogrifier
• PHP knihovna• rychlost• spolehlivost
Grunthttps://www.npmjs.org/package/grunt-juice-email
• Konfigurovatelnost• Rychlost• Spolehlivost
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
Frameworky
Boilerplates
• http://htmlemailboilerplate.com/• http://www.emailology.org/
• Normalize• Specifické třídy (yahoo, externalclass apod.)
ZURB INKhttp://zurb.com/ink/
• Připravená „tlačítka“
• hide-for-small, show-for-desktop ...
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)
Děkuji za pozornost
Tomáš Hejč
www.superkoderi.cz
#frontendisti, 26. 3. 2014