Email — Conquistando el Inbox

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.

🎬Vídeo de la presentación en WordPress.tv
https://wordpress.tv/2019/06/02/alejandro-garcia-conquistando-el-inbox-tecnicas-de-diseno-y-desarrollo-para-mejorar-tu-estrategia-de-email/

Transcript

1. @janogarcia · janogarcia.com itter.com/janogarcia https://janogarcia.com Conquistando el Inbox Email
2. Alejandro García @janogarcia · janogarcia.com https://twitter.com/janogarcia https://janogarcia.com Ingeniero Técnico en Electrónica. 10+ años experiencia. Diseñador UX/UI — Desarrollador Front-end Estudio. Freelance. 4 últimos años full-time en producto, Todoist y Twist. Remoto Diseño e implementación front-end y back-end, de sitios y aplicaciones para clientes, agencias (grandes marcas Coca-Cola, Philips) y startups. WordPress y PHP
3. Contexto 01
4. Por qué email 01 Contexto
5. …y difícil Importante Photo by Iswanto Arif on Unsplash
6. — Campaign Monitor “Email has the highest ROI of any marketing channel available” The Complete Email Marketing Guide for Beginners — Campaign Monitor https://www.campaignmonitor.com/resources/guides/getting-started-with-email-marketing/
7. — Casey Newton “You don’t have to fight an algorithm to reach your audience” 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
8. Un importante punto de contacto e interacción con tu servicio Branding y UX El canal de marketing con mayor retorno de inversión, superior a 42:1 Marketing y ROI 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. Ubicuidad y resiliencia The ROI of Email Marketing (Litmus) — The Complete Email Marketing Guide for Beginners (Campaign Monitor) g/infographic-the-roi-of-email-marketing https://www.campaignmonitor.com/resources/guides/getting-started-with-em
9. Objetivo 01 Contexto
10. Diseño Desarrollo Fuera de alcance: estrategia, marketing, analítica, optimización, legal, back-end, ESPs/deliverability…
11. millones de envíos/mes transaccionales 20 + mil suscriptores en newsletter WordPress 100 + idiomas, incluído RTL y CJK 15 + Envíos combinados de email para los productos Todoist y Twist (2018)
12. Diseño 02
13. Principios 02 Diseño
14. “Email attention spans are short— about 11 seconds” 11 S Top Email Design Trends for 2019 — Litmus https://litmus.com/blog/top-email-design-trends
15. Simplificar Photo by Paul Green on Unsplash
16. “Keep it light, keep it concise” Simplicidad “Meet a person where they are” Contexto “Help a person do something” Objetivo 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
17. Rediseño notificación email de Tweet favorito — Twitter (2015)
18. mailchimp.com Email Design Guide https://mailchimp.com/email-design-guide/
19. Automatizado (crecer y recurrir) Transaccional (notificar y actuar) Promocional (persuadir y convertir) Influencia del objetivo
20. Mensaje personal (HTML) Texto plano Mensaje diseñado (HTML) Influencia del estilo — Promocional con tono personal
21. Testea Photo by Luke Chesser on Unsplash
22. Sistemas 02 Diseño
23. “capacidad de un sistema de crecer en magnitud” Escalabilidad Photo by takaharu SAWA on Unsplash
24. Entropía “medida del orden de un sistema” Photo by Yung Chang on Unsplash
25. tedgoas.com Design Systems for Email: Bringing Order to the Chaos http://www.tedgoas.com/blog/email-design-systems
26. stackoverflow.design Email Design at Stack Overflow https://stackoverflow.design/email/guidelines/getting-started htmlemail.io — fuente Sketch/Figma gratis, plantillas HTML premium HTML Email https://htmlemail.io/ tabler.io — plantillas HTML premium Tabler Email https://tabler.io/emails/ Ejemplos de sistema de diseño
27. Inspiración 02 Diseño
28. reallygoodemails.com Really Good Emails https://reallygoodemails.com/
29. Desarrollo 03
30. Retos 02 Desarrollo
31. Email ≠ Web Photo by Maik Jonietz on Unsplash
32. “Every email that marketers send has approximately 15.000 potential renderings” 15.000 Why is email rendering so complex? — Litmus https://litmus.com/blog/why-is-email-rendering-so-complex
33. “of all emails were opened on mobile devices” 43 % State of Email 2019 Report — Litmus https://litmus.com/ebooks/state-of-email-2019
34. clicks únicos 15 % clicks en primer enlace 30 % borrados si no están optimizados 80 % Responsive Email 101 Webinar — Litmus (2015) https://litmus.com/lp/responsive-email-101-webinar
35. emailclientmarketshare.com Email Client Market Share https://emailclientmarketshare.com/
36. Fragmentación Photo by Paul Felberbauer on Unsplash
37. Múltiples dispositivos y clientes Renderizado Diferentes ramas de diseño sin conexión Diseño Ausencia de una base de código común Código Fragmentación
38. Consolidación Photo by Sven Mieke on Unsplash
39. Sólo permitir patrones HTML/CSS responsive altamente testeados Renderizado Normalización de componentes y layouts, en base a patrones permitidos Diseño Base de código común, para un comportamiento consistente y predecible Código Consolidación
40. Modularidad 02 Desarrollo
41. Identificación y testeo de patrones HTML/CSS. Mínimos posibles. Whitelist de patrones Encapsulación de patrones para simplificar su interfaz. Mínimos estilos. Librería de componentes base Creación de temas, añadiendo estilos a los componentes base. Creación de componentes complejos, combinando componentes base. Temas y composiciones Consolidación del código
42. Jerarquía de componentes de Bento Email — Usados por Todoist y Twist Base Unstyled framework components: Document, Layout, Content Theme 1 Styled: Layouts, Components Styled: Layouts, Components Theme 2 Template 1-1 Template 1-2 Template 2-1 Template 2-2 + Local components
43. Componentes base de Bento Email — Usados por Todoist y Twist <document_html> <document_head> <document_body> <preheader> <wrapper> <grid_row> <grid_column> <content> <spacer> <h1>…<h6> <p> <list>, <list_item> <table>, <tr>, <td> <img> <img_bg>, <img_grid> <button> <a>, <b>, <i>, <s>, <q> Document Layout Content
44. Ejemplo de componente — Spacer Template Theme Base
50. mjml.io MJML https://mjml.io/ heml.io HEML https://heml.io/ foundation.zurb.com Foundation for Emails https://foundation.zurb.com/emails.html Editores de email vía código
51. MJML — Previsualización
52. MJML — Código generado
53. taxiforemail.com — Soporta código HTML de autor Taxi for Email https://taxiforemail.com/ befree.io Beefree https://beefree.io/ topol.io Topol https://topol.io/ Editores visuales de email
54. — Elliot Ross (Taxi for Email) “A wysiwyg to make the day to day email, that then frees up dev resources to provide better value” Benefits of Using HTML/CSS Templates Over Drag & Drop Editors — Litmus Community https://litmus.com/community/discussions/6064-benefits-of-using-html-css-templates-over-drag-drop- editors#comment-10114
55. Directrices 02 Desarrollo
56. thebetter.email The Better Email on Design https://thebetter.email/design campaignmonitor.com The Ultimate Guide to CSS https://www.campaignmonitor.com/css/ howtotarget.email How to Target Email Clients https://howtotarget.email/ Librerías open source (Cerberus) o sistemas (stackoverflow.design) Plantillas, Frameworks y Sistemas Referencia
57. Contenedor fijo, con diseño simplificado del layout y los elementos. Modelo “scalable” o “mobile-aware” Contenedor fluído 100%, sin restricciones ni transformaciones del layout. Modelo “fluid” Contenedor y elementos responsive. Alternativas: Desktop-first with @media queries, Hybrid Coding approach, Table of Your Dreams, Fab Four technique, Mobile-first with calc()… Modelo “responsive” Optimización para móvil
58. github.com/TedGoas Cerberus https://tedgoas.github.io/Cerberus/ foundation.zurb.com Zurb Foundation for Emails https://foundation.zurb.com/emails.html Plantillas y frameworks
59. github.com/jonathandion/awesome-emails awesome-emails https://github.com/jonathandion/awesome-emails/ thebetter.email/resources Email Marketing Resources https://thebetter.email/resources reallygoodemails.com/resources Really Good Emails Resources https://reallygoodemails.com/resources/ Recursos
60. Email Coding Guidelines — 2015–2016 (Obsoleto)
61. litmus.com State of Email Survey Research Series https://litmus.com/stateofemail
62. Testing 02 Desarrollo
63. Canary template Photo by Olena Shmahalo on Unsplash
64. Canary template
65. emailonacid.com Email on Acid https://www.emailonacid.com/
66. litmus.com Litmus https://litmus.com/
67. putsmail.com https://www.campaignmonitor.com/resources/guides/getting-started- Putsmail https://putsmail.com/
68. Gracias @janogarcia · janogarcia.com er.com/janogarcia https://janogarcia.com