Diseño de firma de correo: banners de 600×200 que pesan poco

Un buen diseño de firma de correo es sobre todo contención: tu nombre, cargo y una o dos formas de contactarte como texto real, y luego un pequeño banner de 600×200 píxeles que lleve tu marca. Mantén el banner ligero, enlázalo a una sola página y nunca pongas tu teléfono o correo solo dentro de la imagen, porque muchas bandejas ocultan las imágenes hasta que el lector dice lo contrario.

Qué debe llevar una firma de correo

Una firma tiene dos trabajos: decir a la gente quién eres y cómo contactarte, y recordarle a qué te dedicas. El primero es texto. El segundo puede ser un banner. Todo lo demás es ruido que la gente aprende a saltarse.

Tamaño y peso del banner de la firma de correo

Diseña el banner a 600×200 píxeles, una franja 3:1. Seiscientos píxeles es el ancho en torno al que se construyen las plantillas de correo clásicas, así que un banner de ese tamaño cabe en la app de correo del móvil y en el panel de lectura de escritorio sin escalarse. Para pantallas de alta densidad, exporta el mismo diseño al doble de tamaño, 1200×400, e indica al correo que lo muestre a 600 píxeles de ancho.

El peso importa más de lo que parece, porque la imagen viaja con cada respuesta de un hilo largo. Procura que el archivo quede muy por debajo de 100 KB. Un banner con degradado se exporta de maravilla como JPEG de alta calidad; usa PNG solo cuando necesites transparencia o rotulación muy fina. Si también haces una newsletter, la guía de diseño de cabeceras de correo trata el formato mayor.

Diseñar el banner

Un banner que se ve cien veces por semana debe decir una sola cosa y decirla con calma. Funciona mejor como una promoción discreta: tu próximo evento, un servicio nuevo, un enlace de reservas o simplemente el aspecto de tu marca con una línea corta. Cambia las palabras con la temporada; conserva el fondo.

El modo oscuro es una trampa real. Algunas apps de correo invierten o tiñen los colores claros, así que un logotipo sobre fondo transparente puede desaparecer en una bandeja oscura. Un banner con su propio fondo completo, como un degradado rico, se ve igual en ambos modos. El diseño para modo oscuro y los degradados en el correo profundizan en cómo tratan el color los clientes.

HTML para una firma de correo que aguante

Los clientes de correo son anticuados con la maquetación, así que las firmas se construyen con tablas sencillas y estilos en línea. Esta funciona en los clientes habituales: pégala en un archivo HTML, ábrelo en un navegador, selecciónalo todo y cópialo en los ajustes de firma de tu app de correo.

<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, Helvetica, sans-serif; color: #1f2937;">
  <tr>
    <td style="padding-bottom: 8px;">
      <strong style="font-size: 15px;">Maya Okafor</strong><br>
      <span style="font-size: 13px;">Founder, Studio Alder</span><br>
      <a href="https://example.com/book" style="font-size: 13px; color: #1f2937;">Book a call</a>
      &middot;
      <a href="https://example.com" style="font-size: 13px; color: #1f2937;">example.com</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="https://example.com/weddings">
        <img src="https://example.com/email/banner-1200x400.jpg"
             width="600" height="200" alt="Studio Alder: now booking spring weddings"
             style="display: block; border: 0; max-width: 100%; height: auto;">
      </a>
    </td>
  </tr>
</table>

Configurar tu firma, paso a paso

1. 1

   Escribe el bloque de texto

   Nombre, cargo y empresa, un enlace para actuar, tu sitio web. Léelo en voz alta; quita lo que no dirías.

2. 2

   Diseña el banner a 600×200

   Usa el fondo de tu marca y una línea corta. Mantén las palabras en el medio, con espacio en ambos extremos.

3. 3

   Exporta a 1200×400

   Un JPEG de alta calidad para degradados y fotos, PNG para transparencia. Comprueba que el archivo pese menos de 100 KB.

4. 4

   Súbelo a tu sitio web

   Colócalo en una carpeta estable como /email/, para que la dirección no cambie nunca y los correos antiguos conserven su banner.

5. 5

   Crea y pega el HTML

   Adapta el código de arriba, fija el ancho en 600, escribe un texto alternativo de verdad y pégalo en tu app de correo.

6. 6

   Pruébalo bien

   Envíalo a una dirección de Gmail y a una de Outlook, ábrelo en un móvil, activa y desactiva el modo oscuro y responde dos veces al hilo.

Mantener coherentes las firmas de un equipo

Las firmas se desvían: una persona añade una cita, otra usa el logotipo del año pasado. Da al equipo una plantilla HTML y un banner, y cambia el banner de forma centralizada cuando cambie el mensaje. La misma disciplina descrita en la coherencia de marca se aplica aquí, a menor escala.

Gradiently tiene un tamaño Firma de correo de 600×200 listo en el Studio, y un tamaño personalizado de 1200×400 cubre la exportación de alta densidad. Las exportaciones gratuitas llevan una pequeña marca de agua, así que un banner limpio requiere Pro, que además incluye el kit de marca: logotipo, colores y tipografías en un solo lugar. El Mark que hay tras el banner es el mismo de tus publicaciones sociales y de tus tarjetas de visita, así que una respuesta en la bandeja de alguien se ve inconfundiblemente como el resto de tu marca.