Diseñar un correo electrónico es difícil y arcaico. Incluyendo CSS, diseño de tablas, compatibilidad con CSS variable, múltiples dispositivos, múltiples clientes, la lista es interminable. En este tutorial, explicaré cómo puede usar Grunt para automatizar y optimizar su flujo de trabajo..

Flujo de trabajo de diseño de correo electrónico roto

El diseño del correo electrónico es un flujo de trabajo diferente al diseño web. A menudo, está diseñando una plantilla en un entorno aislado, con poca o ninguna dependencia o recursos compartidos. Es posible que esté copiando el marcado de un lugar (local, estático) a otro (ESP, código base). Puede ser difícil mantener sus plantillas de correo electrónico, es difícil mantenerlas coherentes e incómodas para colaborar con los miembros del equipo, teniendo en cuenta las diversas pruebas e insinuaciones que deben realizarse antes de que se envíen..

Un problema que he tenido en el pasado es que cada vez que necesitaba una nueva plantilla de correo electrónico, tomaba una plantilla existente y luego hacía algunos ajustes aquí y allá. Esto resultaría en correos electrónicos inconsistentes a través del producto. Que es solo una mala práctica.

Otro problema que he encontrado es que creo que ya he terminado, por lo que puse la plantilla a través de una herramienta CSS en línea y se la entregué a un desarrollador, solo para que alguien solicite un cambio, o señale un error. El flujo de trabajo de edición / inline / copia debe repetirse una y otra vez.

Gruñir al rescate

Hoy en día utilizo Grunt para optimizar el flujo de trabajo de diseño de mi correo electrónico. Ayuda con algunas cosas:

• Me da un marco para trabajar, por lo que puedo usar Sass y plantillas
• Sirve como repetitivo para nuevos correos electrónicos.
• Ayuda a que mis correos electrónicos sean consistentes en un proyecto.
• Automatiza las diversas tareas y pruebas que tengo que hacer para cada correo electrónico.

Que es Grunt?

Grunt es un corredor de tareas. Es un archivo Javascript que ejecuta las tareas que desea que se ejecuten una tras otra. ¿Esa lista de cosas que necesitas hacer que acabo de mencionar? Podemos ponerlos en un archivo Grunt y hacer que los haga todos por nosotros. Perfecto para ejecutar tareas repetitivas..

Para que Grunt esté en funcionamiento, tendrá que ensuciarse un poco las manos con la línea de comandos y Javascript. Pero es muy sencillo..

1. Cómo hacer que Grunt se ponga en marcha

Chris Coyier ofrece un excelente tutorial sobre la configuración de Grunt por primera vez. Voy a repasar lo básico.

Grunt requiere un par de cosas para ponerse en marcha. Nodo, un gestor de paquetes y un archivo gruñido..

Instalar nodo

Vaya al sitio de Node y siga las instrucciones para instalar. 

Cree package.json en el directorio de su proyecto

Crear una nueva carpeta (por ejemplo, llamada correo electrónico) luego crea un archivo llamado paquete.json.

Pega este JSON en el archivo.

"name": "emailDesign", "version": "0.1.0", "devDependencies": "grunt": "~ 0.4.5"

Aquí le indicamos al gestor de paquetes del nodo que use Grunt, versión 0.4.5 o superior.

Instalación NPM

Ahora, para instalar la versión anterior de Grunt, vaya al directorio de su proyecto en la línea de comandos e ingrese:

npm instalar

Cuando ejecute este comando notará una nodo_módulos aparece la carpeta.

Instalar la interfaz de línea de comandos de Grunt

Aún en su directorio de correo electrónico, ejecute el siguiente comando:

npm instalar -g grunt-cli

Nota: es posible que tenga que anteponer este comando con sudo  Si te piden que lo ejecutes como root / administrador. 

Habiendo hecho eso, ahora podemos escribir comandos Grunt en la línea de comandos.

Crea tu archivo Gruntfile.js

Crear un archivo llamado Gruntfile.js en la carpeta de tu proyecto e incluye el siguiente JavaScript:

module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('predeterminado'); ;

Esta es la esencia de lo que se necesita para que Grunt funcione. Ahora para agregar cosas más emocionantes..

2. Agrega las tareas a Grunt

Vamos a empezar con algo simple, pero vital: CSS en línea. Digamos que tenemos una plantilla de correo electrónico, con CSS en la cabeza. CSS en la cabeza es fácil (ish) de mantener, pero la plantilla que realmente queremos enviar debe tener CSS en línea.

Crea la plantilla HTML

Vamos a utilizar un correo electrónico HTML bastante básico con el CSS en la cabeza. Guarde el siguiente marcado como email.html en el directorio de su proyecto.

     
 
Hola Mundo!
 
Esta es una plantilla de correo electrónico..
 
  

Instalar la tarea CSS Inliner

A continuación, vamos a utilizar una tarea de CSS en línea para colocar cada regla de estilo en línea en los propios elementos HTML. Me gusta este inliner ya que no requiere otras dependencias. Regresa a tu línea de comando y ejecuta esto:

npm instala grunt-inline-css --save-dev

Esto agregará la tarea grunt-inline-css a su npm_modules carpeta, así como la paquete.json expediente.

Agregue la tarea a su archivo Gruntfile

A continuación agregue la tarea a su Gruntfile.js usando este fragmento, arriba de donde se ve grunt.registerTask ('predeterminado');

grunt.loadNpmTasks ('grunt-inline-css');

A continuación, agregue en sus opciones de configuración, dentro de la grunt.initConfig () método:

inlinecss: main: opciones: , archivos: 'email-inlined.html': 'email.html'

Aquí le estamos diciendo a inlinecss que busque el archivo llamado "email.html" y que muestre "email-inlined.html". Finalmente, lo llamamos desde la tarea por defecto de Grunt:

grunt.registerTask ('default', ['inlinecss']);

The Final Gruntfile

Tu Gruntfile ahora debería verse algo como esto:

module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), inlinecss: main: options: , files: 'email-inlined.html' : 'email.html'); grunt.loadNpmTasks ('grunt-inline-css'); grunt.registerTask ('default', ['inlinecss']); ;

Ejecutar Grunt

Volviendo una vez más a la línea de comando, escriba gruñido y entra para ejecutarlo. 

Ahora debería quedar con un email-inlined.html archivo que tiene el css en línea. Si abres ambos archivos HTML en tu navegador, deberían tener el mismo aspecto..

Tareas de diseño de correo electrónico

Con toda la suerte que lo haya convencido de los poderes de Grunt para automatizar el flujo de trabajo de diseño de correo electrónico. Y lo que es más, seguir esa introducción le ha dado el marco para ir aún más lejos..

¿Qué otras tareas de diseño de correo electrónico podría automatizar??

• Compilar CSS (si usa SASS o Menos)
  
• CSS en línea
• Compilar plantillas HTML (si se utilizan diseños y parciales)
  
• Vista previa en el navegador
  
• Vista previa en clientes de correo
  
• Pruebas con aplicaciones de prueba de correo electrónico (Litmus, Email on Acid)
  
• Carga de activos a un CDN disponible públicamente
  
• Agregar etiquetas de seguimiento UTM a enlaces
  
• … la lista continua
  

Mi diseño de correo electrónico Gruntfile

Este es el Gruntfile, de código abierto en GitHub, que uso con bastante frecuencia. Echemos un vistazo a las tareas individuales para ver qué está sucediendo realmente.

1. Sass / SCSS

Me gusta administrar mi CSS usando SCSS, así que lo primero que debo hacer a Grunt es compilar el archivo SCSS principal.

2. ensamblar HTML

Ensamblar es un generador de sitio estático. Compila el HTML al reunir las plantillas de diseño principales y el contenido de cada correo electrónico..

3. CSS en línea

Estoy usando premailer para CSS en línea. Si se pregunta por qué no uso el inliner de arriba, descubrí que Premailer tiene mejor soporte para consultas de medios. Para que las consultas de los medios funcionen, queremos que se queden solos en la cabeza, no en línea. 

Nota: premailer tiene dependencias que también deben instalarse, incluidos Ruby y un par de gemas.

4. Enviar un correo electrónico de prueba

Para enviar un correo electrónico a una bandeja de entrada estoy usando la API de Mailgun. Esto envía el correo electrónico HTML enviado a mi bandeja de entrada para que pueda verlo por mí mismo en cualquier cliente que elija..

Esta también es una forma útil de enviar su plantilla a Litmus si desea obtener una vista previa en otros clientes de correo electrónico. Hacerlo es cuestión de cambiar el destinatario..

5. CDN

Esto es útil si está enviando correos electrónicos transaccionales y necesita almacenar recursos de imagen en algún lugar. Si está utilizando un ESP (Proveedor de servicios de correo electrónico) para enviar sus correos electrónicos, es muy probable que almacenen sus activos de imagen para usted, por lo que no es un problema en este caso.

Ejecutando las tareas

Para ejecutar las tareas tenemos una serie de opciones de comando..

• gruñido ejecuta la tarea por defecto. Esto incluye compilar Sass, ensamblar plantillas e integrar el CSS. A continuación, puede abrir la salida en su navegador.
• grunt enviar --template = MY_TEMPLATE.html ejecutará las tareas anteriores, así como el envío de la plantilla de correo electrónico que especifique. Recuerde actualizar la configuración de Mailgun en Gruntfile.js.
• gruñido cdnificar ejecutará de nuevo las tareas predeterminadas, pero también cargará los recursos de imagen locales, luego reemplazará las rutas de archivo con la ruta de CDN.
• Tenga en cuenta que también puede combinar tareas por ejemplo. grunt cdnify send -template = MY_TEMPLATE.html

Más tareas!

Es posible que desee agregar más tareas para ayudar a su proceso, o tal vez desee eliminar algunas. Dirígete al directorio de complementos de Grunt para encontrar las tareas que ayudan a tu flujo de trabajo.

Plantillas de correo electrónico transaccionales

Aquí hay algunas plantillas que preparé anteriormente..

Usando el flujo de trabajo y el Gruntfile descritos anteriormente, abrí una serie de correos electrónicos transaccionales para que los usen los equipos de desarrollo. Siéntase libre de hacer uso de ellos tal como están, o usarlos como plantilla para sus propios diseños de correo electrónico..

Recursos útiles de diseño de correo electrónico

• Configurando Grunt para tu próximo proyecto
• Mejore su flujo de trabajo de correo electrónico con diseño modular
• Flujo de trabajo de diseño de correo electrónico
• Un flujo de trabajo de Grunt para diseñar y probar correos electrónicos HTML
• Plantillas de correo electrónico HTML de respuesta para Startups
  

Conclusión

Muchas tareas asociadas con el diseño del correo electrónico pueden ser arduas e incómodas. Deje que Grunt haga el trabajo duro por usted y encontrará todo el proceso mucho más agradable.!