Consejos para crear emails en HTML y flujo de trabajo
Ayer organizamos un Google Hangout con nuestro diseñador principal de productos digitales, Lee Munroe. En este hangout, Lee analizó a fondo la creación de plantillas en HTML; para ello, primero repasó el estado actual de los emails en HTML.
¿Sabías que? ¡Las plantillas de email ya forman parte de nuestra API y de la interfaz de usuario! Más información.
Ayer organizamos un Google Hangout con nuestro diseñador principal de productos digitales, Lee Munroe. En este hangout, Lee analizó a fondo la creación de plantillas en HTML; para ello, primero repasó el estado actual de los emails en HTML y, a continuación, demostró cómo crear, diseñar y automatizar tus plantillas en HTML utilizando herramientas como Litmus y Grunt. A continuación tienes el vídeo con los minutos, que incluye un turno de preguntas y respuestas. También puedes guardar la presentación de Lee como referencia aquí. Que lo disfrutes.
(2:00) Introducción y agenda
¿Por qué Lee tiene acento? Pues porque es de Belfast (Irlanda del Norte). Hay tres cosas importantes por las que Belfast es famosa: 1) es donde se construyó el Titanic; 2) el Europa, supuestamente el hotel más bombardeado de Europa, está en Belfast y en él se han alojado muchos políticos, como Bill Clinton en los 90, y 3) es donde se ruedan muchas escenas de Juego de Tronos.
Vale, pasemos al verdadero motivo por el que te has unido a este hangout. A Lee se le conoce principalmente por su trabajo de diseño y experiencia de usuario. Hace poco publicó como código abierto una serie de plantillas de email y un flujo de trabajo para facilitarte la vida; puedes acceder aquí.
(4:40) Estado de los emails en HTML en 2015
Cuando Lee empezó a trabajar en Mailgun, todos los emails eran de texto sin formato, así que uno de sus primeros proyectos fue crear emails en HTML. Empezó a utilizar Litmus para probar el email en todos los clientes de email. Las reglas y el renderizado varían en los distintos clientes.
(10:50) Soluciones para crear emails en HTML
Con todos los obstáculos y dificultades que supone crear emails en HTML para que funcionen en los distintos clientes, ¿por dónde empezamos? 1) Utilizar tablas en HTML; 2) CSS en línea; 3) orientarse a Outlook con declaraciones condicionales; 4) orientarse a webkit y dispositivos más pequeños con consultas de medios. Lee explica lo que se conoce como “mejora progresiva”, que ofrece una base que funciona para todo el mundo y una experiencia mejorada para aquellos que la admiten.
(17:55) Flujo de trabajo y un sistema
La mayoría de las empresas de software no envían solo un email, sino muchos a través de varias plataformas. La programación a mano, uno por uno, no es una solución escalable. Trata tu email como un sitio web: con módulos, no páginas. Entre los generadores de sitios estáticos recomendados se incluyen: Jekyll, Middleman y Assemble. Por último, haz pruebas con Litmus.
(21:20) Automatización (utiliza algo como Grunt)
Una vez que tengas tus emails en HTML configurados, querrás automatizarlos. Los ejecutores de tareas como Grunt pueden hacer todas estas tareas por nosotros. Puedes añadir un montón de plugins a tu archivo de Grunt, por ejemplo, para alojar imágenes en una CDN como Rackspace Cloud Files o Amazon CloudFront. Asegúrate de enviar las plantillas a tu código base.
(24:05) Demo
(26:55) Reflexiones finales: email responsive, acciones de Gmail, texto de preencabezado
Las consultas de medios no funcionan en Gmail, por ejemplo. Nicole Merlin tiene un fantástico tutorial sobre emails responsive aquí: j.mp/responsive-email-tut
Puedes incluir la CTA en la línea de asunto en Gmail para que los usuarios no tengan que abrir el email para ver el asunto. Lee más aquí: developers.google.com/gmail/markup
El texto de preencabezado, también conocido como texto de previsualización, es una descripción adicional en la línea de asunto. Puedes añadir una línea de contenido oculta que el usuario no verá al abrir el email.
Si te interesa usar Litmus para hacer pruebas con tus emails, asegúrate de utilizar litmus.com/lp/mailgun para conseguir un mes de prueba gratis de su servicio.
(33:20)
Preguntas y respuestas
¿Admite Grunt GetResponse?
\nDepende de lo que entiendas por “admitir”. Puedes comunicarte con la API de GetResponse mediante Grunt.js y el plugin grunt-http.
¿Funcionan las consultas de medios en la versión web de Office 365?
Creo que no. La renderización de Office 365 es muy parecida a la de Outlook.com, que no admite las consultas de medios.
¿Son compatibles los preencabezados solo en Gmail?
El texto de preencabezado, también conocido como texto de previsualización, es compatible con Gmail, AOL, Yahoo, Apple Mail, Outlook 2013, aplicaciones nativas de iOS y aplicaciones nativas de Android.
¿Cómo se envía la plantilla a Mailgun?
La API de Mailgun acepta un parámetro HTML, de modo que envías el email en HTML completo. Mailgun no almacena plantillas por sí mismo. La forma de enviar el email a nuestra API depende de cómo hayas configurado tu aplicación. Por ejemplo, una aplicación de Ruby on Rails se configuraría de forma ligeramente distinta a una de Python. Si quisieras utilizar todo el flujo de trabajo de Grunt de la demo, podrías integrar el archivo Gruntfile en tu código base y ejecutarlo como parte de tu sistema de compilación. O quizás prefieras mantener el flujo de trabajo de Grunt por separado y almacenar las plantillas en otro lugar. Sendwithus es un gran servicio para almacenar tus plantillas de email y seguir usando la API de Mailgun para realizar los envíos.
