La versión corta
- Una imagen de cabecera de email estándar mide 1200 por 600 píxeles y se muestra a 600 píxeles de ancho para que se vea nítida en pantallas de alta densidad.
- La compatibilidad con los degradados CSS varía entre clientes de correo, así que una cabecera con degradado suele ser una imagen, con un color de fondo liso como reserva.
- Algunos clientes de correo bloquean las imágenes por defecto, así que toda cabecera necesita un texto alternativo descriptivo y un color de fondo detrás.
- El modo oscuro puede cambiar los colores alrededor de una cabecera pero normalmente no dentro de la imagen, así que diseña las cabeceras con su propio fondo y pruébalas en ambos modos.
- Pon las palabras importantes, como ofertas, fechas y llamadas a la acción, en texto HTML real bajo la cabecera, no solo dentro de la imagen.
En esta página
Un buen diseño de cabecera de email empieza por las limitaciones de la bandeja de entrada. Haz la imagen de la cabecera de 1200 por 600 píxeles y muéstrala a 600 píxeles de ancho, para que se vea nítida en pantallas de alta densidad. Como los clientes de correo tratan los degradados CSS de forma irregular, pon el degradado dentro de la imagen y fija detrás un color de fondo liso a juego. Añade un texto alternativo descriptivo para quienes tienen las imágenes desactivadas, compruébalo en modo oscuro y deja las palabras importantes como texto real bajo la imagen.
Esta guía cubre los tamaños, la imagen frente a CSS, el modo oscuro, el peso y el texto alternativo, con HTML que puedes adaptar. Para el lado técnico de los degradados en el correo HTML, mira degradados en el correo.
Tamaño de la cabecera de email
La mayoría de las composiciones de email rondan los 600 píxeles de ancho, una medida que cabe con comodidad en los paneles de lectura de escritorio y se reduce bien en los móviles. Exporta las cabeceras al doble, 1200 por 600, y fija el ancho de la imagen a 600 en el HTML. La forma 2:1 deja espacio para un titular corto o un logotipo sin empujar el contenido por debajo del pliegue en los móviles.
Cabecera de email 1200×600
1200 × 600
Firma de email 600×200
600 × 200
Banner de blog 1200×600
1200 × 600
Imagen o CSS: cómo construir una cabecera de email con degradado
En la web, un degradado es una línea de CSS. En el correo es menos fiable: algunos clientes muestran background-image: linear-gradient(...) y otros lo ignoran. Las opciones prácticas están abajo.
| Enfoque | Cómo funciona | Contrapartida |
|---|---|---|
| Cabecera de imagen | El degradado y cualquier ilustración incorporados en una imagen de 1200×600 | Se ve igual en todas partes donde cargan las imágenes; las palabras dentro desaparecen con las imágenes desactivadas |
| Degradado CSS y texto real | Una celda de tabla con fondo degradado y texto HTML encima | Ligera y accesible; vuelve a un color liso donde no se admiten degradados |
| Híbrida | Una imagen degradada para el ambiente, texto real para el mensaje debajo o sobre un fondo liso de reserva | La más robusta: siempre legible, normalmente bonita |
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" bgcolor="#2a1b6b"
style="background-color:#2a1b6b; background-image:linear-gradient(135deg,#2a1b6b,#7c3aed);">
<img src="https://example.com/header-1200x600.jpg"
width="600" height="300"
alt="Autumn edit: new colours for the season"
style="display:block; width:100%; max-width:600px; height:auto; border:0;
color:#ffffff; font-family:Arial, sans-serif; font-size:20px;">
</td>
</tr>
<tr>
<td style="padding:24px; font-family:Arial, sans-serif; font-size:18px; line-height:1.5; color:#1c1733;">
Our autumn colours are here. See the new range this weekend.
</td>
</tr>
</table>Diseñar cabeceras de email para el modo oscuro
En modo oscuro, muchas apps de correo cambian los colores del email alrededor de tu cabecera: los fondos blancos pueden volverse oscuros y el texto oscuro, claro. Las imágenes normalmente se dejan como están. Eso crea dos problemas clásicos: una cabecera con fondo blanco que brilla como una caja de luz en una bandeja oscura, y un logotipo transparente con tinta oscura que desaparece sobre un fondo recién oscurecido.
Evita
- Cabeceras con un fondo blanco puro
- Logotipos PNG transparentes con tinta oscura
- Palabras importantes solo dentro de la imagen
- Texto claro y fino sobre un degradado pálido
Haz
- Una cabecera con su propio fondo medio o profundo
- Logotipos sobre una forma lisa, o una versión clara y otra oscura
- El mensaje repetido como texto real
- Un contraste fuerte dentro de la propia imagen
Los degradados de tono medio a profundo como estos son la opción más segura. No deslumbran en una bandeja oscura, y el texto blanco dentro de ellos sigue siendo legible en ambos modos. Diseño para modo oscuro cubre los principios más amplios.
Peso, texto alternativo y las palabras que importan
Mantén ligeras las imágenes de cabecera: exporta en JPEG para degradados fotográficos o con grano y en PNG para gráficos lisos con texto, y comprímelas. Los degradados grandes y suaves pueden generar bandas si se comprimen con fuerza, y un poco de grano en el diseño les ayuda a sobrevivir; mira bandas en degradados.
Escribe un texto alternativo que diga lo que dice la cabecera, no cómo se ve: Selección de otoño: colores nuevos para la temporada, no banner morado. Da estilo a las propiedades de fuente de la imagen para que el texto alternativo aparezca con un tamaño y un color legibles sobre el fondo de reserva cuando las imágenes están desactivadas.
Una cabecera de boletín a 1200 por 600: cabecera, número de edición y una línea.
Una cabecera de anuncio: el mensaje es lo bastante corto para repetirlo como texto real debajo.
Lista de comprobación de la cabecera de email
- 1
Diseña a 1200 por 600
Muéstrala a 600 de ancho. Mantén las palabras lo bastante grandes para leerse en un móvil a ese tamaño.
- 2
Dale su propio fondo
Sin blanco puro y sin transparencia en los bordes, para que el modo oscuro no pueda convertirla en una caja de luz.
- 3
Fija un color de reserva
Un
bgcoloren la celda con un color del degradado, para que las imágenes bloqueadas sigan viéndose de marca. - 4
Escribe un texto alternativo de verdad
El mensaje, no una descripción de la imagen.
- 5
Repite el mensaje como texto real
Fechas, ofertas y llamadas a la acción como texto HTML bajo la cabecera.
- 6
Prueba en ambos modos
Envía emails de prueba a las apps que usan tus lectores, en modo claro y oscuro, con las imágenes activadas y desactivadas.
En Gradiently, los tamaños de cabecera de email (1200 por 600) y de firma (600 por 200) vienen incluidos, y copiar a tamaños convierte una publicación social terminada en una cabecera a juego para tu email del día de lanzamiento.
Preguntas frecuentes
¿Qué tamaño debe tener una cabecera de email?
1200 por 600 píxeles, mostrada a 600 píxeles de ancho en el HTML del email. La doble resolución la mantiene nítida en pantallas de alta densidad.
¿Funcionan los degradados CSS en el email?
En algunos clientes de correo, no en todos. Pon el degradado en una imagen o usa CSS con un bgcolor liso de reserva, y prueba en las apps que usan tus lectores.
¿Cómo hago que una cabecera de email funcione en modo oscuro?
Dale a la cabecera su propio fondo medio o profundo en lugar de blanco o transparente, mantén un contraste fuerte dentro de la imagen y repite las palabras importantes como texto real.
¿Qué debe decir el texto alternativo de una cabecera de email?
Lo que dice la cabecera, como el titular o la oferta, para que quienes tienen las imágenes bloqueadas reciban igualmente el mensaje.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
