Técnicas para maquetar plantillas de email

 

Una plantilla de correo es un diseño estructurado con HTML que requiere una técnica especial para garantizar una buena visualización en los clientes de correo electrónico.

Si te dedicas al diseño web, es común que pienses que maquetar un email debe ser pan comido. Piensas en utilizar HTML5, unas cuantas animaciones para hacerlo interesante y que de seguro se verá bellísimo en Gmail y Outlook por igual. ¡ERROR!

Lamento destruir tus ilusiones, pero una plantilla HTML para emails no cuenta con todas esas ventajas. Se tiene que construir con la versión 4 de HTML y usar miles de trucos y hacks en CSS para garantizar que se vea bien en Gmail, Yahoo y especialmente Outlook (es el más problemático de todos).

Pero, como seguro quieres aprender, acá te muestro las 3 técnicas que sirven para maquetar emails con HTML.

 

Técnica 1: Spacer GIF

Consiste en rellenar los espacios vacíos con una imagen .gif transparente de 1×1 px de ancho. El objetivo es mantener todas las secciones con una medida exacta y separarlas de las que si tienen texto o imágenes.

Es una técnica obsoleta, creada inicialmente para maquetar páginas web antes de la aparición de CSS. Sin embargo, se mantuvo durante mucho tiempo para emails ya que los clientes de correo, como Outlook no soportaban el padding o el margin.

Por ejemplo: si la imagen de un producto mide 350px, y debe estar centrado, lo que se hace es poner un gif spacer de 125px en el lado izquierdo y otro en el derecho. Así garantizamos que la plantilla no supere el ancho máximo de 600 px.

En la actualidad la mayoría de los maquetadores preferimos usar padding para separar secciones, sin embargo, es importante conocer esta técnica ya que en ocasiones la utilizamos para estructuras muy complejas. Por ejemplo, secciones de colores desnivelados, como en esta plantilla:

See the Pen
Email Template – Spacer Gif – Beauty
by Liz Sojo (@lizgabriela230)
on CodePen.

 

 

Técnica 2: Encapsulado Div

Consiste en encapsular las tablas que conforman la estructura dentro de un elemento div. Un claro ejemplo de este código es el HTML que obtienes con el framerwork MJML.io.

La idea principal es usar los div, que son elementos más flexibles que las tablas, para definir el ancho usando porcentajes. De esta manera se garantiza que la sección mantenga un ancho fluido adaptable en pantallas de menor tamaño.

Por ejemplo: tenemos una plantilla con un encabezado de 100% y dos columnas de 50% cada una. Como puedes ver en la imagen, cada una mantiene su ancho en pantallas pequeñas. Eso, porque sin importar su contenido en las tablas, el div es el que establece su anchura.

See the Pen
Email Template – Div Encapsulation – MJML Framerwork
by Liz Sojo (@lizgabriela230)
on CodePen.


 

Tecnica 3: Exacta

Tablas y más tablas, es la clásica, más segura y mi favorita. Consiste en maquetar la totalidad de la estructura con tablas y columas (td) y filas (tr). Es la técnica más extendida entre los maquetadores; incluso si, comparada con la técnica anterior, es menos flexible para experimentar con 3 o más columnas de contenido.

Sigue siendo considerada la mejor técnica ya que garantiza compatibilidad con clientes de correo problemáticos como Outlook en su versión de escritorio.

Lo importante es siempre realizar pruebas de visualización, con Litmus, por ejemplo. Y también capacitarnos continuamente en CSS para descubrir nuestros trucos y hacks.

Por otro lado, esta técnica es muy recomendada porque sirve para crear plantillas editables y reusables en Mailchimp o Klaviyo.

See the Pen
Email Template – Only Tables – Editable for Mailchimp
by Liz Sojo (@lizgabriela230)
on CodePen.

 

Si nunca has maquetado un email te recomiendo leerte las buenas prácticas para maquetar emails, como lectura complementaria.