Estilo de correo electrónico
En este artículo se describen las mejores prácticas de estilo de correo electrónico, incluyendo líneas del asunto, texto de preencabezado, tamaño del correo electrónico y recomendaciones de imágenes.
Estilo de dirección
La línea del asunto es una de las primeras cosas que ven los destinatarios al recibir tu mensaje. Mantenerla entre 6 y 10 palabras produce las tasas de apertura más altas.
También existen diferentes enfoques para crear una buena línea del asunto, que van desde hacer una pregunta para despertar el interés del lector o ser más directo, hasta personalizarla para captar la atención de tu clientela. No te limites a una sola línea del asunto, aprovecha las pruebas A/B para probar nuevas y medir su efectividad. Las líneas del asunto no deben superar los 35 caracteres para mostrarse correctamente en dispositivos móviles.
El campo “De” debe mostrar claramente quién es el remitente. Intenta no usar el nombre de una persona o una abreviatura poco común. En su lugar, utiliza un nombre reconocible como el de tu marca. Si usar el nombre de una persona se ajusta a los métodos de personalización de correo electrónico de tu marca, mantén la coherencia para desarrollar una relación con el destinatario. El nombre del campo “De” no debe superar los 25 caracteres para mostrarse correctamente en dispositivos móviles.
Direcciones sin respuesta
En general, no se recomienda el uso de direcciones de correo electrónico de no-respuesta por múltiples razones, ya que alejan a tus lectores. Muchos destinatarios responden al correo electrónico para cancelar su suscripción, así que si no se les permite hacerlo, la siguiente acción que suelen tomar es marcar el correo electrónico como correo no deseado.
Recibir respuestas automáticas de ausencia puede proporcionar información valiosa, lo que aumenta las tasas de apertura y reduce los informes de correos no deseados (al eliminar a quienes no desean recibir correos). A nivel personal, una dirección de no-respuesta puede parecer impersonal para los destinatarios y puede hacer que dejen de recibir más correos electrónicos de tu empresa.
Texto de preencabezado
El texto de preencabezado en un correo electrónico comunica el punto principal del mensaje de manera eficiente para captar el interés del lector y fomentar las aperturas. El texto de preencabezado también es utilizado frecuentemente por los especialistas en marketing por correo electrónico para proporcionar información adicional sobre el contenido de un correo electrónico. Un preencabezado es el texto de vista previa que se muestra inmediatamente después del asunto de un correo electrónico. En el siguiente ejemplo, el preencabezado es - Brand. New. Lounge Shorts.
La cantidad de texto de preencabezado visible depende del cliente de correo electrónico del usuario y de la longitud de la línea del asunto del correo electrónico. En general, sugerimos que los preencabezados de correo electrónico tengan entre 50 y 100 caracteres.
El preencabezado puede hacer referencia a Liquid en el cuerpo del correo electrónico, y el cuerpo del correo electrónico puede hacer referencia a Liquid en el preencabezado. Esto se debe a que el texto del preencabezado forma parte del cuerpo del correo electrónico cuando envías mensajes a los destinatarios.
Aquí tienes algunas prácticas recomendadas a tener en cuenta al escribir tus preencabezados:
- Las llamadas a la acción entran en juego después de que los lectores hayan abierto tu correo electrónico.
- Dirige a tus lectores en la dirección correcta, ya sea que quieras que se suscriban, compren un producto o visiten tu sitio web.
- Usa palabras contundentes para que el lector sepa exactamente lo que le estás pidiendo, pero asegúrate de que refleje la voz de marca de tu empresa y de que cada llamada a la acción ofrezca algún tipo de valor al consumidor.
- El preencabezado no debe tener más de 85 caracteres y debe incluir algún tipo de llamada a la acción descriptiva que apoye la línea del asunto.
- Los correos electrónicos y los sitios de destino a los que diriges a tus usuarios deben estar optimizados para dispositivos móviles:
- Sin cuadros intersticiales
- Campos de formulario grandes
- Navegación sencilla
- Texto grande
- Espacios en blanco generosos
- Texto del cuerpo breve y conciso
- Llamadas a la acción claras
Texto de vista previa en Apple Mail
Apple Mail puede mostrar un resumen de Apple Intelligence en la bandeja de entrada en lugar de tu preencabezado. Vista previa y prueba y el HTML del mensaje enviado aún pueden mostrar el preencabezado que configuraste, porque el resumen se genera en el dispositivo del destinatario. En un iPhone o iPad de prueba, ve a Configuración > Apps > Mail. Desactiva Resumir vistas previas de mensajes para mostrar el texto de vista previa enviado.
Si la vista previa de la bandeja de entrada incluye contenido adicional del cuerpo en lugar de tu preencabezado o un resumen, consulta Vista previa y prueba de tu mensaje.
Límites de caracteres del preencabezado
| Cliente de correo electrónico móvil | Límite |
|---|---|
| iOS Outlook | 74 |
| Android Native | 43 |
| Android Gmail | 24 |
| iOS Native | 82 |
| iOS Gmail | 30 |
| Cliente de correo electrónico de escritorio | Límite |
|---|---|
| Apple Mail | 33 |
| Outlook ‘13 | 38 |
| Outlook for Mac ‘15 | 53 |
| Outlook ‘16 | 50 |
| Cliente de correo web | Límite |
|---|---|
| AOL Mail | 81 |
| Gmail | 119 |
| Outlook.com | 49 |
| Office 365 | 40 |
| Mail.ru | 64 |
Tamaño del correo electrónico
El tamaño del correo electrónico se refiere al tamaño del HTML de tu mensaje en Braze (el cuerpo que construyes y lo que Braze añade cuando se envía el mensaje).
- Asegúrate de limitar el tamaño de tu correo electrónico. Los cuerpos de correo electrónico de más de 102 KB no solo son extremadamente exigentes para los servidores de Braze, sino que también son recortados por Gmail y otros clientes de correo electrónico.
- Las imágenes alojadas a las que haces referencia por URL no se incrustan en el HTML de la misma manera que pegar grandes activos en línea. Recomendamos usar la biblioteca de medios y vincular mediante
hrefpara ayudar a mantener el mensaje más pequeño.
| Solo texto | Texto con imágenes | Ancho del correo electrónico |
|---|---|---|
| 25 KB máximo | 60 KB máximo | 600 píxeles máximo |
Para reducir el riesgo de recorte:
- Acorta el texto y los enlaces.
- Aplica CSS crítico en línea cuando sea necesario. Elimina los espacios en blanco adicionales en el HTML.
- Comprime las imágenes y los activos HTML.
Para guardar tu Campaign de correo electrónico o plantilla, asegúrate de que el cuerpo del correo electrónico no supere los 400 KB.
¿Qué puede añadir al tamaño final del correo electrónico?
Estas características aumentan el tamaño del mensaje renderizado en pequeñas cantidades:
- Píxel de seguimiento de apertura: añade una etiqueta de imagen de 1 x 1 px al cuerpo del mensaje
- Preencabezado: añade un
<div>oculto en la parte superior del cuerpo - Aliasing de enlaces: añade un parámetro de consulta de 16 caracteres (
lid=) a cada URL rastreada - Plantillas de enlaces: añade cualquier parámetro de consulta configurado en el panel a las URL coincidentes
- Integración de CSS en línea (opcional): aplica las reglas de la hoja de estilos incrustada directamente en los elementos HTML, lo que puede añadir CSS redundante dependiendo de la complejidad de la hoja de estilos
El preencabezado y el píxel de seguimiento añaden aproximadamente 600 caracteres (menos de 1 KB). Braze suele añadir entre 0 KB y 5 KB dependiendo del número de enlaces, la complejidad de la plantilla de enlaces y si la integración de CSS en línea está habilitada. Si el tamaño de tu correo electrónico está cerca del límite, recomendamos probar los correos electrónicos antes de enviarlos, ya que el tamaño final renderizado depende de estos factores.
Longitud del texto
Consulta la siguiente tabla para conocer las longitudes de texto recomendadas.
| Especificaciones de texto | Propiedades recomendadas |
|---|---|
| Longitud de la línea del asunto | 35 caracteres máximo (para una visualización óptima en dispositivos móviles) (6 a 10 palabras) |
| Longitud del nombre del remitente | 25 caracteres máximo (para una visualización óptima en dispositivos móviles) |
| Longitud del preencabezado | 85 caracteres máximo |
Tamaño de imagen
Consulta la siguiente tabla para conocer los tamaños de imagen recomendados. Las imágenes más pequeñas y de alta calidad se cargan más rápido, así que utiliza el activo más pequeño posible para lograr el resultado deseado.
| Tamaño | Ancho de imagen de encabezado | Ancho de imagen del cuerpo | Tipos de archivo |
|---|---|---|---|
| 5 MB máximo | 600 píxeles máximo | 480 píxeles máximo | PNG, JPEG, GIF |
Gmail web y la aplicación móvil de Gmail a menudo no renderizan SVG (y la compatibilidad con WEBP es inconsistente). Utiliza PNG o JPEG para las imágenes que deben mostrarse de forma fiable en Gmail.
Vinculación en profundidad
Con las notificaciones push y los mensajes dentro de la aplicación, un vínculo profundo lleva a los usuarios directamente a un destino específico dentro de una aplicación. Sin embargo, los vínculos profundos requieren que la aplicación esté instalada, y los correos electrónicos no ofrecen una forma de saber si los destinatarios tienen la aplicación. Esto significa que los vínculos profundos en los correos electrónicos pueden generar errores para los destinatarios que no tienen la aplicación instalada.
En su lugar, utiliza enlaces universales y App Links, que funcionan como URL estándar. Puedes configurarlos para que abran la aplicación o dirijan a los usuarios a una página específica. También pueden redirigir a la tienda de aplicaciones o recurrir a una página web cuando la aplicación no está instalada.
Content Blocks con imágenes transparentes
Cuando un Content Block contiene una imagen con fondo transparente (por ejemplo, un logotipo) y se inserta mediante una etiqueta de Liquid, es posible que veas un color de fondo detrás de la imagen. Este color proviene de la configuración de estilos globales del correo electrónico del editor de arrastrar y soltar, específicamente del Color de fondo del correo electrónico. Si tu configuración de estilos globales utiliza un color distinto al blanco, ese color aparecerá en su lugar.
Para mostrar el Content Block como se espera:
- Establece el color de fondo de la columna del Content Block para que coincida con el fondo del correo electrónico o de la plantilla.
- Alternativamente, convierte el Content Block de arrastrar y soltar en un Content Block HTML y establece su fondo como transparente.
Si necesitas usar el mismo Content Block en áreas con diferentes fondos (por ejemplo, cuerpo y pie de página), crea dos versiones del bloque, cada una con el color de fondo de columna apropiado.
Si prefieres arrastrar el Content Block al correo electrónico como una fila, puedes establecer el fondo de la columna de la fila como transparente para anular el fondo global.
Arrastrar un Content Block como una fila inserta una instantánea prerenderizada, que no se actualiza automáticamente si el Content Block de origen cambia.
Modo oscuro
El modo oscuro es una preferencia del lado del destinatario. Los proveedores de buzón de entrada y las aplicaciones (como Gmail y Outlook) pueden invertir o recolorear tu HTML, por lo que debes esperar un renderizado diferente según el cliente en lugar de una apariencia fija solo desde Braze.
Editor HTML
Si usas el editor HTML, puedes reducir la inversión de fondo no deseada en las aplicaciones móviles de Gmail aplicando un linear-gradient CSS de un solo color en las celdas de tabla en lugar de un background-color plano. Para ver ejemplos, limitaciones (incluyendo el uso de <td> o <th> en lugar de <table> solo) y la sintaxis, consulta Aplicación móvil de Gmail y modo oscuro.
Para crear estilos separados para modo claro y oscuro donde los clientes los admitan, usa la media query prefers-color-scheme. La compatibilidad varía según el buzón de entrada: siempre previsualiza y prueba en los clientes a los que envías.
Editor de arrastrar y soltar
En el editor de arrastrar y soltar, el modo oscuro sigue siendo controlado por cada proveedor de buzón de entrada. Activa la Vista previa de modo oscuro en Vista previa y prueba para revisar tu diseño. Para saber dónde encontrar el interruptor y cómo probar, consulta ¿Puedo previsualizar cómo se ve mi correo electrónico en modo oscuro?. Para colores de fondo y legibilidad en distintos temas, consulta ¿Cómo debo diseñar correos electrónicos para el modo oscuro y el modo claro?.
Mejores prácticas generales
- Evita el blanco puro (
#FFFFFF) y el negro puro (#000000); usa blancos suaves y negros atenuados para que las inversiones completas se vean menos duras. - Reduce los colores de acento muy brillantes (por ejemplo, botones llamativos) para que sigan siendo legibles si un cliente invierte los colores.
- Usa PNGs transparentes cuando se ajusten a tu diseño.
- En imágenes que incluyan texto, agrega un contorno claro alrededor del texto oscuro y un contorno oscuro alrededor del texto claro en ilustraciones oscuras, para que el texto siga siendo legible si los colores cambian.