Tutorial: Crea firmas de correo impactantes con plantillas personalizadas
Aprende a hacer tus propias firmas de correo utilizando plantillas basadas en HTML y SCSS
De seguro más de una vez te han enviado correos impactantes con un diseño impactante y otras más te han enviado esos feos correos (que no demuestran nada de profesionalismo, más cuando te dedicas al desarrollo web) con una imagen incrustada como firma.
He aquí un ejemplo:
La comparación es bastante clara, no hace falta ahondar en detalles, un ganador es la firma hecha con una plantilla.
Ahora que sabemos, nos enfrentamos a un reto, hacer una plantilla para una firma de correo electrónico es sumamente complicado, dado que lo tenemos que hacer en HTML1, para los que sean nuevos en este mundo quizá no estén familiarizados, pero eso quiere decir que todo nuestro layout debe estar hecho en tablas, lo que complica mucho el trabajo.
Pero gracias a nuestros amigos de Zurb con su increíble framework UI podemos crear email impactantes, gracias a que este framework tiene su propia base para la creación de plantillas, puedes checar la documentación en su sitio web:
Foundation for Emails
Primero que nada vamos a instalar esta increíble herramienta, dado que esto es un tutorial lo haremos 100% práctico, al finalizar puedes checar el repositorio en el siguiente enlace:
Instalación de Foundation for Emails y primeros pasos
Instalación
En este caso usaremos la versión basada en SASS, por lo que les recomiendo cierta familiaridad con este gran preprocesador de CSS.
Es importante tener instalado nodejs, podemos utilizar nvm para que sea más fácil hacerlo.
Abrimos nuestro terminal y vamos a escribir lo siguiente, ya sea que utilicemos yarn o npm:
# Con npm
$ npm install -g foundation-cli
# Con yarn
$ yarn global add foundation-cliPrimeros pasos
A continuación, escogemos una carpeta de trabajo y escribimos el siguiente comando:
$ foundation new --framework emailsNos preguntará el nombre de nuestro proyecto, lo escribimos e inmediatamente empezará a instalar las dependencias.
Cuando terminemos de instalar, es necesario acceder a la carpeta del proyecto, en mi caso tutorial-zurb , accedo con terminal e inicializo el servidor:
$ cd tutorial-zurb
$ foundation watchEsto iniciará el servidor e inmediatamente abrirá la dirección: localhost:3000 , esto gracias a gulp y browsersync, tecnologías con las que está desarrollado el framework.
Zurb también pensó en los usos más comunes para esta tecnología, por lo que podremos consultar varias plantillas y darnos cuenta cómo están desarrolladas.
Recordemos que también podemos personalizar estas plantillas si así lo deseamos, o crear las nuestras propias.
Para hacerlo más interesante vamos a hacer el siguiente diseño de plantilla (algo sencillo, pero que nos mostrará lo poderoso de esta herramienta).
Maquetado de email personalizado
Vamos a abrir la carpeta src/pages y eliminar los templates que vienen por default, dejando solo el archivo index.html , lo abrimos y elminamos todo el contenido que se encuentra dentro de<container>...</container> .
Nuestro archivo quedará así:
Recordemos que no nos centraremos en los detalles, solamente vamos a mencionar algunas cosas.
Layout
La etiquetacontainer es en donde toda la magia se hacia, gracias a la fase de precompilado, Foundation for emails nos permite añadir varios contenedores para realizar nuestro código, en este caso, de acuerdo a la estructura de nuestro diseño, vamos a añadir tres contenedores, con sus respectivas clases y eliminaremos lo último, solamente dejando las etiquetas spacer (que por supuesto sirven para hacer espacios) y foundation no los pone bastante descriptivo.
Nuestro código quedará de la siguiente manera.
Recordemos que nuestro servidor estaba corriendo, para asegurarnos que todos los cambios se reflejen vamos a parar el servidor y a correr nuevamente el comando: $ foundation watch , se abrirá el navegador y no veremos nada de contenido, esto es totalmente normal.
Ahora vamos a agregar colores a nuestros contenedores, para esto abrimos el archivo src/assets/scss/_settings.scss y modificamos lo siguiente:
### Si el archivo no se modifica deben de ser las siguientes líneas
28 $white: #fff;...32 $global-gutter: 25px;
33 $body-background: $white;
34 $container-background: $white;
Ahora abrimos src/assets/scss/app.scss , y lo modificamos para que quede de la siguiente forma:
@import 'settings';
@import 'foundation-emails';.container {
&-header {
background-color: $light-gray !important;
}&-content {
background-color: $white !important;
}&-footer {
background-color: $dark-gray !important;
}
}
Ahora, también añadimos nuestras columnas a nuestro index.html y el layout completo, para este caso utilizaremos placeholder images para poder poner las imágenes y así acompletar nuestro layout.
Cabecera
Primero dentro de cada container agregaremos algunos espacios para el caso de la imagen de cabecera y agregaremos abajo los elementos row > columns > center > img , esto permitirá agregar una imagen centrada a la cabecerá, el código para esa parte quedará de la siguiente forma:
<!-- Contenedor para el encabezado -->
<container class="container-header">
<spacer size="50"></spacer>
<row>
<columns>
<center>
<img src="https://placehold.it/150x50?text=logo" alt="image of clever meme that made me chuckle">
</center>
</columns>
</row>
<spacer size="30"></spacer>
</container>Contenido
Para este caso agregaremos dos filas (row) porque tendremos una imagen que abarque todo el espacio y otra que tenga dos imágenes, utilizando las clases responsivas de foundation zurb (te invito a visitar la documentación) podremos añadir a cada elemento columns el atributo small y large , lo que hará totalmente responsivo nuestro template.
También hay que tomar en cuenta que en la primera parte no lo agregué, esto se debe a que por default ocupa 12 columnas cuando no se pone ni el atributo large ni small.
Nuestro código quedará de la siguiente forma para esa parte.
<!-- Contenedor para el contenido principal -->
<spacer size="20"></spacer>
<container class="container-content">
<row>
<columns small="12" large="12">
<center>
<img src="https://placehold.it/600?text=image" alt="Nam vestibulum accumsan nisl.">
</center>
</columns>
</row>
<row>
<columns small="12" large="6">
<center>
<img src="https://placehold.it/300?text=image" alt="Nullam libero mauris, consequat quis, varius et, dictum id, arcu.">
</center>
</columns>
<columns small="12" large="6">
<center>
<img src="https://placehold.it/300?text=image" alt="Etiam laoreet quam sed arcu.">
</center>
</columns>
</row>
</container>
<spacer size="20"></spacer>Pie de página
Este es la más sencilla, por el momento sólo agregaremos el texto.
<!-- Contenedor para el pie de página -->
<container class="container-footer">
<spacer size="20"></spacer>
<row>
<columns>
<row>
<columns>
<p>Pie de página</p>
</columns>
</row>
</columns>
</row>
</container>Nuestro archivo index.html debe quedar al finalizar esta parte como sigue en el ejemplo.
Agregando estilos
Si abrimos nuestro navegador veremos el siguiente resultado:
Solo nos hace falta agregar unos cuantos elementos para que se termine, estos son: texto, el botón antes del pie de página y 4 imágenes que simulen redes sociales, alineados de forma horizontal.
Texto
Primero, vamos a agregar nuestros elementos utilizando un poco de la metodología bem, recordemos que siempre es mejor agregar una fila (row) para así tener más control de nuestro layout, el código quedará de la siguiente forma:
<!-- Texto -->
<row>
<colums>
<p
class="presentation-subtitle margin-bottom--remove text-align--center"
>
Sem et tortor!
</p>
<h4 class="presentation-title text-align--center">
Lectus arcu, bibendum.
</h4>
</colums>
</row>
<spacer size="15"></spacer><!-- Imágenes -->
...
Ahora añadimos los estilos modificando el archivo src/assets/scss/app.scss:
// Clases para presentation
.presentation {
&-title {
color: $black;
}&-subtitle {
color: $dark-gray;
}
}// Clases de utilidad
.text-align {
&--center {
text-align: center;
}
}.margin-bottom--remove {
margin-bottom: 0;
}
Si vemos en nuestro diseño nos falto un pequeño texto en la parte final de nuestras imágenes, lo vamos a agregar con otra columna, añadiendo dentro de nuestra etiqueta p nuestro enlace.
<!-- Texto final -->
<spacer size="10"></spacer>
<row>
<columns>
<p class="paragraph">
Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum.
<a href="">Nisl nunc mi ipsum, faucibus?</a>
</p>
</columns>
</row>Para los estilos solo hace falta agregar una clase .paragraph con color negro y otra en color blanco para el pie de página (de una vez agregamos el estilo).
.paragraph {
color: $black;&--white {
color: $white;
small { color: inherit; }
}
}
Para el pie de página necesitamos agregar la siguiente clase a nuestro texto:
<row>
<columns>
<p class="paragraph--white">
<small>Sed velit dignissim sodales ut eu sem integer.</small>
</p>
</columns>
</row>Este es el resultado final, tanto para estilos app.scsscomo para index.html :
Lista de imágenes para redes sociales
Ahora, vamos a modificar el pie de página, para esto es necesario ir agregar un menú de imágenes centrado, como en un principio mencionamos, gracias a Foundation for Email esto es sumanente sencillo, también agregaremos la clase .social-logo que nos servirá para hacerlo circular como en nuestro diseño.
<!-- Imágenes -->
<row>
<center>
<menu>
<item href="http://zurb.com">
<img class="social-logo" src="https://placehold.it/50x50?text=social"/>
</item>
<item href="http://zurb.com">
<img class="social-logo" src="https://placehold.it/50x50?text=social"/>
</item>
<item href="http://zurb.com">
<img class="social-logo" src="https://placehold.it/50x50?text=social"/>
</item>
</menu>
</center>
<spacer size="15"></spacer>
</row>También añadimos un placeholder para no tener que poner una imagen, es importante recalcar algo, la imagen debe de estar en el tamaño de 50px para así no tener problemas con los estilos. Ahora añadimos los estilos para volver circular nuestra imagen.
// Imágenes
.social-logo {
height: 50px;
border-radius: 25px;
width: 50px;
}Perfecto, si abrimos nuestro navegador en localhost:3000 (recordemos que el servidor se encuentra corriendo y refrescando los cambios gracias a browsersync), veremos el resultado.
Uso de la plantilla en el correo electrónico
Primero que nada, y esto es lo importante, necesitamos compilar nuestro código para que insertemos el html generado en nuestro cliente de correo y así poder usar la plantilla.
Para lograr esto es muy sencillo, en nuestra terminal escribimos el siguiente comando:
$ cd /carpeta-del-proyecto
$ npm run build Esto generará los archivos en una carpeta dist , esos archivos llevarán el nombre de nuestra plantilla, en nuestro caso index.html y ese archivo se puede insertar fácilmente como código en nuestro correo.
Sólo hace falta checar las instrucciones de nuestro cliente de correo para hacerlo.
Les recomiendo el uso de thunderbird.
Conclusión
Ahora solo hace falta que hagas unas cuantas modificaciones a los estilos y al DOM, y puedes hacer todo lo que tu imaginación te permita, de una forma muy sencilla.
Te comparto el código final y el repositorio para que puedas clonar el proyecto.
Estilos
Index.html
Repositorio
Si el artículo te gustó, no olvidas seguirme en todas mis redes sociales.
Gracias.
