Diseño Plantillas How-to
~ 16 min. leídos
2 comentarios
54797 vistas
valóralo
09 octubre 2020

16 Mejores Prácticas para Diseño de Encabezado de Email

Stripo / Blog / 16 Mejores Prácticas para Diseño de Encabezado de Email

El encabezado del email es el elemento que usas regularmente en tus emails de boletines. Pero muy a menudo olvidamos que es más complejo que solo un logo y un menú.

El encabezado de boletín completo consiste de tres partes esenciales:

  • información sobre el remitente;
  • la línea de asunto, y el preencabezado;
  • el encabezado en sí.

En esta publicación te mostraremos cómo hacer la línea de asunto y el preencabezado. Y te mostraremos 16 ideas de encabezado para que tus emails sean más efectivos.

Encabezado de Stripo Encabezado hecho a mano

(Fuente: Plantilla Stripo)

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).

Cómo-hacer-un-encabezado-de-correo electrónico_Info-sobre-remitente

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.

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á.

Encabezado de correo electrónico Ideas_Precabezados

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.

Asunto titulo es

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”.

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

Discapacitados-Prehead_Stripo

Coloca línea de asunto y texto de vista previa en tus emails

Utiliza Anotaciones de Promoción de Google

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. 

Ejemplo de correo electrónico de la pestaña Promo de GmailFunciona 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.

Usa anotaciones para destacarte en la bandeja de entrada de tus usuarios.

Para ver los requerimientos para las insignias de anotaciones, por favor, mira nuestra publicación con la "Guía de Nuevas Promociones de Gmail".

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.

Encabezado con nombre de empresa

(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.

logo-no-name

(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.

Inversión de pestañas de menú de diseño de encabezado de correo electrónico

(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.
Mejores prácticas para encabezados de correo electrónico La vista en el enlace del navegador

(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!

StoreFinder-Adidas

(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.
Colocación de mejores prácticas para el diseño de encabezados de correo electrónico Información importante en los encabezados

(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.

Preencabezado 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.

Ejemplos de diseño de encabezado de correo electrónico Colocando el logotipo y los enlaces de mi cuenta en el encabezadoUna 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.
Encabezado de correo electrónico Iconos de redes sociales en encabezados de correo electrónico

(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.

Stripo-Header-GIF-in-Header.

(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.

Stripo-Cabecera-Ferrari.

Diseño de feliz Navidad de encabezado de Stripo

(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.
Animaciones de imagen de encabezado de correo electrónico

(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.

Ejemplos de diseño de encabezado de correo electrónico Fuentes decorativas

(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.

6 min read

60591 views 5

How to Add and Use Custom Fonts with Stripo

On November 26th, we released a new option — now with Stripo.email, you can add custom fonts to projects in just a few clicks with no HTML skills needed. Why is that important? It’s not a secret that a good copy complements the email design and convinces customers to make a purchase. Make the text copy emotional. And by wrapping it in a font that matches the situation and the email design best, you make it noticeable, good-looking and appealing....

Leer

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.

Encabezado de correo electrónico Colocación de datos en encabezados de correo electrónico

(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.
Nikes-Header

(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.

Preferencias de actualización del encabezado de Stripo

(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;

Ocultar elemento

  • haz lo mismo para todos los demás elementos que quieras desactivar para dispositivos móviles;
  • listo.
Haz que los menús de los encabezados de email sean completamente adaptables con 1 clic

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.
Membresía de Stripo Header

(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.
El mejor ejemplo de encabezado de Stripo

(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.
Registro de mejores prácticas para encabezado de correo electrónico para evento

(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 HTML ya contienen encabezados. Tan solo elige el que te gusta, reemplaza nuestros enlaces con el tuyo, reemplaza el logo existente con el tuyo.

Entre nuestros diseños de plantillas de encabezado de email, encontrarás el que mejor se adapte a tus necesidades de campaña.
Buscar

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:
Stripo Header Menú StripoEs fácil y solo llevará unos pocos pasos:

Menú de adición de encabezado de Stripo GIFEntonces, esto es en detalle lo que necesito hacer:

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

Encabezado de Stripo agregando una nueva estructurasi 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”;

Estrutura es

  • elijo mi tamaño de logo;

Tamano esAsegú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

Bloque de menú de arrastre de encabezado de Stripo

  • 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”;

Menú de encabezado de correo electrónico

  • 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;

Contenedor 1,2,3Si 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;

Estrutura receptiva es

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

Rellenos de encabezado Stripo

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.

Guardar encabezados de correo electrónico en el almacenamiento del módulo

Crea tu encabezado de email HTML una sola vez y úsalo en las campañas futuras.

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!

Crea encabezado de email efectivos para tus emails una vez que los reutilices en todas tus campañas.

 

Дмитрий Головцов hace 3 semanas

Почему в письме вы пишите в анонсе статьи про геймификацию, а сама статья совершенно о другом? Заманить для перехода на сайт? Но вы же должны понимать, что это вызывает негатив, когда ожидания не совпадают с реальностью. Грустно.

Hanna Kuznietsova comentado en Дмитрий Головцов hace 3 semanas

Дмитрий, Добрый день. Спасибо большое, что обратили наше внимание на это. Мы в рассылку по ошибке вставили неверную ссылку. Приносим свои извинения за это. Статья про геймификацию у нас есть. Ее писал наш СЕО. Вот ссылка: https://stripo.email/blog/gamification-in-email-marketing/ И именно этой статьей мы хотели поделиться в письме. В следующий раз будем тщательнее проверять все ссылки, которыми делимся в письмах.

Te podría interesar

← anterior siguiente →
Stripo_Building AMP Emails with Stripo_Featured Image
11 marzo · 21 min. leídos
Cómo Crear Emails AMP con Stripo

Actualizaciones dinámicas, contenido en tiempo real, hiper-personalización, un nuevo nivel de gamificación, dejar comentarios en formularios abiertos, reservar reuniones, etc. - todas estas acciones son ahora posibles directamente en las bandejas de entrada de los usuarios con la llegada de AMP para el correo electrónico. ¿Hace falta decir que estos correos electrónicos avivan tus boletines, tienen un aspecto fresco y novedoso en las bandejas de entrada de los usuarios y, como resultado, aumentan las conversiones, en algunos casos, 5 veces?...

Diseño Plantillas How-to AMP
Stripo Notification Emails
01 marzo · 14 min. leídos
Ejemplos de correos electrónicos de notificación y mejores prácticas

Las notificaciones por correo electrónico son la mejor y más fácil manera de informar a los suscriptores sobre los cambios que han ocurrido o que están a punto de ocurrir pronto. Estos correos electrónicos muestran la tasa de apertura más alta. Pero incluso en este caso debemos apegarnos a ciertas mejores prácticas al diseñar los correos electrónicos para no perder la confianza de los suscriptores. Esta plantilla de correo electrónico de notificación está bien estructurada, contiene todos los bloques necesarios...

Diseño Marketing How-to
Mantente siempre atento/a a las últimas noticias de marketing de correo electrónico, guías, artículos e instrucciones