Banner de firma de correo: formatos, peso y buenas prácticas

El banner es el elemento de una firma que lleva un mensaje temporal: un evento, una contratación, una novedad. Sus restricciones técnicas se parecen a las del logotipo, pero sus restricciones de diseño son las de un soporte publicitario visto durante un segundo.

Las dimensiones

El ancho del banner está limitado por el de la firma, que a su vez lo está por las pantallas móviles.

Un banner más alto invade el mensaje y da la impresión de un recuadro publicitario. Un banner más estrecho que la firma crea un desajuste visual poco elegante: alinea su ancho con el del bloque.

Igual que con el logotipo, la exportación se hace al doble —1200 × 200 px para una visualización a 600 × 100— con las dimensiones en los atributos HTML width y height; de lo contrario, Outlook muestra la imagen a su tamaño nativo. El detalle está en firma de correo en HTML.

El peso

Mantente por debajo de 60 KB para un banner estático y de 150 KB para un GIF animado.

Lo que está en juego no es el ancho de banda sino el resultado percibido. Las imágenes de un correo se cargan después del texto: un banner pesado aparece tarde y el destinatario ve primero un marco vacío bajo la firma. La impresión es la de un mensaje mal construido.

Una compresión PNG sin pérdida suele dividir el peso por dos sin diferencia visible. Para un elemento fotográfico, el JPEG con calidad 80 es un buen compromiso.

Las reglas de diseño

Un solo mensaje. Es la regla que más se incumple. Un banner que anuncia una feria y un informe y una contratación no transmite ninguno. Si tienes tres mensajes, haz tres campañas sucesivas.

Un titular corto. De cinco a ocho palabras. Al tamaño real de visualización —a menudo reducido por el cliente de correo— un titular largo se vuelve ilegible.

Una acción explícita. «Inscribirse», «Ver ofertas», «Descargar el informe». La etiqueta debe decir qué pasa al pulsar.

Contraste suficiente. El banner se ve en un segundo, a veces en la pantalla de un teléfono al aire libre. Texto oscuro sobre fondo claro, o al revés, pero nada de gris sobre gris.

Espacio alrededor del texto. Un margen interior de al menos 16 px. Un texto pegado al borde parece accidental.

La zona clicable

Todo el banner debe ser clicable, no solo la zona que parece un botón. Es una imagen envuelta en un enlace:

<a href="https://ejemplo.es/feria" style="display:block;text-decoration:none">
  <img src="https://cdn.ejemplo.es/banner@2x.png"
       width="600" height="100"
       alt="Feria Vivatech — Pabellón 2, estand B34. Reservar una cita."
       style="display:block;border:0;width:600px;height:100px" />
</a>

Dos detalles importan. El atributo alt debe describir el mensaje y la acción: es lo que verá un destinatario cuyo cliente bloquea las imágenes y lo que leerá un lector de pantalla. Y border:0 elimina el borde azul que algunos clientes añaden alrededor de una imagen enlazada.

Conviene saberlo: usa una URL de destino rastreable, distinta por campaña. Sin eso no podrás atribuir el tráfico al banner correcto: ver medir el ROI.

El caso de la animación

Un GIF animado atrae más la vista, pero algunas versiones de Outlook solo muestran su primer fotograma. La regla que se deriva es absoluta: el mensaje esencial debe estar en el primer fotograma, y la animación solo debe enriquecerlo.

El tema, incluidas las cuestiones de peso y de número de bucles, se trata en banner animado en una firma.

Lo que distingue un buen banner de un buen anuncio

Merece la pena subrayar una diferencia de registro. El banner aparece bajo la firma de una persona, en un mensaje profesional dirigido a alguien que la conoce. Un tono publicitario marcado desentona ahí y repercute en quien lo envía.

Los banners que mejor funcionan se parecen menos a un anuncio que a una información útil: una fecha de feria, un puesto abierto, un informe disponible. El catálogo de formatos estacionales está en 12 ideas de campañas, y el marco general del canal en marketing con firma de correo.

Por último, comprueba el resultado antes de difundir. Un banner perfecto en una herramienta de diseño puede aparecer recortado o redimensionado en un cliente de correo: la vista previa multicliente del editor evita la mala sorpresa después de enviarlo a trescientas personas.