Email — Conquistando el Inbox

Email Conquistando el Inbox itter.com/janogarcia @janogarcia · janogarcia.com https://janogarcia.com

Alejandro García https://twitter.com/janogarcia @janogarcia · janogarcia.com https://janogarcia.com Diseñador UX/UI — Desarrollador Front-end Ingeniero Técnico en Electrónica. 10+ años experiencia. Remoto Estudio. Freelance. 4 últimos años full-time en producto, Todoist y Twist. WordPress y PHP Diseño e implementación front-end y back-end, de sitios y aplicaciones para clientes, agencias (grandes marcas Coca-Cola, Philips) y startups.

01 Contexto

01 Contexto Por qué email

Importante …y difícil Photo by Iswanto Arif on Unsplash

“Email has the highest ROI of any marketing channel available” — Campaign Monitor The Complete Email Marketing Guide for Beginners — Campaign Monitor https://www.campaignmonitor.com/resources/guides/getting-started-with-email-marketing/

“You don’t have to fight an algorithm to reach your audience” — Casey Newton The New Social Network That Isn’t New at All — The New York Times https://www.nytimes.com/2019/03/19/technology/new-social-network-email-newsletter.html

Branding y UX Un importante punto de contacto e interacción con tu servicio Marketing y ROI El canal de marketing con mayor retorno de inversión, superior a 42:1 Ubicuidad y resiliencia 3x más cuentas que Facebook y Twitter juntos, 6x más probable conseguir click en enlace que en Twitter… en la plataforma en red más antigua. g/infographic-the-roi-of-email-marketing The ROI of Email Marketing (Litmus) — The https://www.campaignmonitor.com/resources/guides/getting-started-with-em Complete Email Marketing Guide for Beginners (Campaign Monitor)

01 Contexto Objetivo

Diseño Desarrollo Fuera de alcance: estrategia, marketing, analítica, optimización, legal, back-end, ESPs/deliverability…

20+ 100+ 15+ millones de envíos/mes transaccionales mil suscriptores en newsletter WordPress Envíos combinados de email para los productos Todoist y Twist (2018) idiomas, incluído RTL y CJK

02 Diseño

02 Diseño Principios

11S “Email attention spans are short— about 11 seconds” Top Email Design Trends for 2019 — Litmus https://litmus.com/blog/top-email-design-trends

Simplificar Photo by Paul Green on Unsplash

Designing with constraint: Twitter’s approach to email — Twitter https://blog.twitter.com/en_us/a/2015/designing-with-constraint-twitters-approach-to-email.html Simplicidad “Keep it light, keep it concise” Contexto “Meet a person where they are” Objetivo “Help a person do something”

Rediseño notificación email de Tweet favorito — Twitter (2015)

Email Design Guide https://mailchimp.com/email-design-guide/ mailchimp.com

Influencia del objetivo Transaccional (notificar y actuar) Automatizado (crecer y recurrir) Promocional (persuadir y convertir)

Mensaje diseñado (HTML) Influencia del estilo — Promocional con tono personal Mensaje personal (HTML) Texto plano

Testea Photo by Luke Chesser on Unsplash

02 Diseño Sistemas

Escalabilidad “capacidad de un sistema de crecer en magnitud” Photo by takaharu SAWA on Unsplash

Entropía “medida del orden de un sistema” Photo by Yung Chang on Unsplash

Design Systems for Email: Bringing Order to the Chaos http://www.tedgoas.com/blog/email-design-systems tedgoas.com

Ejemplos de sistema de diseño Email Design at Stack Overflow https://stackoverflow.design/email/guidelines/getting-started stackoverflow.design HTML Email https://htmlemail.io/ htmlemail.io — fuente Sketch/Figma gratis, plantillas HTML premium Tabler Email https://tabler.io/emails/ tabler.io — plantillas HTML premium

02 Diseño Inspiración

Really Good Emails https://reallygoodemails.com/ reallygoodemails.com

03 Desarrollo

02 Desarrollo Retos

Email ≠ Web Photo by Maik Jonietz on Unsplash

15.000 “Every email that marketers send has approximately 15.000 potential renderings” Why is email rendering so complex? — Litmus https://litmus.com/blog/why-is-email-rendering-so-complex

43% “of all emails were opened on mobile devices” State of Email 2019 Report — Litmus https://litmus.com/ebooks/state-of-email-2019

15% 30% 80% clicks únicos clicks en primer enlace Responsive Email 101 Webinar — Litmus (2015) https://litmus.com/lp/responsive-email-101-webinar borrados si no están optimizados

Email Client Market Share https://emailclientmarketshare.com/ emailclientmarketshare.com

Fragmentación Photo by Paul Felberbauer on Unsplash

Fragmentación Renderizado Múltiples dispositivos y clientes Diseño Diferentes ramas de diseño sin conexión Código Ausencia de una base de código común

Consolidación Photo by Sven Mieke on Unsplash

Consolidación Renderizado Sólo permitir patrones HTML/CSS responsive altamente testeados Diseño Normalización de componentes y layouts, en base a patrones permitidos Código Base de código común, para un comportamiento consistente y predecible

02 Desarrollo Modularidad

Consolidación del código Whitelist de patrones Identificación y testeo de patrones HTML/CSS. Mínimos posibles. Librería de componentes base Encapsulación de patrones para simplificar su interfaz. Mínimos estilos. Temas y composiciones Creación de temas, añadiendo estilos a los componentes base. Creación de componentes complejos, combinando componentes base.

Jerarquía de componentes de Bento Email — Usados por Todoist y Twist Base Theme 1 Template 1-1 Unstyled framework components: Document, Layout, Content Styled: Layouts, Components Template 1-2 Theme 2 Template 2-1 Styled: Layouts, Components Template 2-2 + Local components

Componentes base de Bento Email — Usados por Todoist y Twist Document Layout Content <document_html> <preheader>

Ejemplo de componente — Spacer Base Theme Template

Editores de email vía código https://mjml.io/ MJML mjml.io https://heml.io/ HEML heml.io Foundation for Emails https://foundation.zurb.com/emails.html foundation.zurb.com

MJML — Previsualización

MJML — Código generado

Editores visuales de email Taxi for Email https://taxiforemail.com/ taxiforemail.com — Soporta código HTML de autor https://beefree.io/ Beefree befree.io https://topol.io/ Topol topol.io

“A wysiwyg to make the day to day email, that then frees up dev resources to provide better value” — Elliot Ross (Taxi for Email) https://litmus.com/community/discussions/6064-benefits-of-using-html-css-templates-over-drag-dropBenefits of Using HTML/CSS Templates Over Drag & Drop Editors — Litmus Community editors#comment-10114

02 Desarrollo Directrices

Referencia The Better Email on Design https://thebetter.email/design thebetter.email The Ultimate Guide to CSS https://www.campaignmonitor.com/css/ campaignmonitor.com How to Target Email Clients https://howtotarget.email/ howtotarget.email Plantillas, Frameworks y Sistemas Librerías open source (Cerberus) o sistemas (stackoverflow.design)

Optimización para móvil Modelo “scalable” o “mobile-aware” Contenedor fijo, con diseño simplificado del layout y los elementos. Modelo “fluid” Contenedor fluído 100%, sin restricciones ni transformaciones del layout. Modelo “responsive” Contenedor y elementos responsive. Alternativas: Desktop-first with @media queries, Hybrid Coding approach, Table of Your Dreams, Fab Four technique, Mobile-first with calc()…

Plantillas y frameworks https://tedgoas.github.io/Cerberus/ Cerberus github.com/TedGoas Zurb Foundation for Emails https://foundation.zurb.com/emails.html foundation.zurb.com

Recursos https://github.com/jonathandion/awesome-emails/ awesome-emails github.com/jonathandion/awesome-emails Email Marketing Resources https://thebetter.email/resources thebetter.email/resources Really Good Emails Resources https://reallygoodemails.com/resources/ reallygoodemails.com/resources

Email Coding Guidelines — 2015–2016 (Obsoleto)

State of Email Survey Research Series https://litmus.com/stateofemail litmus.com

02 Desarrollo Testing

Canary template Photo by Olena Shmahalo on Unsplash

Canary template

Email on Acid https://www.emailonacid.com/ emailonacid.com

https://litmus.com/ Litmus litmus.com

https://www.campaignmonitor.com/resources/guides/getting-startedhttps://putsmail.com/ Putsmail putsmail.com

Gracias er.com/janogarcia @janogarcia · janogarcia.com https://janogarcia.com