Las herramientas de un flujo de trabajo de correo electrónico HTML »Wiki Ùtil Programar Plus

El ShopTalk Show de la semana pasada tuvo que ver con el correo electrónico HTML. Es un tema tan fascinante, ya que técnicamente es desarrollo web front-end, pero casi se siente como un universo alternativo extraño.

Tenemos decenas de navegadores de los que preocuparnos, tienen cientos de clientes que considerar. Nos preocupamos por si se admiten nuevas API sofisticadas, a ellos les preocupa si se admite el relleno. Tenemos diseño de cuadrícula, ellos tienen…. ¡¿diseño de cuadrícula?!

Es tentador hacer la broma: “¡Está codificando como si fuera 1999!”, Pero como hablamos en este episodio, eso no es realmente cierto.

Aparte de todo eso, otra cosa que me fascina son todas las herramientas involucradas. Déjame pensar en esto.

Herramientas de creación: bare metal

Puede crear un correo electrónico solo con HTML. Estoy seguro de que se crea una gran cantidad de correo electrónico HTML de esta manera. Abra el editor de código, cree correo electrónico HTML, envíe correo electrónico HTML. Sé que esto me tienta y sigo mucho este camino, especialmente cuando creamos un correo electrónico importante y único.

Eche un vistazo a Really Good Emails en CodePen, donde han archivado una gran cantidad de HTML completo de las campañas de correo electrónico enviadas.

La herramienta de construcción en Litmus también es un editor completo. Ves y editas todo el documento HTML.

Herramientas de creación: Plantillas HTML

Todavía está creando HTML a mano y de autoría manual, pero puede buscar plantillas de correo electrónico HTML. Esta es probablemente una muy buena ruta para la mayoría de nosotros, debido a lo complicado que puede ser acertar con el correo electrónico HTML. Afortunadamente, gran parte del arduo trabajo de encontrar plantillas de correo electrónico agradables y simples con diseño funcional y tipografía ya se ha realizado.

  • Lee Monroe ofrece una plantilla de correo electrónico HTML receptiva realmente simple y vende un paquete de más plantillas.
  • Cerberus: “Algunos patrones simples pero sólidos para correos electrónicos HTML receptivos”.
  • MailChimp tiene planos de correo electrónico en GitHub. Sin embargo, no han sido tocados en 3 años, y no estoy seguro de si eso significa que les faltan técnicas nuevas / grandes / importantes en el desarrollo de correo electrónico HTML o no.
  • TABLE TR TD tiene una plantilla de construcción.
  • Si reparte su correo electrónico en 99 diseños, parece que le enviarán algunos.

Herramientas de creación: Plantillas abstractas

Sin duda, es posible crear un correo electrónico trabajando directamente con una gran y retorcida pieza de HTML, pero los desarrolladores de aplicaciones para el usuario casi nunca trabajan de esa manera. Una de las primeras abstracciones que siempre buscamos es abstraer HTML en partes. Puede hacerlo con el correo electrónico.

  • Puede usar sus propios parciales del lado del servidor para dividir el HTML en partes, de modo que la creación de nuevos correos electrónicos pueda reutilizar esas partes y sea más rápido de construir y más fácil de mantener.
  • Dan Denney tiene un sistema llamado eMMail que usa Middleman, Haml y Sass para abstraer los correos electrónicos en partes manejables.
  • Lee Monroe tiene un flujo de trabajo de diseño de correo electrónico Grunt que es Handlebars / Assemble y Sass para armar los correos electrónicos.
  • Foundation Emails utiliza un lenguaje HTML abstracto llamado Inky que se compila en HTML listo para correo electrónico.
  • MJML es también un lenguaje HTML abstracto diseñado para ser preprocesado en HTML para correo electrónico.

Generador de interfaz de usuario y herramientas de envío

En lugar de tocar el código en absoluto, puede diseñar y escribir un correo electrónico directamente a través de una herramienta creada para eso. Estas opciones probablemente sean bastante obvias para la mayoría de las personas, ya que existe una gran demanda de esto. ¡Con razón! Herramientas como estas le permiten escribir y diseñar el correo electrónico directamente sin distraerse con las herramientas.

  • Monitor de campaña
  • MailChimp
  • AWeber

No siempre es posible utilizar herramientas como esta para todos los correos electrónicos que envía. Por lo general, tienen un costo prohibitivo para listas de correo electrónico realmente gigantes, y no están realmente diseñadas para correo electrónico transaccional.

Estas herramientas tienden a unir la construcción visual del correo electrónico junto con el envío y el análisis. Todo en uno.

Sendwithus es un poco diferente. Está diseñado para correo electrónico transaccional y le brinda un sistema para crear y crear plantillas de correos electrónicos, pero no los envía directamente (a pesar del nombre). Trae su propio servicio de envío de correo electrónico. Hablando de que…

Herramientas de envío: API

Estos servicios realmente envían el correo electrónico por usted. Golpea su API con el correo electrónico en sí, la línea de asunto, los destinatarios y cualquier otra cosa que necesiten y envía el correo electrónico. Aquí hay una lista no completa:

  • SparkPost
  • MailGun
  • SendGrid
  • Mandril
  • Amazon SES
  • Matasellos

Analítica suele ser una característica que viene con estas herramientas que hacen el envío. Eso es cierto para estas API de correo electrónico junto con las aplicaciones de creación y envío.

Herramientas CSS integradas

Siempre asumí que esto era absolutamente necesario al 100% para los correos electrónicos HTML, pero en realidad no lo es. La mayoría de los clientes de correo electrónico admiten <style> bloque en el <head>. Eso significa que puede enviar CSS sin tener que incorporarlo. Sin embargo, incluso cuando eso es compatible, debe pensar qué funciones son compatibles. El hecho de que se admita un bloque de estilo no significa que border-radius necesariamente.

Cuadro de soporte por correo electrónico de Campaign Monitor.

Incluso esa marca roja de arriba está desactualizada, ya que Gmail ahora admite bloques de estilo. Por lo tanto, la inserción de CSS podría desaparecer en última instancia, pero imagino que hay algunos clientes de correo electrónico que aún lo necesitan, y si es parte de un proceso de compilación de todos modos, supongo que no puede hacer daño.

Copie y pegue las herramientas del navegador:

  • Premailer
  • PutsMail
  • MailChimp Inliner
  • Campaign Monitor Inliner

Herramientas programáticas:

  • Nodo: jugo
  • Ruby: Roadie

Herramientas de prueba

  • Podrías enviarte un correo electrónico y mirarlo. Probablemente sea mejor poner en marcha tantos clientes de correo electrónico como sea posible, en diferentes sistemas operativos y dispositivos.
  • Litmus es el jugador más importante en esta área. Muchas otras herramientas que ofrecen vistas previas de su correo electrónico son en realidad Litmus haciendo ese trabajo.
  • Email on Acid es una herramienta similar y un poco menos costosa.

(Visited 8 times, 1 visits today)