Crear emails HTML es casi como crear el diseño de una aplicación web. La única diferencia es que el diseño debe ser desarrollado utilizando tablas y estilos CSS inline, además de aguantar al típico cliente que siempre indica que en su gestor de correo no se ve como se debería ver. Así que sí, es igual que crear un diseño web, pero infinitamente peor.
Una manera de crear emails HTML de manera sencilla es utilizar un framework que se ocupe de la mayoría de problemas que hemos mencionado anteriormente. En este tutorial te mostraremos cómo utilizar el framework MJML para crear tus propias plantillas para correo electrónico. ¿Te atreves? ¡Pues allá vamos!
¿Qué es MJML?
MJML nos proporciona un lenguaje parecido a XML que puede ser compilado en un HTML listo para ser enviado por correo electrónico. Mediante este método no tendrás que codificar a mano las tablas que integran tu diseño, ni introducir las reglas CSS inline.
Este framework te ofrece un conjunto de componentes estandarizados con varias opciones para la personalización. Al desarrollar nuestra plantilla con componentes MJML, nos aseguramos de no utilizar propiedades de CSS y etiquetas HTML que no sean soportadas por los principales gestores de correo.
El diseño
Para este ejemplo vamos a crear el newsletter de una pizzería.
El diseño consiste de cuatro secciones:
- Header
- Introducción
- Listado de productos
- Footer con enlaces a redes sociales
Por el bien de este tutorial, vamos a completar el correo electrónico con datos ficticios.
Instalación
La manera más sencilla de empezar con MJML es utilizar línea de comandos. Para instalarlo necesitas tener instalado Node.js en tu máquina, preferiblemente la versión 6.6.0 o superior.
node -v v6.9.5
Ahora abre una ventana del terminal e instala MJML, mediante el comando mjml, tal y como puedes ver a continuación.
npm install -g mjml mjml --version 3.2.0
Si estás utilizando Atom o Sublime Text, hay unos cuantos plugins muy útiles que puedes instalar si quieres.
Trabajando con documentos MJML
MJML funciona con archivos .mjml. Crea un nuevo directorio y añade un fichero llamado template.mjml. Este es el único fichero en el que vamos a trabajar. Contendrá todo el diseño, y todos los estilos. Dado que estamos creando una plantilla de correo electrónico, cualquier dependencia externa (principalmente imágenes) debe incluirse a través de CDN.
Para compilar archivos .mjml a .html, debes abrir un terminal en el directorio de trabajo y ejecutar uno de los siguientes comandos:
# Compilar template.mjml a output.html mjml template.mjml -o output.html # Ver template.mjml y auto-compilr cada cambio mjml -w template.mjml -o index.html
Al igual que HTML, los documentos MJML necesitan un head y un body.
<mjml>
<mj-head>
<mj-attributes>
<mj-all font-family="sans-serif" font-size="16px" color="#626262" />
<mj-button background-color="#F45E43" color="#fff" font-size="14px" />
</mj-attributes>
<mj-style>
.heading {
padding-top: 15px;
text-align: center;
font-style: italic;
font-size: 18px;
font-family: "serif";
}
</mj-style>
</mj-head>
<mj-body>
<mj-container background-color="#eee">
<!-- Content goes here. -->
</mj-container>
</mj-body>
</mjml>
En el mj-head hemos definido algunos estilos por defecto para las fuentes de todos los componentes MJML, así como los estilos para los botones. También hemos añadido algunas reglas CSS, que al ser compiladas serán añadidas inline al documento. Si nunca has trabajado con diseños HTML para correos electrónicos, evita los estilos personalizados ya que muchas propiedades no funcionan como deberían.
En el mj-body estará todo nuestro contenido visible. Hemos empezado con un contenedor y lo hemos pintado de blanco.
Header
Los diseños MJML están hechos de secciones (filas) y columnas. Para el header necesitaremos dos secciones (dos filas), cada una con una columna. La primera tendrá el título del newsletter y la otra mostrará la imagen de una pizza.
<!-- Header Text -->
<mj-section background-color="#fff">
<mj-column>
<mj-text
align="center"
font-style="italic"
font-size="32px"
font-family="serif"
padding-top="40px"
padding-bottom="40px">The Pizza Times</mj-text>
</mj-column>
</mj-section>
<!-- Pizza Image -->
<mj-section
background-url="http://miweb.com/2017/02/images/header-image.jpg"
background-size="cover"
background-repeat="no-repeat">
<mj-column>
<!-- Spacer component, used to give height to the background image. -->
<mj-spacer height="300px" />
</mj-column>
</mj-section>
Como puedes ver, los estilos en MJML se describen es atributos especificos que son muy parecidos a los de CSS normal. Para ver qué propiedades soporta cada componente, echa un vistazo a la documentación de MJML.
Introducción
La segunda parte de nuestra plantilla consta de un encabezado, un par de párrafos, una imagen y botón de llamada a la acción.
<mj-section background-color="#fff">
<mj-column width="450">
<mj-text>
<p class="heading">Hello Friends!<p></mj-text>
<mj-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat.</mj-text>
<!-- The Href attributes turns our image into a link. -->
<mj-image
src="http://miweb.com/2017/02/images/map.jpg"
border-radius="3"
href="#"/>
<mj-text>
Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat.</mj-text>
<mj-button
padding-bottom="25"
href="#">Make Reservation</mj-button>
</mj-column>
</mj-section>
Los componentes Mj-text pueden contener cualquier tag de texto HTML. Lo hemos utilizado para crear el encabezado de Hello Friends, aplicándolo a la clase .heading que hemos definido antes en el <mj-head>
También, en el <mj-head>, hemos definido el estilo para los botones y, como puedes ver, nuestro botón de llamada a la acción ya cuenta con color de fondo.
Listado de productos
Esta sección contiene un diseño responsive de imágenes y texto. Los clientes que soportan el responsive (como Gmail), verán un diseño apilado en pantallas pequeñas, y otro a dos columnnas en pantallas más grandes.
<mj-section
background-color="#fafafa"
padding="0 10px 10px">
<mj-column>
<mj-image
src="http://miweb.com/2017/02/images/pizza.jpg"
padding-left="10px"
padding-right="10px"/>
<mj-image
src="http://miweb.com/2017/02/images/salad.jpg"
padding-left="10px"
padding-right="10px"/>
</mj-column>
<mj-column>
<mj-image
src="http://miweb.com/2017/02/images/cake.jpg"
padding-left="10px"
padding-right="10px"/>
<mj-text
align="center"
font-size="14"
padding-top="15px"
padding-bottom="10px">
<p style="max-width: 400px">Try our selection of Oven-baked Pizza, Fresh Salads, and Homemade Cake.<p></mj-text>
<mj-button
padding-top="0"
padding-bottom="15"
href="#">Order Now</mj-button>
</mj-column>
</mj-section>
El responsive en MJML se lleva a cabo colocando múltiples columnas en una misma sección. En grandes pantallas las columnas compartirán el espacio disponible, mientras que en móvil se verán una encima de otras.
Footer
En el footer vamos a implementra el componente <mj-social> que puede resultar muy útil. Nos permite configurar sin esfuerzo alguno los botones para compartir en redes sociales.
<mj-section background-color="#fff">
<mj-column>
<mj-text
align="center"
font-size="11">The Pizza Times</mj-text>
<mj-social
display="facebook instagram twitter"
font-size="0"
icon-size="16px"
padding="0"
facebook-href="#"
instagram-href="#"
twitter-href="#"/>
</mj-column>
</mj-section>
Y así, el diseño de nuestro newsletter estaría realizado.
Fuente: tutorialzine.com