Vista previa de la bandeja de entrada
Antes de que alguien abra tu correo, todo lo que ve es una línea en una lista: de quién es, el asunto y unas pocas palabras en gris. Escribe los tuyos y mira cómo los muestran siete diseños de bandeja de entrada, y dónde los cortan.
Las palabras grises que aparecen después del asunto o debajo. Déjalo vacío para ver qué muestra la bandeja de entrada cuando un mensaje no lo tiene.
El primer texto visible del correo, de arriba abajo, incluido un enlace de "ver en el navegador" o las descripciones de imágenes. Los clientes de correo lo usan cuando falta el texto de vista previa o es demasiado corto.
Tu navegador dibuja la vista previa mientras escribes. Nada de lo que escribes aquí se nos envía ni se guarda.
En la bandeja de entrada
Siete filas de bandeja de entrada redibujadas en HTML con anchos habituales, mostradas como un mensaje no leído. Son aproximaciones cercanas: el corte real cambia con el ancho de la ventana, la densidad, el tamaño de letra y las fuentes instaladas en el dispositivo. El número de caracteres se mide sobre estos dibujos.
Qué debes mirar
Preheader oculto para pegar
Pon este bloque al principio de <body>, antes de cualquier otro texto. El div es invisible en el mensaje abierto, pero las listas de la bandeja de entrada lo leen porque es el primer texto del HTML. La larga serie de ‌ después de tu frase es el relleno: caracteres de ancho cero y en blanco que ocupan el resto del área de vista previa, para que el cliente no tenga espacio para añadir "Ver este correo en tu navegador" o un enlace de menú.
Las tres partes de una fila de la bandeja
Una bandeja de entrada es una lista de filas, y cada fila se construye con las mismas tres piezas del mensaje.
- Nombre del remitente
- El nombre visible en la cabecera
From, la parte anterior a la dirección:From: Harbor Books <orders@harborbooks.example>. Suele ir primero o en negrita, y es por lo que la gente decide si te conoce. - Asunto
- La cabecera
Subject. Una sola línea en todos los diseños, cortada con puntos suspensivos cuando se queda sin espacio. - Texto de vista previa
- Este no es una cabecera en absoluto. El cliente de correo lee el inicio del cuerpo del mensaje y muestra las primeras palabras que encuentra. Cuando los especialistas en marketing ponen ahí una frase a propósito, la llaman preheader.
Los dos primeros los controlas directamente. El tercero solo lo controlas decidiendo cuál es el primer texto de tu HTML.
El corte depende del ancho, no del número de caracteres
Seguramente has leído que los asuntos deben tener menos de 50 caracteres. Es una regla práctica, porque ningún cliente de correo cuenta caracteres. Cada uno da al asunto una caja de cierto ancho y deja que el texto se desborde. Una fila de letras estrechas cabe más que una fila de mayúsculas. “illicit little fib” ocupa mucho menos en pantalla que “WWW MMM SUMMER”, y los dos tienen más o menos el mismo número de caracteres.
Esta página funciona igual. Cada maqueta es un diseño HTML real con un ancho típico, con las fuentes que pide ese cliente, y el navegador corta el texto como lo haría el cliente. Luego el script mide cuántos de tus caracteres sobrevivieron. Toma los números como aproximados, porque tu lector puede tener un tamaño de letra mayor, una ventana más estrecha o un dispositivo sin esa fuente.
| Diseño | Cómo se construye la fila |
|---|---|
| Gmail y Yahoo Mail en un navegador de escritorio | Una línea. Una columna fija para el remitente, y luego el asunto y la vista previa comparten el ancho restante, así que un asunto largo empuja la vista previa fuera. |
| Outlook de escritorio, Apple Mail en un Mac | Una columna de lista estrecha junto al panel de lectura. Remitente, asunto y vista previa tienen cada uno su línea. Apple Mail da dos líneas a la vista previa. |
| Gmail y Outlook en un teléfono | Tres líneas apiladas de una línea cada una, junto a una inicial redonda. |
| Apple Mail en un iPhone | Remitente, asunto y luego dos líneas de vista previa por defecto. El lector puede ajustarlo de ninguna a cinco. |
Definir el texto de vista previa y rellenarlo
Para elegir el texto de vista previa, haz que tu frase sea el primer texto del cuerpo y ocúltala en el mensaje abierto. El bloque que genera esta página lo hace con un div que no ocupa espacio y no tiene color visible.
Hay un detalle. Si tu frase tiene 60 caracteres y el cliente tiene espacio para 110, sigue leyendo y añade lo que venga después: “View this email in your browser”, el texto alternativo de tu logo, “Home | Shop | Contact”. Para evitarlo, haz que tu frase vaya seguida de una larga tira de caracteres que ocupan espacio en la vista previa pero no dibujan nada, a saber, un zero-width non-joiner y un espacio de no separación, repetidos (‌ ). El cliente llena su área de vista previa con ellos y se detiene.
Los clientes de correo cambian la forma de construir las vistas previas sin avisar a nadie, y algunos colapsan los caracteres en blanco. Antes de un envío grande, mándate una prueba y míralo en un teléfono.
En qué se basan las observaciones
La lista bajo las maquetas sale de mediciones simples de lo que escribiste:
- Puntos de corte del asunto y del nombre del remitente, tomados de los dibujos, citando el diseño de teléfono más corto.
- Texto de vista previa: ausente, repitiendo el asunto (mismo comienzo, o al menos el 80% de las mismas palabras), o más corto que el espacio, de modo que le sigue texto del cuerpo.
- Forma: más del 70% de letras mayúsculas, dos o más signos de exclamación, la cantidad de emoji, un “Re:” o “Fwd:” en un mensaje que no es una respuesta.
- Vocabulario de correo basura: una lista corta en inglés (“free”, “act now”, “guaranteed”…), indicada como información.
Nada de esto decide dónde acaba tu mensaje. Los proveedores de correo filtran sobre todo según quién envía, es decir, si el dominio pasa SPF, DKIM y DMARC y cómo han tratado los destinatarios su correo antes. Puedes comprobar ese lado con la comprobación de autenticación del correo. Las palabras importan para lo que viene después de la entrega, cuando una persona decide si abre el mensaje.
Preguntas frecuentes
¿Cuánto debe medir el asunto de un correo?
Los teléfonos muestran más o menos de 30 a 45 caracteres de un asunto, según las letras y el cliente. Pon en ese espacio las palabras que identifican el mensaje. Un asunto más largo no es problema cuando el resto es detalle que verá quien lea en escritorio.
¿Qué es el texto preheader en un correo?
La frase que se muestra después del asunto o debajo de él en la lista de la bandeja de entrada. Es el primer texto del cuerpo del mensaje, normalmente oculto en el correo abierto con CSS para que solo aparezca en la lista.
¿Por qué mi correo muestra "View this email in your browser" en la bandeja de entrada?
Porque ese enlace es el primer texto de tu HTML y ningún texto de vista previa viene antes. Añade un preheader oculto como primer elemento del cuerpo y rellénalo para que el cliente no siga leyendo hasta el enlace.
¿Cuántos caracteres de texto de vista previa muestra Gmail?
No hay un número fijo. En un navegador de escritorio Gmail pone asunto y vista previa en una sola línea, así que la vista previa recibe lo que deje el asunto, desde nada hasta más de 100 caracteres. En un teléfono tiene una línea para ella sola, de unos 35 a 45 caracteres.
¿Qué hace ‌ en un preheader?
Es relleno que no dibuja nada. Un zero-width non-joiner seguido de un espacio de no separación, repetido muchas veces después de tu frase de vista previa, consume el resto del área de vista previa para que no se añada ningún otro texto del mensaje.
¿Los emoji o palabras como "free" mandan un correo a spam?
Rara vez por sí solos. Los filtros dan mucho más peso a la autenticación y la reputación del remitente que al vocabulario. Eso sí, un asunto que acumula mayúsculas, signos de exclamación y palabras de ventas sí parece basura a quien lo lee, y es motivo suficiente para moderarlo.