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

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

Tomáš Hejč

@taccztomas.hejc@superkoderi.cz

www.superkoderi.cz

#frontendisti, 26. 3. 2014

Osnova

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

Zdroje informací a inspirace

http://www.campaignmonitor.com/

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

https://litmus.com/

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/

• Má připravený „grid“

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č

@taccztomas.hejc@superkoderi.cz

www.superkoderi.cz

#frontendisti, 26. 3. 2014