16 mejores prácticas de diseño de encabezado de correo electrónico

El encabezado de correo electrónico es el elemento que utiliza regularmente en sus boletines informativos por correo electrónico. Crea una primera impresión para todo el correo electrónico, pero a menudo olvidamos que es más complejo que solo un logotipo y un menú.

Veamos cómo aprovechar al máximo el diseño de encabezado de correo electrónico basado en las mejores prácticas probadas de nuestro equipo.

La importancia de los encabezados de correo electrónico y los elementos clave

Desde una perspectiva de marketing, el banner, al abrir un correo electrónico, es una parte fundamental del formato del boletín por estas razones:

1. Llama la atención de los usuarios por las bocinas con un diseño de encabezado de correo electrónico pegadizo

Si utiliza una imagen atractiva, resalte sus descuentos o proporcione al usuario el menú en el que es probable que haga clic debido a la alta resonancia de las categorías, la parte superior del correo electrónico definitivamente puede hacer que los lectores presten atención.

(Fuente: Plantilla Stripo)

2. Mueve a los usuarios más abajo en el embudo de conversión - un banner de correo electrónico a la vez

Roma no se construyó en un día, y los embudos de marketing a menudo se extienden a lo largo de una larga serie de múltiples toques de marca. Si hay alguna idea con la que quiera que sus clientes potenciales estén familiarizados, una de las formas de plantar esta idea es incorporándola en el diseño del encabezado del correo electrónico. Incluso si el usuario rebota rápidamente, ya habrá leído el mensaje clave.

En el ejemplo lacónico a continuación, una empresa de dominios Dan tiene como objetivo crear conciencia sobre su adquisición por parte del líder del mercado, GoDaddy. No solo porque el cambio trae consigo varias actualizaciones técnicas, sino también para disfrutar a la luz de una marca matriz mucho más fuerte. ¿Traerá este mensaje resultados comerciales inmediatos? No es correcto. ¿Tendrá un impacto comercial positivo en la forma en que los usuarios tratan la marca y la plataforma a largo plazo? Efectivamente.

(Fuente: Correo electrónico de Dan.com)

3. Fortalezca el conocimiento de su marca y muévala a la zona de confort comercial

El uso de colores de marca, logotipos, eslóganes, fuentes e imágenes ayuda a los usuarios a reconocer mejor su marca cada vez. Estar familiarizado con la marca y qué esperar de ella lleva a su producto a una zona de confort para su cliente potencial, ya que se siente más seguro y educado. De esta manera, la coherencia de la marca en el diseño del encabezado del boletín ayuda a acercar a sus clientes potenciales a la decisión de compra a través de una mayor confianza y familiaridad.

4. Consiga esas ventas vendiendo - aproveche la compra impulsiva para artículos más pequeños - compruebe

No muchas personas pueden darse el lujo de comprar por impulso un automóvil o tanto como un secador de pelo Dyson, pero los artículos de menor precio expuestos en el momento adecuado con la luz adecuada pueden desencadenar una compra emocional. Imagen de encabezado de correo electrónico con el producto adecuado y CTA tiene el poder de ser ese estímulo de compra impulsivo.

(Fuente: Plantilla Stripo)

Elementos clave del diseño del encabezado del correo electrónico del boletín

Sabemos una o dos cosas sobre hacer que sus boletines traigan más por el dinero. Es por eso que le damos una perspectiva más amplia de las cosas al analizar los componentes del encabezado del correo electrónico, viéndolos a través del prisma del diseño de boletines comerciales.

En el marketing por correo electrónico, los elementos del encabezado del boletín se dividen en 3 subsecciones:

1. Información del remitente.
2. La línea de asunto y el preencabezado.
3. Encabezado del correo electrónico en sí.

En esta publicación, le mostraremos cómo configurar la línea de asunto y el preencabezado. También compartiremos 16 ideas de encabezados de correo electrónico para que sus mensajes sean más efectivo.

(Fuente: Plantilla Stripo)

1. Información sobre el remitente

Esta parte del encabezado por lo general tiene:

• nombre del remitente;
• nombre del lector;
• dirección “de”;
• dirección “responder a”;
• fecha;
• logo de marca (opcional).

Si usas un ESP para enviar emails masivos, entonces deberás colocar los siguientes datos: El nombre del remitente, el logo de la empresa, la dirección “responder a”. Normalmente no se cambia de campaña a campaña, así que solo lo haces una vez. Mientras que la línea de asunto y texto de preencabezado siempre cambian. Así que necesitarás hacerlo cada vez que comiences una nueva campaña.

2. La línea de asunto, y el preencabezado

Un preencabezado, también conocido como texto de vista previa, algunos lo llaman fragmento, es el elemento más pequeño pero altamente esencial del email.

Un preencabezado informativo notifica a los lectores del propósito del email. En dispositivos de escritorio, va después del guion “-” en la línea de asunto, en dispositivos móviles, va en la línea debajo del asunto. Cuando recibes el email, según el estudio de Litmus, 24% de los lectores juzgan por encabezado si abrir o no el mensaje.

Cada vez que recibo un email de MailChimp, SimilarWeb, o Netflix, sin abrirlo ya sé de qué tratará.

Algunas empresas insertan sus ofertas en el preencabezado para que la gente haga clic.

Una de las mejores prácticas con preencabezado de email es hacer historias, cuando el texto del preencabezado es una continuación de la línea de asunto.

Chubbies: “He cambiado, ok, estaba siendo tacaño, pero ahora he cambiado por las ofertas del día festivo”.

Brighton: “Ella ama el ROJO para las Fiestas, Y Tú También”.

D’Artagnan: “¡Envíales Un Filete!” 15% de Descuento en Filetes y Cortes — La Oferta Termina el Domingo”.

Cómo colocar un texto de preencabezado con Stripo:

• arriba de la plantilla, haz clic en el botón “ajustes”;
• ingresa una línea de asunto y un texto de preencabezado.

Nota importante:

Cuando no hay preencabezado en tu email, los lectores verán la primera parte del texto del email. No estará completo ni terminado. Podría ser algo como “Ver online”, “Mi cuenta”.

Entonces, si no quieres que tus lectores lo vean, podrías elegir no mostrar nada como preencabezado.

En Stripo, solo necesitas activar la opción “Completar con Espacio en Blanco”.

Una vez que lo hagas, la vista previa de tu email se verá como en la bandeja de entrada de estos usuarios:

Utiliza Anotaciones de Promoción de Gmail

Como el nombre sugiere, puedes anotar la duración de tu oferta, la cantidad de descuento, y acompañarlo todo con una insignia de oferta en la bandeja de entrada del usuario sin que tengan que abrir sus emails. 

Esta información va justo en la línea de asunto del email, y un texto de preencabezado. 

Funciona en dispositivos móviles en Gmail, pero no distorsiona tu apariencia en otros clientes de email. 

Mira nuestro video corto para aprender a crear anotaciones promocionales para tu boletín con Stripo.

Para conocer los requisitos para las insignias de anotación, consulte nuestra publicación del blog "GNueva guía de la pestaña de promociones de Gmail". El artículo también explica cómo usar Stripo para crear anotaciiones en Gmail con una sola imagen, in carrusel de productos  o una anotación de oferta( que incluye elementos como el descuento, el código y la fecha de vencimiento de la oferta).

3. Encabezado de email

No existe una regla respecto a cómo debe verse un encabezado profesional. Todo depende... Pero te proporcionaremos algunas ideas y ejemplos.

Antes de ir a las ideas creativas, déjanos decir unas palabras sobre los elementos de encabezado de email tradicionales, que son el nombre de la empresa, logo y menú.

Nombre y logo de la empresa

Como regla, el logo de la empresa incluye el nombre.

Si tu empresa es muy nueva en el mercado, y la gente está conociendo tu marca y tus productos, entonces no olvides agregar el nombre de tu empresa. Ya que el nombre de tu empresa es lo que los clientes reconocerán. Insértalo en todos los emails, no importa si es un desencadenante o y uno promocional.

(Fuente: Plantilla Stripo)

Pero cuando tu empresa es reconocida, y estás seguro de que todos están familiarizados con tu logo, puedes omitir el nombre de la empresa y tan solo insertar el logo.

(Fuente: Email de Airbnb)

Nota: el fondo del logo debería ser transparente para poder coincidir con el color del tema.

El logo se inserta como imagen, así que no tendrás que preocuparte por la fuente. Se mostrará correctamente en todos los clientes de email y en todos los dispositivos.

Menú

El menú es otro elemento tradicional de los emails porque ayuda a los clientes a navegar y que vayan a tu sitio web. El menú es funcional.

Puedes seleccionar un menú regular o interactivo.

Todos los menús regulares que agregues con Stripo, son completamente adaptable.

(Fuente: Email de Gap)

Por favor, para información más detallada sobre cómo agregar menús, por favor mira nuestra publicación "Agregar Menú en Email con Stripo".

Mejores prácticas de diseño de encabezado de email

Hemos seleccionado los mejores ejemplos de marcas reales.

1. Agregar la opción “Ver en el Navegador”/“Versión web”

Por supuesto, puedes colocar enlaces en un pie de página, lo cual está bien. Pero si tu email contiene GIF, que podrían no cargar rápido o no cargarse directamente, si tu email contiene elementos interactivos o de gamificación que podrían no visualizarse correctamente en algunos clientes, entonces sería mejor agregar una opción “Ver online” en el encabezado de tus emails. Esto aumenta las chances de que los usuarios lo vean y hagan clic.

(Fuente: Email de Banana Republic)

2. Agregar un buscador de tiendas

Junto con el logo y el menú, Adidas agregó un Buscador de Tiendas en el encabezado. Brillante idea. Yo elijo los zapatos que necesito directo en los emails de Adidas y luego en el Buscador de Tiendas, ellos me dan la dirección de una tienda física cercana para probarme el calzado. Excelente servicio. ¡Gracias!

(Fuente: Email de Adidas)

3. Colocar información sobre el descuento

Este es uno de los mejores ejemplos de encabezado de email, la empresa de cosmética, Anabel, colocó su valiosa propuesta en el encabezado. Interesante decisión. No me lo podía perder. Para información más detallada tenía que hacer clic en el link.

(Fuente: Email de Brighton)

4. Promocionar productos

La empresa Filmmaker promociona una suscripción paga para su revista en vivo directo en su encabezado. 

Una buena manera de promocionar tu producto es si el boletín es solo informativo.

(Fuente: Email de Filmmaker)

5. Agregar una opción de “Mi cuenta” en el encabezado de email

El mapa de clics del reporte de eSputnik (nuestro ESP) sobre las campañas de boletines muestran que muchos lectores hacen clic en el logo o en el botón de iniciar sesión para ingresar a sus cuentas.

Una vez que algunos lectores terminan de leer el boletín, podrían querer seguir trabajando con Stripo/tu herramienta haciendo clic en el botón “Mi cuenta”.

Como podemos ver, el 12.8% de nuestros lectores utilizaron esta opción.

6. Íconos de redes sociales

¿Por qué no ir contra el sistema? Si deseas resaltar, coloca los links a tus cuentas de redes sociales en el encabezado. Algo inusual, pero muy llamativo. Especialmente, si tu meta principal es ganar suscripciones en tus cuentas de redes sociales donde compartes todos los detalles de los próximos eventos.

(Fuente: Email de Ukrainian Hub)

7. Usar GIF o logos animados

¿Quieres tener un encabezado animado? Hazlo. Asegúrate de mantener el tamaño de este encabezado de email menor de 1 Mb porque al menos la mitad de tus lectores lo verán en dispositivos móviles. Si un email tarda mucho en abrir, la gente lo cierra.

(Fuente: Email de Banana Republic)

8. Trabajar en los fondos del encabezado de email

Si no quieres hacer muchos cambios a tus encabezados de emails, entonces podrías jugar con los colores.

(Fuente: Email de Tienda Online de Scuderia Ferrari)

9. Decorar los encabezados para las fiestas

Cuando llegan las fiestas, hacemos lo posible para que el email sea festivo. Hace un tiempo, la mayoría de las empresas dejaban el diseño del encabezado sin cambios. Pero es muy aburrido. Dale vida a tu encabezado con copos de nieve, decoraciones, etc.

(Fuente: Email de GrowthHackers)

A primera vista, los lectores estaban bien al tanto del objetivo de toda la campaña. A mi parecer, este es un gran ejemplo de diseño de encabezado de email para las festividades.

10. Aplicar fuentes personalizadas a los menús

Una buena fuente decorativa enriquecerá tu diseño de encabezado de email. Usa tu imaginación y ponte creativo.

Es importante hacer que todas las fuentes sean legibles, las fuentes cursivas requieren de un mayor tamaño.

(Email abierto en Gmail, MacOS, y Windows 10)

Queremos recordarte que Stripo te permite agregar y usar fuentes personalizadas en tu diseño de encabezado de email HTML.

Nota importante:

Si la fuente seleccionada no es soportada por un cliente de email, será reemplazada por la fuente predeterminada del cliente.

11. Especificar la fecha de emisión

Mirando el email de Apple News, uno puede decir con facilidad qué día lo recibió. ¿Cómo? Esta empresa agrega una fecha al encabezado de email. En mi opinión, esta es una de las mejores ideas de diseño de encabezado de email.

(Fuente: Email de Apple News)

12. No usar encabezado

Todas las marcas famosas tienen algo en común, todas tienen su propio estilo. Así, los emails de Nike son constantes. Nunca notarás cuándo termina un encabezado y cuándo comienza un banner.

(Fuente: Email de Nike)

De hecho, Nike no utiliza ningún encabezado, siempre colocan sus logos sobre los banners.

Una decisión interesante si no quieres agregar un menú al encabezado.

13. Agregar un enlace “Actualizar preferencias”

Todos queremos que nuestros boletines sean altamente efectivos. Entonces, necesitamos presentar solamente información relevante. Las preferencias de los clientes cambian a menudo. Los lectores necesitan tener la oportunidad de actualizar su información siempre que quieran.

El restaurante D’artagnan tiene s botón “Actualizar preferencias” abajo a la derecha en el encabezado.

(Fuente: Email de D'Artagnan)

Nota importante:

Normalmente, los dispositivos móviles muestran solo 4 pestañas de menú en pantalla. Más de 5 pestañas en un menú puede provocar desplazamiento horizontal. Para evitar eso, podrías tener que desactivar algunas pestañas para dispositivos móviles.

Si estás creando tu encabezado de email con Stripo, tienes que:

• hacer clic en la pestaña de menú que vas a desactivar;
• en el panel de ajustes, haz clic en el botón “Ocultar en dispositivos móviles” al lado del elemento elegido;

• haz lo mismo para todos los demás elementos que quieras desactivar para dispositivos móviles;
• listo.

14. Especificar ID de membresía

Si ofreces una membresía a tus clientes, su ID debería estar a mano. Ciertamente, puedes colocar esta información en alguna parte en sus ajustes de cuenta. Pero Decathlon especifica el número de ID en el encabezado. Es bastante notable. De esta manera, los lectores siempre sabrán dónde encontrar su número de miembro.

(Fuente: Email de Decathlon)

15. Agregar una foto del remitente

Este es uno de los encabezados más informativos. Contiene botones de “compartir”, íconos de redes sociales, fechas, nombre de autores, y su foto.

Siempre es bueno saber quién es el autor, sobre todo cuando se trata de las últimas noticias de economía y política.

(Fuente: Email de CNN Reliable Sources)

16. Poner la opción “Hazlo ahora”

Podrías si quisieras agregar enlaces de “Mostrar ahora” en tus encabezados. Algunas marcas lo ponen arriba del logo, otras a la derecha del logo. Queda totalmente a discreción.

Maybelline, por ejemplo, agrega links de “Registrarse Ahora” en sus encabezados de email HTML cuando están promocionando sus próximos eventos, webinars, para ser exacto.

(Fuente: Email de Maybelline New York)

Ahora que con suerte estos ejemplos de diseño de encabezado de email te inspiraron, estás listo para crear un nuevo encabezado para tus próximas campañas.

Cómo crear un encabezado email con Stripo, guía

Hay dos formas de diseñar encabezado de email con nuestro editor:

1. Personalizar encabezados en plantillas

Esta opción es la mejor para quienes no tienen tiempo de crear encabezados de email desde cero.

Todas las plantillas de correo electrónico HTML de Stripo ya contienen encabezados. Tan solo elige el que te gusta, reemplaza nuestros enlaces con el tuyo, reemplaza el logo existente con el tuyo.

2. Crear un nuevo encabezado de email desde cero

Quiero crear un encabezado con mi logo ubicado entre las pestañas de menú. Como este:

Es fácil y solo llevará unos pocos pasos:

Entonces, esto es en detalle lo que necesito hacer:

• arrastra una estructura de 3 columna a tu plantilla HTML;

Si deseas que el encabezado de email contenga unas pocas franjas, entonces tendrás que arrastrar el número de estructuras en tus plantillas;

• para agregar un logo, hago clic en el ícono “imagen”;

• elijo mi tamaño de logo;

Asegúrate de hacer clic en el botón “Imagen adaptable” para dispositivos móviles;

• arrastro el bloque de menú en la primera columna de la plantilla;

• quito la tercera pestaña de menú, ya que solo necesito 2 en cada columna (por defecto, el bloque de menú tiene tres pestañas);
• le doy nombres: “plantillas” y “notas de lanzamiento”;
• selecciono el color de fuente, en nuestro editor, se llama “color de links”;

• hago lo mismo para la tercera columna;
• para toda la franja, elijo Blanco como color de fondo;
• igualo los contenedores, en mi caso tienen 250/250 y el que tiene el logo solo tiene 30;

Si deseas poner una imagen de fondo, tendrás que hacer clic en el botón “Imagen de Fondo”;

• Recomiendo establecer el tamaño de fuente cuando el encabezado esté completo y tenga todos los contenedores, así podrás tener una visión general.

Yo uso Tahoma 18;

Nota: queremos recordarte que Stripo te permite agregar fuentes personalizadas y aplicarlas a los menús y otros textos en las plantillas de email.

• activo el botón “Estructura adaptable”, asegúrate de que tu menú se muestre correctamente en dispositivos móviles también;

• ajusto el relleno. Podrías tener que hacer esto para alinear todos los contenedores. Hago clic en el botón “más”;

• Antes de guardar este bloque a mi biblioteca, decidí previsualizarlo.

Nota importante:

Normalmente, un encabezado de email es algo que creas una vez y lo usas para muchas campañas. Así que no tengas miedo de pasar más tiempo en el diseño del encabezado del boletín.

Guárdalo en tu Almacenamiento de Módulo personal, y arrástralo cuando crees una nueva campaña de email.

Palabras finales

Como puedes ver por el número de diferentes ejemplos de diseño de encabezado de email dados aquí, no existe tal cosa como “mejor diseño de encabezado de email”. No dudes en ser creativo.

Nuestras plantillas de email ya contienen varios encabezados creados profesionalmente, elige cualquiera de ellos y personalízalo.

¡Te deseo la mejor de las suertes en todos tus futuros proyectos!