Muchos diseñadores web, más específicamente «Frontend Developers», cuando se enfrentan por primera vez a la maquetación de una newsletter o de una plantilla para mailing masivo piensan:
¡Qué sencillo, esto está tirado, me lo quito de encima en 2 horas!
Vaya, pues si estás en esa situación, te adelanto que con alta probabilidad, estarás equivocado. Y ya te adelanto que la mayor parte de plantillas para mailing que puedes encontrar gratuitamente o incluso de pago por la red, contienen errores. Así que lo más recomendable es que la diseñes tú desde 0, puesto que no es nada difícil si sigues esta guía.
Sin ir más lejos, a mí me ocurrió cuando maqueté por primera vez algunas plantillas para empresas importantes, la que más problemas me dio debido al software que usan para lanzar los mailings fue Travel Club, situación que me convirtió en un fanático del perfeccionismo a la hora de maquetar newsletters, y quiero compartir con todos vosotros mi experiencia.
He tratado de crear una guía que resulte definitiva, segmentando el contenido en 4 puntos:
1. Estructura HTML
Lo principal y la primera premisa a tener en cuenta es diseñar la newsletter con tablas aninadas.
No uses el diseño por capas <div.. y si puedes, trata de evitar también la etiqueta <p>, a ver, pueden usarse, pero si las usas, Outlook obviará los estilos padding y width, lo que casi seguro desmaquetará tu diseño para este cliente de correo que no usarán pocos receptores. Si conoces bien a tu target y no usan Outlook, podrás usar estas etiquetas sin problemas.
Para evitar la etiqueta <p> te aconsejo dar saltos de línea dentro de una misma columna con la etiqueta <br/> que dejará un espacio igual al line-height que hayas marcado para dicha columna, fila, tabla, body o el line-height por defecto si no has señalado ninguno.
Es más que recomendable que establezcas el ancho o width de cada columna dentro de cada fila.
Establece un width máximo para tu creatividad, lo más recomendable son 600px, pero esto va cambiando con el tiempo, así que prueba con diferentes anchos y piensa en realizar una plantilla responsive usando MediaQueries para mejorar su visualización en móviles.
Procura evitar también las etiquetas <style>, <embed>, <link>, <video>, <canvas> y <audio>.
A continuación he creado una plantilla básica a modo de ejemplo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mi Plantilla para Mailing</title>
</head>
<body>
<!-- Tú código comienza aquí -->
<table bgcolor="eligecolor" cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td width="300"></td>
<td width="300"></td>
</tr>
</table>
<!-- Tú código termina aquí, repite esta estructura para cada sección -->
</body>
</html>
2. Dando estilo, el código CSS
Aquí se encuentra el verdadero secreto para evitar errores en el diseño de vuestras newsletters y por ese motivo voy a ahondar en detalle para evitar que nada nos fastidie nuestro trabajo.
No hará falta que os diga que todo el código css debe estar contenido inline, formando parte de cada tabla, fila y/o columna, no debemos incluirlo entre etiquetas <style></style>, sino que debemos incluirlo de esta manera <td style=»…;»>
Existen muchas etiquetas que no son soportadas por todos los clientes de correo, razón por la que lo mejor que puedo compartir para explicar que css admiten los clientes de correo más usados, es este enlace de Campaign Monitor, donde comparten información fidedigna, de una manera muy visual y puesta al día sobre los atributos css admitidos por los diferentes clientes de correo.
Como información adicional al enlace anterior, enumero a continuación algunos consejos adicionales:
- No incluyas imágenes de fondo, no son soportadas por Outlook.
- No uses tamaños de letra inferiores a 13px, si lo haces este tamaño de letra será reescalado en Apple Mail y desmaquetará tu precioso trabajo en estos dispositivos.
- No uses estilos en cascada, o atributos css reducidos, usa siempre el atributo completo, como por ejemplo «font-family» en vez de «font».
- No uses elementos flotantes, pues tendrás problemas con Gmail y Outlook.
- Cuidado con los atributos margin en gmail, trata de evitarlos, puedes usar imágenes transparentes en formato .gif para usar como márgenes o separadores.
- Si quieres un background-color personalizado, crea una tabla principal con un atributo width=100% y otro con el color de fondo deseado que contenga toda la creatividad, puesto que el atributo background en en cuerpo del mensaje no es admitido por Outlook.
3. Las imágenes
En esta sección te informo sobre todo lo que concierne al uso de imágenes en una newsletter, espero no dejarme nada porque lo veo bastante importante.
Como la mayoría de buzones de correo bloquearán tus imágenes hasta que el usuario no pulse la opción «Mostrar imágenes», el consejo principal que puedo darte y que es imprescindible siempre, digo siempre, es usar el atributo alt, pues será lo único que se muestre hasta que el lector no pulse el botón mencionado.
Además de este tip básico, te recomiendo:
- Usa el atributo display:block para evitar su desmaquetación en algunos gestores de correo.
- Añade a las etiquetas <img> de tus imágenes los atributos vspace=»» y hspace=»» para crear espacio horizontal y vertical si ésta no está contenida en una celda.
- Los GIF animados no funcionan en Outlook, en su defecto se muestra únicamente el primer fotograma.
- Define siempre los atributos width y height de las imágenes, ya sea con valores absolutos (px) o relativos (%).
- Usa más texto que imágenes, si utilizas exclusivamente imágenes en tu creatividad, reducirás sustancialmente la entregabilidad de tu campaña de mailing.
- Puedes usar atributos para dar estilo al texto alt en tu etiqueta img, así que sé libre de hacerlo si quieres.
- Usa principalmente imágenes .gif y .jpg en vez de .png o .tiff, si prevés que tu target podría usar navegadores antiguos.
4. Otras consideraciones a tener en cuenta
- Evita usar atributos colspan y rowspan en la maquetación de tablas, ya que son incompatibles con algunos clientes de correo (Outlook 2007 por ej.).
- No incluir código javascript.
- Usa fuentes universales, si usas una fuente que no esté instalada en el ordenador del lector, ésta será sustituida.
- No enlazar ficheros externos tipo word, pdf o cualquier fichero ejecutable para evitar que tu mail vaya directo a la lista de spam.
- Crea una versión online del mail e incluye un enlace en el mailing.
- No uses palabras típicas de correos basura para evitar ser clasificado como spam, como por ejemplo gratis, free, ahora, now, click here, clic aquí, etc…
- Acuérdate de poner siempre un enlace al pie del mail para dar la opción al lector de eliminar su cuenta de la suscripción de la newsletter (está regulado legalmente tanto en Europa como en EE.UU).
- Crea una landing page, ya que no debes usar formularios, por seguridad algunos clientes de correo los elimina, mejor incluye una llamada a la acción con un enlace a una landing page.
- Puedes introducir emojis en el asunto del email sin riesgo a ser penalizado, así que si te gustan, no te cortes. Para ello, he encontrado esta página que contiene una buena cantidad de ellos organizados por categorías.
- Checkea y valida tu html antes de enviar tu mail, para ello puedes usar esta herramienta, es gratuita.
- Antes de enviar tu campaña, haz un envío de prueba para testear como se verá en diferentes clientes de correo.
Gracias por el artículo, buenos datos. Justamente empecé a trabajar hace muy poco con newsletter y desconocía todo esto.
Qué fastidio hacer todo con tablas…. me siento que hemos vuelto a la prehistoria. Pero bueno, al parecer no queda otra más q hacerlo de esa forma…
Ojalá cambie pronto…
Saludos y gracias por compartir tu experiencia en este artículo! =)
Muchas gracias Diego. Es un placer servir de ayuda. Un saludo.
Dani, muy buenas tus recomendaciones. Nunca maquete mailing y estoy empezando. Podrias dejarme tu email para consultas si no es mucha molestia? Soy Cristian de Buenos Aires, Argentina. Muchas gracias!
Mis disculpas, tengo esto abandonado, en un futuro me pondré con cositas más curiosas, hasta entonces, si queréis podéis contactarme por Linkedin que lo uso más y os respondo, prometido!!
Muchas gracias por el artículo. Me ha resultado de gran ayuda. Una preguntilla… un cliente me pide que le maquete un mailing de este tipo pero no se cuánto puedo facturar por esto, me podrías orientar? Te lo agradecería mucho…
Mis disculpas, tengo esto abandonado, en un futuro me pondré con cositas más curiosas, hasta entonces, si queréis podéis contactarme por Linkedin que lo uso más y os respondo, prometido!!
Muy interesante todo loq ue hay que tener en cuenta.
Gif animados no funciona en Yahoo, si en Gmail, Hotmail (outlook live) y Outlook corporativo.
Antes se utilizaba https://www.email-standards.org/ para probar con varios gestores de correo ? Alguna otra página de testing ?
Gracias
Hola Kiquenet, gracias, la mejor herramienta que conozco de testing es Litmus https://www.litmus.com/
Tremendo artículo, muchas gracias por los detalles que no todos los autores saben transmitir. Tiene algunos años de haberse escrito, sin embargo aún está actualizado. Cómo te encuentro por Linkedin?