Email — Conquistando el Inbox

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