Este documento habla sobre el diseño y desarrollo de correos electrónicos. Explica que el correo electrónico sigue siendo un importante canal de marketing con altos retornos de inversión. Luego, describe algunos principios básicos de diseño como la simplicidad y el objetivo, y los retos de desarrollo debido a la fragmentación entre clientes de correo. Finalmente, recomienda el uso de plantillas, marcos de trabajo y pruebas para lograr un diseño y desarrollo exitosos de correos electrónicos.

1. @janogarcia · janogarcia.comitter.com/janogarcia https://janogarcia.com
Conquistando el Inbox
Email

2. Alejandro García
@janogarcia · janogarcia.comhttps://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 Monitorhttps://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 Timeshttps://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”
11S
Top Email Design Trends for 2019 — Litmushttps://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 — Twitterhttps://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 Guidehttps://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 Chaoshttp://www.tedgoas.com/blog/email-design-systems

26. stackoverflow.design
Email Design at Stack Overflowhttps://stackoverflow.design/email/guidelines/getting-started
htmlemail.io — fuente Sketch/Figma gratis, plantillas HTML premium
HTML Emailhttps://htmlemail.io/
tabler.io — plantillas HTML premium
Tabler Emailhttps://tabler.io/emails/
Ejemplos de sistema de diseño

27. Inspiración
02 Diseño

28. reallygoodemails.com
Really Good Emailshttps://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? — Litmushttps://litmus.com/blog/why-is-email-rendering-so-complex

33. “of all emails were opened on mobile
devices”
43%
State of Email 2019 Report — Litmushttps://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 Sharehttps://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, ComponentsTheme 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
MJMLhttps://mjml.io/
heml.io
HEMLhttps://heml.io/
foundation.zurb.com
Foundation for Emailshttps://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 Emailhttps://taxiforemail.com/
befree.io
Beefreehttps://beefree.io/
topol.io
Topolhttps://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 Communityhttps://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 Designhttps://thebetter.email/design
campaignmonitor.com
The Ultimate Guide to CSShttps://www.campaignmonitor.com/css/
howtotarget.email
How to Target Email Clientshttps://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
Cerberushttps://tedgoas.github.io/Cerberus/
foundation.zurb.com
Zurb Foundation for Emailshttps://foundation.zurb.com/emails.html
Plantillas y frameworks

59. github.com/jonathandion/awesome-emails
awesome-emailshttps://github.com/jonathandion/awesome-emails/
thebetter.email/resources
Email Marketing Resourceshttps://thebetter.email/resources
reallygoodemails.com/resources
Really Good Emails Resourceshttps://reallygoodemails.com/resources/
Recursos

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

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

62. Testing
02 Desarrollo

63. Canary template
Photo by Olena Shmahalo on Unsplash

64. Canary template

65. emailonacid.com
Email on Acidhttps://www.emailonacid.com/

66. litmus.com
Litmushttps://litmus.com/

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

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