Email — Conquistando el Inbox

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/

3b53f32a92ff371b49203a9cb93a4a3a?s=128

Jano Garcia

June 01, 2019
Tweet

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

  45. None
  46. None
  47. None
  48. None
  49. None
  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