Guía para el diseño de emails

A la hora de realizar una plantilla de email, ya sea para una newsletter o para una campaña de email marketing, son muchos los elementos a tener en cuenta para alcanzar los objetivos marcados. Por eso, seguro que los compañeros en la fase de definición ya habrán determinado la conveniencia o no de incluir imágenes, vídeos, botones de llamada a la acción o cualquier otro elemento que se nos ocurra.

Por supuesto que eso daría para hablar mucho sobre el tema, pero no es en lo que nos queremos centrar ahora; porque en este artículo os compartimos nuestra guía para ayudarnos a la hora de enfrentarnos al diseño de un email.

Gmail vs Mailchimp como gestor

Lo primero que hay que tener en cuenta es dónde se va a utilizar la plantilla, ya que nos marcará la forma de abordar el diseño. Aunque, lógicamente, existen muchísimas más alternativas para realizar el envío de correos electrónicos, aquí recogemos dos de las más comunes:

Mailchimp. Probablemente es la plataforma de gestión de campañas más utilizada a día de hoy en todo el mundo. Además de realizar múltiples segmentaciones, facilita el poder asociar distintos emails en una campaña. En el caso que nos ocupa, el diseño de las plantillas, tiene su propio constructor de diseños por bloques y permite utilizar plantillas de MJML, un builder que usan frecuentemente los maquetas para hacer emails (tiene una opción de previsualizar los cambios instantáneamente). Además, los informes de Mailchimp nos facilitan información interesante sobre quiénes abren los emails, cuánta gente en el botón principal o si se ha desactivado la newsletter.

Gmail. En este caso todo lo anterior no es tan automático como en Mailchimp. Además no existen plantillas y no se pueden crear campañas ni informes sobre los emails enviados.

Nosotros tenemos un claro ganador, Mailchimp ;)

Elementos de la plantilla

Estructura

Clave a la hora de diseñar una plantilla: se construye con tablas, como una hoja de cálculo. Algo que no podemos perder de vista a la forma de componer el diseño.

Fuentes tipográficas

Aquí afecta especialmente el gestor en el que se va a utilizar la plantilla y, por ejemplo, en el caso de Gmail es una complicación añadida.

Por eso, lo más recomendable es:

1. Utilizar una fuente de sistema (así evitamos problemas de renderizado con Gmail, Outlook, etc.). os compartimos el siguiente enlace dónde se recogen los stacks básicos: CSS Font Stack.
2. Utilizar una Google font + una fuente de sistema como alternativa. ⚠️ La fuente de sistema mantendrá las misma especificaciones que la fuente principal, en términos de peso, interletrado, interlineado, etc.

Fondos

En este caso, hay total libertad para añadir el número de fondos de color que queramos, puesto que a nivel de maqueta, por cada fondo se crea una tabla.

Alineación de los textos

También tenemos aquí libertad absoluta; entre diferentes anchos de pantalla, lo importante es que la posición de los textos sea respecto a un mismo % del ancho del diseño de email.

Una recomendación cuando no tenemos demasiado tiempo para dedicarle a la plantilla, es alinear todos los textos iguales.

Utilizamos en este caso como ejemplo una cruceta:

Para incorporarla debemos exportar una imagen sin fondo con las 6 crucetas. Posteriormente el fondo se añadirá por CSS.

Imágenes

Debemos utilizar los formatos .png o .gif.

Con respecto a su posición volvemos a tener total libertad, pueden ser full-width o asignarles un % del email/ancho específico.

Botones

Los botones con corner-radius se pueden implementar, pero teniendo en cuenta que en versiones antiguas de Outlook sobre Windows un porcentaje pequeño lo verá cuadrado. Mientras, el outline podemos implementarlo sin ningún problema.

Wrapper vs Content

• Wrapper: todo el área del email, incluyendo los márgenes laterales. Puede tener un único color de fondo.
• Content: el ancho estándar es 600px. El color de fondo del wrapper y del content pueden ser diferentes.

Diseño responsive

• El builder MJML permite adaptar el diseño a responsive. Aunque con algunas restricciones:

  • No se permiten escalas tipográficas.
  • La posición de los elementos puede variar entre tamaños grandes y pequeños de pantalla. Lo recomendable es que la posición de los elementos se establezca respecto a un mismo % del ancho del diseño de email.

• Dark mode y cómo afecta a los diseños de email. Hay que tener en cuenta cómo puede afectar a nuestros diseños el hecho de que un usuario tenga su dispositivo con modo Dark activado. En términos de diseño, es necesario optimizar logos e imágenes para que funcionen tanto en light como dark mode, es decir, añade un borde translúcido a PNGs con fondos transparentes. En este artículo, Alice Li explica de manera muy clara los emails en dark mode.

Esperamos que esta guía que hemos creado para nuestro equipo de Redradix, os ayude y os facilite el trabajo la próxima vez que os toque enfrentaros al diseño de un email.