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
   

   View Slide

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
   

   View Slide

3. Contexto
   01
   

   View Slide

4. Por qué email
   01 Contexto
   

   View Slide

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

   View Slide

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/
   

   View Slide

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
   

   View Slide

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
   

   View Slide

9. Objetivo
   01 Contexto
   

   View Slide

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

    View Slide

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)
    

    View Slide

12. Diseño
    02
    

    View Slide

13. Principios
    02 Diseño
    

    View Slide

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
    

    View Slide

15. Simplificar
    Photo by Paul Green on Unsplash
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. Testea
    Photo by Luke Chesser on Unsplash
    

    View Slide

22. Sistemas
    02 Diseño
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

27. Inspiración
    02 Diseño
    

    View Slide

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

    View Slide

29. Desarrollo
    03
    

    View Slide

30. Retos
    02 Desarrollo
    

    View Slide

31. Email ≠ Web
    Photo by Maik Jonietz on Unsplash
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

36. Fragmentación
    Photo by Paul Felberbauer on Unsplash
    

    View Slide

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
    

    View Slide

38. Consolidación
    Photo by Sven Mieke on Unsplash
    

    View Slide

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
    

    View Slide

40. Modularidad
    02 Desarrollo
    

    View Slide

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
    

    View Slide

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
    

    View Slide

43. Componentes base de Bento Email — Usados por Todoist y Twist
    
    
    
    
    
    
    
    
    
    …
    
    ,
    , ,
    
    ,
    
    , , , ,
    Document Layout Content
    

    View Slide

44. Ejemplo de componente — Spacer
    Template
    Theme
    Base
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

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
    

    View Slide

51. MJML — Previsualización
    

    View Slide

52. MJML — Código generado
    

    View Slide

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
    

    View Slide

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
    

    View Slide

55. Directrices
    02 Desarrollo
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

60. Email Coding Guidelines — 2015–2016 (Obsoleto)
    

    View Slide

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

    View Slide

62. Testing
    02 Desarrollo
    

    View Slide

63. Canary template
    Photo by Olena Shmahalo on Unsplash
    

    View Slide

64. Canary template
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide