Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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/

Jano Garcia

June 01, 2019
Tweet

More Decks by Jano Garcia

Other Decks in Design

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