Cómo personalizar la vista previa de tus emails

Vale, ya hemos visto cómo mandar el email perfecto, qué contenido esperan tus clientes y la importancia de un buen asunto para que tus correos lleguen y enganchen a tus suscriptores. Pero hay una dificultad más que tienes que superar antes de dar al botón de enviar: La vista previa de tus emails. Ese pequeño texto que puede echar a perder todo el esfuerzo previo si no lo cuidas.

Descubre 184 secretos exclusivos de 46 emprendedores con presencia en Internet

  • Cómo el Email Marketing les ayuda en sus negocios
  • Qué errores no volverían a cometer
  • Qué tácticas son las que mejores resultados aportan a sus negocios
  • Qué proveedor de Email Marketing utilizan

"*" señala los campos obligatorios

Nombre*
Hidden
Privacidad*
Este campo es un campo de validación y debe quedar sin cambios.

De nada servirá ese botón maravilloso con una excelente llamada a la acción que has creado, ni esa imagen alucinante que has encontrado rebuscando en Internet. Si no consigues que tus suscriptores abran tus emails, nada de lo que hagas habrá valido para nada.

A pesar de que la bandeja de entrada es la primera relación que tenemos con nuestros suscriptores, es muy frecuente que sea lo último que tengamos en cuenta a la hora de mandar nuestros emails. Todos los clientes de correo muestran el nombre del remitente (el «De» o «From»). Y muchos incluso muestran un pequeño texto a continuación del asunto, una vista previa de lo que se encontrarán si abren el correo. Optimizar esta vista previa de tus emails es uno de los métodos que más van a optimizar tus tasas de apertura.

¿Qué es la vista previa de tus emails?

La vista previa de tus emails es un fragmento del cuerpo del email que envías y que normalmente se sitúa justo debajo del nombre del remitente y el asunto. También se le conoce como Preheader o Preview Text.

cómo personalizar la vista previa de tus emails [0]

La vista previa no es algo nuevo que llegue a nuestras vidas con el correo electrónico. Se trata de una técnica de marketing que ya se usaba con anterioridad en el mailing tradicional. Seguro que en algún momento has recibido en tu buzón alguna publicidad en carta en el que en el propio sobre ya se llamaba tu atención sobre lo que podías encontrarte dentro y te incitaba a su apertura. En el email marketing funciona exactamente igual. La vista previa puede atraer la atención de tus suscriptores, animándoles a abrir tus emails. Además, la vista previa también puede influir en el comportamiento de nuestros suscriptores. Por ejemplo, puede animar a hacer scroll para clicar sobre determinados enlaces del cuerpo del email.

Cómo añadir una vista previa de tus emails personalizada

Lo normal es que, si no hacemos nada, la vista previa de tus emails saldrá de las primeras líneas del email que hemos enviado. Lo que no todo el mundo sabe es que la vista previa de tus emails puede estar en el cuerpo del correo u oculta a los ojos de los suscriptores una vez que han abierto el email. Si has pensado las primeras líneas de tu email pensando en las bondades de una buena vista previa, no es necesario que hagas ningún esfuerzo adicional.

cómo personalizar a vista previa de tus emails

Texto de vista previa visible

A menudo recibimos emails con un texto de vista previa que contiene pequeños iconos y enlaces a redes sociales. También es frecuente ver mensajes del tipo «Ver este correo en el navegador» o «Reenvíaselo a un amigo». Estas frases suelen salir del texto ALT de los logos e imágenes que se utilizan en los emails.

> Lee el Post: "LOS 23 MEJORES BANCOS DE IMÁGENES GRATUITAS EN ALTA CALIDAD PARA TUS EMAILS" (abre en una nueva pestaña)»>>> Lee el Post: «LOS 23 MEJORES BANCOS DE IMÁGENES GRATUITAS EN ALTA CALIDAD PARA TUS EMAILS»

Sin duda alguna, a mí el que me parece el peor es el de «¿Tiene problemas para ver este email?» o quizás el de esos tipos valientes que incluyen su enlace de baja al comienzo de sus emails y así que se vea en la bandeja de entrada sin necesidad de abrir el correo.

Estas frases juegan un importante papel en tu estrategia de email marketing, pero no están diciendo exactamente «¡ÁBREME!» a gritos. Estas frases tienen mejores sitios donde hacerse valer dentro de tus emails.

cómo personalizar la vista previa de tus emails 0c

Por lo tanto, considera mover estos textos a otros lugares dentro del cuerpo del email. O al menos intenta colar un par de frases antes.

Hay otra alternativa si no quieres «romper» la literatura de tus emails porque no van con el copy que te has propuesto. Puedes definir específicamente qué texto quieres que se vea como vista precia en la bandeja de entrada de tus suscriptores.¿Cómo puedes hacer esto? Es muy sencillo. Todo lo que necesitas es añadir un poco de código después de la etiqueta <body> en tu editor HTML.

<body>
  <div>
    Aquí va el texto de vista previa de tus emails
  </div>
</body>

El texto de vista previa oculto

No siempre es posible (o aconsejable) incluir un texto de vista previo visible. Algunos clientes me piden que añada enlaces a la web o un enlace a la versión web de su newsletter por si acaso algo no funciona. Puede ser simplemente que tan sólo quieras que la parte superior de tu email aparezca limpia de un texto que, en ocasiones, puede no tener todo el sentido que te gustaría. Afortunadamente, hay una solución para esto: El texto de vista previa oculto.

El texto de vista previa oculto permite personalizar la vista previa que aparecerá en la bandeja de entrada de tus suscriptores sin que aparezca ningún texto en el cuerpo de tu email.

Esconder el texto de vista previa requiere algunos conocimientos de HTML y CSS. Hay varias técnicas que puedes emplear para conseguirlo. La solución que te propongo incluye algo de CSS para indicarle al texto que no aparezca. Así, la propiedad «display:none» no funciona en todos los proveedores de correo (ejem… Gmail, te odio, ejem…). Por ello, incluyo algún recurso como el de especificar que el color del texto debe ser el mismo que el del fondo de la imagen y que sólo debería tener un tamaño de un pixel.

<div style="display:none; font-size:1px; color:#333333; 
line-height:1px; max-height:0px;max-width:0px; 
opacity:0; overflow:hidden;">

   Aquí va el texto de vista previa oculto

</div>

Como siempre, hay un debate abierto sobre la idoneidad o no de usar estos trucos de código. La principal duda es la de si afectan a la entregabilidad de nuestros emails. Sin ánimo de ser generalista ni sentar cátedra, te diré que mi experiencia en este sentido ha sido buena. No he visto afectadas mis tasas de entrega. Lo importante para que tus emails lleguen a su destino es seguir una serie de pautas. Si no trabajamos nuestra reputación frente a los proveedores de correo de nuestros suscriptores, no podemos luego echar la culpa de que nuestros correos no lleguen a la última acción realizada. De todos modos, siempre digo lo mismo: Se trata de probar y comparar. Hacer tests A/B es la clave para saber qué es lo que te funciona y lo que no.

> Lee el Post: "CÓMO LOGRAR QUE TUS EMAILS ACABEN EN LA BANDEJA DE ENTRADA DE TUS SUSCRIPTORES" (abre en una nueva pestaña)»>>> Lee el Post: «CÓMO LOGRAR QUE TUS EMAILS ACABEN EN LA BANDEJA DE ENTRADA DE TUS SUSCRIPTORES»

¿Qué clientes de correo utilizan la vista previa?

Como todo en esta dura vida del email marketing, la vista previa de tus emails varía de unos clientes de correo a otros. No hay dos bandejas de entrada iguales. O varía el lugar donde aparece la vista previa o bien cambia el número de caracteres máximos que incluye la vista previa.

Tabla: Vista previa por cliente de correo y dispositivo
ESCRITORIOSOPORTA VISTA PREVIANº CARACTERES PERMITIDOS
Apple Mail140
Lotus Notes 8.5 NoN/A
Outlook 2003 NoN/A
Outlook 2007 NoN/A
Outlook 2010 NoN/A
Outlook 2013 35
Outlook 2016 35
Outlook for Mac 2015 35
MÓVILSOPORTA VISTA PREVIANº CARACTERES PERMITIDOS
Android Native App140
Android Gmail App Varía en función de la línea de asunto
Android Yahoo! App 45
BlackBerryNoN/A
iOS Native App 90
iOS Gmail App 50
iOS Yahoo! App 90
Windows Phone 40
WEBMAILSOPORTA VISTA PREVIANº CARACTERES PERMITIDOS
AOL Mail 75
Gmail Varía en función de la línea de asunto
GMX NoN/A
Yahoo! Varía en función de la línea de asunto
Outlook.com NoN/A
Web.deNoN/A

Ten en cuenta que la mayoría de los clientes de correo colocan la vista previa en una línea aparte debajo del remitente y el asunto. Lo normal también es que aparezca con un estilo de fuente distinto como, por ejemplo, el remitente y el asunto en negrita y la vista previa no. Es importante que tengas esto en cuenta para que todos estos campos se complementen de la mejor manera para que puedas contar lo máximo posible a tus suscriptores en el poco espacio de que dispones.

La principal dificultad que te vas a encontrar es que algunos clientes de correo despliegan esta información de forma diferente en función del dispositivo. Es habitual que en los dispositivos Android el espacio disponible se comparte entre el asunto y la vista previa. De esta forma, cuanto más largo es tu asunto, menos espacio tienes disponible para la vista previa. Una locura, ¿verdad? Bienvenido a mi mundo ;).

Como puedes ver en la tabla que te he adjuntado más arriba, hay también clientes de correo que no despliegan ninguna vista previa. Por todo esto y lo anterior es por lo que siempre recomiendo echar un ojo a las estadísticas. Te recomiendo que a la hora de elegir un proveedor de email marketing, te permita consultar los dispositivos desde los que se leen tus emails. De esta manera, podrás orientar tu estrategia teniendo en cuenta cómo se va a desplegar tu email en las bandejas de entrada de tus suscriptores.

> Lee el Post: "CÓMO ELEGIR TU PROVEEDOR DE EMAIL MARKETING" (abre en una nueva pestaña)»>>> Lee el Post: «CÓMO ELEGIR TU PROVEEDOR DE EMAIL MARKETING»

Consejos para optimizar la vista previa de tus emails

Dos líneas de asunto

Considera la vista previa de tus emails como una segunda línea de asunto y emplea las mismas técnicas que utilizas para impactar con el asunto de tus correos. Aporta valor, sé breve y, si viene al caso, genera urgencia. Te recomiendo leer el siguiente post, puesto que los consejos aquí expuestos son aplicables a la vista previa.

> Lee el Post: "LOS 50 CARACTERES MÁS IMPORTANTES DE TUS EMAILS: EL ASUNTO" (abre en una nueva pestaña)»>>> Lee el Post: «LOS 50 CARACTERES MÁS IMPORTANTES DE TUS EMAILS: EL ASUNTO»

Pirámide invertida. Lo importante al comienzo

Tienes pocos caracteres para explayarte, así que escribe lo importante al principio del texto con las palabras clave y las frases que más impacten. Tienes que ser breve, pero no te pases porque querrás llenar todo el espacio de que dispones en los clientes de correo que más caracteres permiten. Difícil equilibrio, pero tienes que tenerlo en cuenta.

Evita repetirte

La tentación está siempre ahí. No hagas un copia y pega de partes del cuerpo del email o del propio asunto. Esfuérzate por ser creativo y utiliza este espacio extra de que dispones para reforzar el asunto y animar a tus suscriptores a que abran el email.

  • Personaliza. Si te ha ido bien personalizando otras partes de tus correos, ¿por qué no personalizar también la vista previa de tus emails?
  • Aporta más valor. Si el asunto que has elegido ya tiene una llamada a la acción (CTA), utiliza la vista previa de tus emails para aportar más detalles sobre el mismo. Por ejemplo, si el asunto que has empleado dice algo así como «50% de descuento en nuevas prendas», puedes usar la vista previa de tus emails para explicar qué tipos de prendas son las que han llegado como novedad.
  • Incluye una llamada a la acción o una llamada a la acción secundaria. Si te empeñas (porque ya sabes que no es lo más recomendable) en tener más de una llamada a la acción en tus emails, utiliza la vista previa de tus emails para destacar una de ellas u otra secundaria si ya has escrito la principal en el asunto.
  • Honestidad. No engañes a tus suscriptores. No utilices la vista previa de tus emails para levantar expectativas que no se van a cumplir una vez que abran tu email. El remitente, el asunto y la vista previa deben trabajar en equipo para tus suscriptores sepan qué esperar una vez que abran tus emails.
  • Anima a tus suscriptores a hacer scroll. Somos vagos y me incluyo porque yo también soy suscriptor de muchas newsletters y no me apetece hacer algo tan sencillo como un poco de scroll. Nos tienen que animar a ello. Así que, menciona en la vista previa algún artículo o enlace interesante que se encuentra al final del email.

Descárgate ya (¡gratis!) el libro que hará crecer tu negocio sólo con tu email

  • Te muestro las 5 claves que debes conocer para tener una estrategia de Email Marketing mínima viable
  • Los 8 recursos infalibles para tu estrategia de Email Marketing
  • Descubre qué ventajas aporta el Email Marketing a tu negocio que no aportan otras estrategias de Marketing Digital

"*" señala los campos obligatorios

Nombre*
Hidden
Privacidad*
Este campo es un campo de validación y debe quedar sin cambios.

Haz tests A/B

Éste es el todoterreno de los consejos. Sirve para todo lo que tenga que ver, no sólo con el email marketing, sino con el marketing digital en general. Se trata de saber lo que funciona (y potenciarlo) y lo que no (y dejar de emplear recursos en ello). Prueba diferentes combinaciones de vistas previas y asuntos en tus emails. Verás cómo unas combinaciones producen más tasas de apertura y otras incluso más clics.

¿No sabes html? No te preocupes, GetResponse al rescate

Sé que es un trastorno andar implementando código HTML. De hecho, es un idioma más que aprender y tú precisamente lo que no tienes es tiempo. Puede que incluso no tengas ni la más pajolera idea de por dónde meterle mano al código. No te preocupes porque hay una solución más sencilla y de andar por casa. Yo mismo la utilizo en la mayoría de mis envíos. Utilizo un pequeño (no sé si llamarlo) truco con GetResponse, aunque estoy seguro de que lo puedes aplicar con otros proveedores de email marketing.

Lo que te voy a explicar a continuación sirve tanto para dejar la vista previa de tus emails visible en el cuerpo del email como para ocultarla.

Lo primero, entramos en el creador de newsletters de Getresponse y a continuación seleccionamos la opción «Editor de Email».

cómo personalizar la vista previa de tus emails 1

En la siguiente pantalla («Ajustes de newsletter») rellenamos los siguientes campos:

  • Nombre del mensaje. Es el nombre que tendrá la newsletter en nuestra lista de newsletter. No lo verán nuestros suscriptores.
  • Asunto. Aquí ya tienes que comenzar a pensar en tu estrategia combinada con la vista previa. Sigue los consejos que te indicaba antes.
  • De. La dirección desde la que queremos enviar el email. Previamente la has tenido que dar de alta en tu cuenta de GetResponse.
cómo personalizar la vista previa de tus emails 2

De momento, esto es suficiente para lo que pretendo mostrar en esta entrada, así que no es necesario que entres en el resto de opciones disponibles en esta pantalla. Pulsa en «Paso siguiente».

Elige cualquier modelo de los que tienes disponibles para editar. A continuación, añade un bloque de texto en la parte superior y configúralo con el menor tamaño de fuente posible (el editor no deja que sean menos de 8px). Ahí puedes incluir el texto que quieres que aparezca en la vista previa de tus emails por defecto. Los clientes de correo cogerán este texto (y parte de lo que siga a continuación si no has completado el número máximo de caracteres) para mostrar en la bandeja de entrada de tus suscriptores.

cómo personalizar la vista previa de tus emails 3

Pero, como hemos visto antes, quizás tu diseño o tus preferencias pasan por no tener ese texto ahí incrustado. También hay una manera de que el texto no aparezca. Es tan sencillo como poner el mismo color a la fuente que el del fondo sobre el que está escrito el texto. De esta manera, tendremos un texto «invisible» y a prueba de cualquier cliente de correo (incluido Gmail).

Pero hoy hay que contarlo todo. Este truco de invisibilidad tiene un pequeño punto débil. El texto es visible si nuestro suscriptor lo selecciona con el ratón. Vale, ¿quién se dedica a pasar el ratón para seleccionar el texto de una newsletter? Probablemente nadie, pero es mi obligación comentártelo.

Si te sigues atreviendo con el HTML, con GetResponse hay una opción de minimizar este punto débil que te acabo de comentar. En el Editor de Email, accede al editor de HTML en la parte inferior de la pantalla. Ahí sí podemos poner que el tamaño de ese pequeño texto inicial sea de 1px. Voilà! Aunque nuestro suscriptor seleccione ese texto, ya no será visible.

cómo personalizar la vista previa de tus emails 4

Conclusión

Hay mucho trabajo que hacer antes de darle al botón de enviar de tus emails. El primer objetivo de cualquier campaña que realices es la de que tus correos lleguen a su destino. Inmediatamente después de conseguirlo, debes ocuparte mucho de que tus emails sean abiertos para que después realizacen la acción que les indiques dentro. No hay manera de hacerlo en este orden. Si tus emails no se abren, el esfuerzo habrá sido en balde.

Por lo tanto, cuida mucho tu nombre de remitente, el asunto y la vista previa de tus emails. Estos pocos caracteres (comparados con los que habrá en el cuerpo del email), son seguramente los más importantes que escribas en cada campaña que realices.

¿Cómo aparecen tus emails en la bandeja de entrada de tus suscriptores? Compártelo con la comunidad en los comentarios de esta entrada.

¿Quieres saber el retorno de la inversión que puede suponer que tus emails se abran? Descárgate gratis mi calculadora ROI de email marketing.

¿Te gustaría empezar a construir y monetizar tu lista de suscriptores?

Entra a mi masterclass gratuita Tu Email Marketing Mínimo viable.

Con esta masterclass aprenderás:

  • Qué escribir en tus emails.
  • Mi estrategia PRO para pasar de suscriptor a cliente desde el primer email.
  • Cómo hacer que tus suscriptores abran y cliquen tus emails.
  • Todo esto, sin gastar ni un euro en publicidad, sin miles de suscriptores y sin saber de tecnología.

Además, recibirás un consejo diario sobre Email Marketing. Cada día. En tu bandeja de entrada. Listo para implementar.

"*" señala los campos obligatorios

Nombre*
Privacidad*
Este campo es un campo de validación y debe quedar sin cambios.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

pacovargas.es te informa que los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Marina Brocca como responsable de esta web.

Finalidad de la recogida y tratamiento de los datos personales: responder a los comentarios enviados a través de la web. Legitimación: Consentimiento del interesado. Destinatarios: Hosting: Siteground Spain S.L. Hosting  100% seguro. Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en contacto@pacovargas.es así como el derecho a presentar una reclamación ante una autoridad de control. El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no pueda atender tu solicitud. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi política de privacidad.