Usando Grunt para hacer el diseño del correo divertido de nuevo

() translation by (you can also view the original English article)

Diseñar un correo es difícil y arcaico. Alinear el CSS, diseñar la tabla, soporte de CSS para navegadores, múltiples dispositivos, múltiples clientes, lineas de finales. En este tutorial te explicare como puedes usar Grunt para ayudar a automatizar y coordinar el flujo de trabajo.

Rompiendo el flujo del correo

Diseñar un correo es un flujo de trabajo diferentes para un diseñador web. A menudo, estás diseñando una plantilla en un entorno aislado, con muy pocas dependencias o recursos compartidos. Quizás estas copiando código o etiquetas de otro lugar (local, estático) para otros (ESP, Codebase). Puedes ser difícil mantener tu plantilla de correo, es difícil mantener su consistencia y permitir la colaboración de otros miembros del equipo, todo ello mientras mantienes tu mente enfocada en varias pruebas y requisitos que necesitas para ser efectivo antes de poderse enviar.

Un problema que he tenido en el pasado es que cada vez que necesito una plantilla para un correo, Tomo una plantilla existente y hago unas cuantas modificaciones aquí y allá. Esto podría resultar un inconsistente correo para el producto. Esta más de decir que es una mala practica.

Otra cosa con la que me he topado es que pienso que lo estoy haciendo bien, así que pongo la plantilla llena de CSS en una herramienta y comienzo a manipularla, solamente para que una petición cambie o arroje un error. El flujo de editar/inline/copiar se vuelve repetitivo una y otra vez.

Grunt al rescate

Hoy en día yo uso Grunt para optimizar mi flujo de diseño del correo. Por eso estoy aquí para ayudarte con unas cuantas cosas:

Consigue un framework para trabajar, yo uso Sass y una plantilla para hacerlo
Servidor como un modelo para los nuevos mensajes de correo
Ayuda a hacer mis correos consistente a través de un proyecto
Automatiza varias tareas y pruebas para cada correo

¿Qué es Grunt?

Grunt corre tareas. Es un archivo Javascript que corre las tareas que tu quieres, corriendo una detrás de otra. En esa lista de cosas que hay que hacer, las acabo de mencionar más arriba. Podemos ponerlos en un archivo Grunt y hacer que haga todos aquello por nosotros. Lo ideal para realizar tareas repetitivas.

Para obtener Grunt y usarlo tendrás que tener tus manos un poco sucias con cosas comandos y Javascript. Pero es muy sencillo.

1. ¿Cómo obtener Grunt y usarlo?

Chris Coyier da un muy buen tutorial sobre el uso de Grunt por primera vez. Yo tocare los conceptos básicos.

Grunt requiere un par de cosas para funcionar. Node, un administrador de paquetes y un archivo grunt.

Instalar Node

Ve al sitio de Node y sigue las instrucciones para instalarlo.

Crear un package.json en el directorio de tu proyecto

Crea una nueva carpeta (e.j. llamada correo) entonces crea un archivo llamado package.json.

Pega este JSON dentro del archivo.

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

Deberás usar node package manager (NPM) para usar Grunt, versión 0.4.5 o posterior.

Instalar NPM

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

1	npm install

Cuando corras este comando recibirás una notificación que dirá carpeta node_modules.

Instalando Grunt Command Line Interface (CLI)

Aun en tu directorio de correo, corre el siguiente comando:

1	npm install -g grunt-cli

Nota: tu podrías necesitar anteponer esta comando con sudo si te pregunta si deseas correr como root/Administrator.

Esta hecho, ahora podemos teclear Grunt dentro de la linea de comandos.

Crear tu Gruntfile.js

Crea un archivo llamado Gruntfile.js dentro de tu carpeta del proyecto e incluye lo siguiente en JavaScript:

module.exports = function(grunt) {

    grunt.initConfig({
      pkg: grunt.file.readJSON('package.json')
    });

    grunt.registerTask('default');

};

Este es el esqueleto de lo que se necesita para que Grunt pueda trabajar. Ahora añadiremos más emocionantes.

2. Añadir tareas a Grunt

Permiteme comenzar con algo simple, pero vital: Inlining CSS. Nosotros tenemos una plantilla de correo, con CSS en el head. CSS en el head es sencillo de mantener, pero la plantilla que queremos enviar debería tener CSS inlined.

Crear la plantilla HTML

Vamos a utilizar un correo HTML bastante básico con el CSS en el head. Guarda lo siguiente email.html en el directorio de tu proyecto.

<html>
<head>
  <style>
  body{
    background:#f1f1f1;
    font-family: Helvetica;
  }
  .container{
    background:#fff;
    border:1px solid #eee;
    width:500px;
    padding:20px;
    margin:20px auto;
  }
  h1{
    font-size:32px;
    text-align:center;
    font-weight:400;
  }
  </style>
</head>

<body>
  <div class="container">
    <h1>Hello world!</h1>
    <p>This is an email template.</p>
  </div>
</body>
</html>

Instalar CSS Inliner Task

Lo siguiente a utilizar es CSS inliner task para cada regla de estilo sobre los elementos de HTML. Me gusta este porque no requiere otras dependencias. Regresar a tu linea de comandos y corre:

1	npm install grunt-inline-css --save-dev

Esto añadira el grunt-inline-css task a tu carpeta npm_modules, también al package.json file.

Añadir Task a tu Gruntfile

Lo siguiente añadiremos la task a tu Gruntfile.js usando este pedazo de código, antes tu veras grunt.registerTask('default');

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

Entonces añade en tu configuración, dentro de el método: grunt.initConfig()

inlinecss: {
    main: {
        options: {},
        files: {
            'email-inlined.html': 'email.html'
        }
    }
}

Aquí estamos pidiendo inline css encontrar el archivo llamado “email.html” y mostrando “email-inlined.html”. Finalmente, llamaremos una task predeterminada de Grunt:

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

El final Gruntfile

Tu Gruntfile debería mirarse así:


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']);

};

Corre Grunt

Regresa de nuevo a la linea de comandos, teclea grunt y presiona enter para correr.

Ahora debería quedar con un archivo “email-inlined.html” que tiene el css inlined. Si tu abres ambos archivos HTML en tu navegador, ellos deberían verse iguales.

Diseño tasks para el correo

Con un poco de suerte estaremos convencidos de los poderes de Grunt en la automatización de el flujo de diseño del correo. Que más, siguiendo esta introducción te ha dado el framework para ir aún más allá.

¿Qué otro task de diseño de correo podrías automatizar?

Compilar CSS (usando SASS o Less)
Inline CSS
Compilar plantillas de HTML (usando plantillas parciales)
Vista previa en el navegador
Vista previa en correo de el cliente
Pruebas con una app de pruebas (Litmus, Email on Acid)
Subir assets a una publicación disponible de CDN
Añadir etiquetas de rastreo UTM a enlaces
…la lista podría continuar

Mi diseño de correo con Gruntfile

Este es el Gruntfile, open-sourced sobre GitHub, que yo uso a menudo. Echemos un vistazo a las tareas individuales para saber que esta pasando.

1. Sass/SCSS

Me gusta administrar mi CSS usando SCSS, así que la primera cosa que busco de Grunt es compilador mi archivo principal de SCSS.

2. Ensamblar HTML

Ensamblar es un generador estático de sitios. Compila el código HTML al reunir la plantilla principal de diseño(s) y el contenido de cada correo.

3. Inline CSS

Yo estoy usando premailer para inline CSS. Si tu estas maravillado porqué no use el inliner desde antes, encontré premailer que tiene mejor soporte para media queries. Para que media queries trabaje, tendremos que ponerlo en el head, no inlined.

Nota: premailer tiene dependencias que también deben ser instaladas, incluyendo Ruby y un par de gemas.

4. Enviar un correo de prueba

Para enviar un correo a una bandeja de correo, yo estoy usando Mailgun's API. Este envía el HTML del correo a mi bandeja de correos, así yo puedo ver por mi mismo como lo haría el cliente.

Esta es también una manera útil para enviar plantilla a Litmus si deseas obtener una vista previa en otros clientes de correo. Si lo hace, es una cuestión de cambiar al destinatario.

5. CDN

Esto es útil si estás enviando correos transaccionales y necesitas almacenar imágenes en algún lugar. Si estás usando un ESP (Email Service Provider) para enviar tus correos, existe una buena oportunidad de guardar imágenes, así que no es un problema.

Corriendo las Tasks

Para correr las tasks tenemos un numero de comandos para elegir.

grunt corre la predeterminada task. Esto incluye compilar Sass, ensamblar plantillas e inlining el CSS. Puedes entonces abrirlo en tu navegador.
grunt send --template=MY_TEMPLATE.html correrá el task anterior, también enviara un correo a la plantilla especificada. Recuerda actualizar las opciones de Mailgun en Gruntfile.js.
grunt cdnify correrá el task predeterminado, pero también subirá una imagen local, entonces reemplaza la ruta del archivo con la ruta del CDN.
Nota también puedes combinar tasks e.j. grunt cdnify send —template=MY_TEMPLATE.html

Más Tasks!

Hay más tasks que podrías querer añadir al proceso, o también podrías querer remover alguna. Todo esta aquí en el directorio de plugins Grunt's, esto te ayudar a mejorar el flujo.

Plantilla transaccional de correo

Aquí algunas plantillas que yo prepare más recientemente.

Usando el flujo and Gruntfile con anterioridad, Yo manipulo un open-sourced de correos de transacción que un equipo de dev usa. Siéntete con la libertad de usarlo para tus diseños.

Recursos útiles

Conclusión

Muchas tareas asociadas con el diseño de un correo pueden ser arduas y torpes. Grunt hace el trabajo difícil por ti y encontraras el entero proceso mucho más divertido!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!