A presentation at WordCamp Irun 2019 in in Spain by Jano Garcia
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>
<h1>…<h6> <document_head> <wrapper> <p> <document_body> <grid_row> <list>, <list_item> <grid_column> <table>, <tr>, <td> <content> <img> <spacer> <img_bg>, <img_grid> <button> <a>, <b>, <i>, <s>, <q>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
Técnicas de diseño y desarrollo para mejorar tu estrategia de email.
Un repaso a los principios y técnicas empleadas durante la reestructuración del sistema de emails de Todoist y Twist. Lecciones aprendidas, prácticas recomendadas y recursos de referencia.
Presentado en WordCamp Irun, Junio 2019.
for free. You
can too.