¿Por qué mis correos electrónicos se ven mal con Outlook Client?

Afrontemos la verdad. Crear correos electrónicos es una tarea bastante fácil. Pero formatear esos correos electrónicos para que sean compatibles con Outlook es una gran tarea. De hecho, más difícil de lo que piensas.

Outlook es el cliente de correo electrónico más utilizado, pero antiguo, que jamás encontrará. Sin embargo, no admite varios avances que se encuentran en otros clientes de correo electrónico como Gmail.

Muestra esto:

Si ha utilizado una imagen PNG con transparencia de fondo, Outlook se volverá loco. No sabe cómo representar tales imágenes. Del mismo modo, puede preguntarse por qué sus botones redondeados (creados con la propiedad CSS border-radius) se ven cuadrados en el cliente de Outlook. Porque Outlook no admite border-radius y varias otras propiedades de CSS.

Estas son las razones por las que sus correos electrónicos de Outlook se ven terribles y lo que podría hacer para mejorar el diseño de su correo electrónico.

¿Por qué mis correos electrónicos se ven mal con Outlook?

El mayor desafío para los especialistas en marketing por correo electrónico ahora es crear una plantilla de correo electrónico para Outlook. Esto se debe a que, a partir de Outlook 2007, Microsoft dejó de usar Internet Explorer para procesar correos electrónicos y comenzó a usar Microsoft Word como su motor de procesamiento. Este cambio se adaptó mejor a los usuarios de Microsoft Office porque les permitió simplemente copiar o pegar contenido de Word o Excel en los correos electrónicos de Outlook. Pero, hizo que el escenario fuera difícil para el generador de correo electrónico basado en HTML. Dado que el correo electrónico HTML se ve diferente en perspectiva, para superar ciertos desafíos, siga los pasos a continuación para mejorar las campañas de correo electrónico.

Desafíos en la representación de correo electrónico con Outlook

Un vendedor de correo electrónico debe tener mucho en cuenta antes de diseñar una campaña de correo electrónico. Necesita saber la suscripción de su cliente que usa Outlook. La versión de escritorio, la versión móvil y la versión web de Outlook difieren completamente entre sí en la representación de un correo electrónico. Cuando se trata de la representación de correo electrónico con Outlook, las siguientes son las cosas a tener en cuenta.

¿Por qué la imagen se recorta y se carga lentamente?

Cuando se trata de la inclusión de imágenes en correos electrónicos, Outlook tiene ciertas limitaciones en el tamaño de la imagen.

Los boletines por correo electrónico juegan un papel importante en las campañas de marketing por correo electrónico. Se hacen dinámicos agregando imágenes en él. A veces, cuando se agrega una imagen larga a la plantilla de la campaña, se recorta o se vuelve a escalar en el extremo receptor. Esto se debe a que Outlook recorta la parte superior de la imagen que supera los 1728 píxeles de altura. Entonces, en este caso, necesitamos cambiar el tamaño de la imagen por debajo de 1728px para que aparezca sin recortes.

En situaciones en las que no se puede cambiar el tamaño de la imagen, la mejor alternativa es recortar la imagen en dos imágenes separadas y luego usarla en la campaña.

La imagen no se redimensiona

Outlook no funciona bien con imágenes restringidas con HTML. Es decir, si la plantilla de correo electrónico se agrega con una imagen que se cambia de tamaño usando HTML, Outlook mostrará la imagen solo en el tamaño original y no en el valor de tamaño cambiado. Por lo tanto, debemos asegurarnos de que la imagen cambie de tamaño mucho antes de que se use en cualquiera de las automatizaciones de correo electrónico.

Imágenes de fondo

La mejor estrategia para "sorprender" a un cliente es crear un correo electrónico con una imagen de fondo que muestre la marca. Podemos hacer que las imágenes de fondo tengan más propósito al superponer textos en vivo en la imagen. El texto en vivo también nos ayudará a transmitir el propósito del correo electrónico incluso en momentos en que el cliente no se muestra con la imagen.

Sin embargo, Outlook no admite imágenes de fondo con HTML. Necesitamos usar VML (Vector Markup Language) para que el suscriptor vea las imágenes de fondo.

Ingrese el siguiente código en la etiqueta <body> de su HTML para que la imagen de fondo cubra toda la ventana del correo electrónico

 <div> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="/IMAGE.png" color="#000000"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="IMAGE.png">

El código anterior funcionó perfectamente al mostrar la imagen de fondo con los correos electrónicos abiertos en Outlook 2007, 2010 y 2013. Pero Windows Mail 10 necesitaba algunas modificaciones en el código para agregar la imagen con su fuente que permite la imagen de fondo.

El siguiente código permitirá que la capa superior de la imagen sea transparente y ayudará a arreglar la imagen de fondo.

 <td valign="top" height="700" background="Image Live URL Here" bgcolor="#f7901e"> <!--[if gte mso 9]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" src="/Image Live URL Here" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"> <v:fill opacity="0%" color="#f7901e" /> <v:textbox inset="0,0,0,0"> <![endif]--> <div> <!-- HTML Content Here --> </div> <!--[if gte mso 9]> </v:textbox> </v:fill> </v:rect> </v:image> <![endif]--> </td>

Los GIF animados no caben

El video habla más que las palabras.

Pero, técnicamente hablando, una plantilla de correo electrónico necesita una codificación compleja para admitir videos. Pensando en alternativas, como comercializador de correo electrónico, veo que GIF es una opción dinámica. Los GIF son imágenes animadas para transmitir un mensaje en la forma más simple. Outlook no es compatible con GIF.

La imagen GIF se carga, pero solo el primer cuadro del GIF se muestra al cliente.

Si tiene suscriptores de Outlook en la lista de correo electrónico, asegúrese de que el primer cuadro de la imagen comparta el contexto principal del GIF.

Considere usar la parte de animación como una ventaja adicional para los suscriptores con otros clientes de correo electrónico.

Propiedad de radio de borde

Hablando de marketing por correo electrónico, el botón de llamada a la acción es una función que hace que el correo electrónico genere un cliente potencial. ¿Cuántas veces hemos hecho clic en el botón CTA de punta redonda?

La propiedad del radio del borde es una propiedad CSS común, pero no funciona bien con Outlook. Con Outlook, los suscriptores reciben botones CTA con bordes cuadrados.

Espacios en blanco adicionales

A veces, los espacios en blanco sobre la imagen como solíamos ver en la opción de vista previa de impresión después de que el correo electrónico se procesa con Outlook.

Como se dijo anteriormente en el blog, esto se debe a que Outlook 2007 usa Microsoft Word para procesar correos electrónicos HTML.

Por lo tanto, el correo electrónico se ve un poco diferente del diseño real.

Problema de fuente principal

Si el dispositivo del suscriptor carece del estilo de fuente principal, Outlook representará todo el correo electrónico en Times New Roman, ignorando la fuente alternativa mencionada en el código.

 <!--[if mso]> <style> h1 { font-family: Primary font, Fallback font; } </style> <![endif]-->

La plantilla de correo electrónico debe ser perfecta

Ejecutas una campaña de correo electrónico para una tienda de comercio electrónico. La plantilla que diseñe debería ayudar a enviar correos electrónicos efectivos porque este no es el antiguo marketing de campo tradicional donde los clientes pueden conocerlo en persona.

La apariencia de la persona de marketing define la credibilidad de la marca. Entonces, ¿qué estamos enviando ahora para representar nuestra marca?

correos electrónicos La plantilla de diseño de su correo electrónico da la primera impresión de su marca al cliente. Cuanto mejor se ve un correo electrónico con el contenido, mejor es la marca

Sin embargo, no tenemos la libertad de usar opciones de formato avanzadas para que nuestro correo electrónico se vea atractivo. Es posible que veamos que el correo electrónico se ve perfecto en Outlook, pero ese no será el escenario cuando lo envíen otros destinatarios de correo electrónico.

Debe ceñirse al uso de tablas en su correo electrónico html. No intente usar elementos div con posición y flotantes ya que Outlook no lo admite. Desafortunadamente, no hay una solución para esto a partir de ahora.

La opción de darse de baja es imprescindible

Al administrar una tienda de comercio electrónico, siempre queremos mantener a nuestros clientes comprometidos con nuestra marca.

¿Cómo hacerlo?

Boletines. Proporcione a los clientes información potencial sobre la tendencia y las actualizaciones en su nicho de negocio.

Pero al final es el cliente quien decide seguir o no tu marca. Una vez que un cliente se haya suscrito con nosotros, se le debe proporcionar la opción de darse de baja de la lista de suscripción en cualquier momento.

El botón para darse de baja es imprescindible en todos los boletines que enviamos a nuestros clientes y si nuestros clientes no pueden ver este botón,
¿Esperar que?
¡Podríamos recibir spam!

El envío de correos electrónicos desde Outlook hace que nuestra marca corra este riesgo porque no ofrece esta opción estándar.

Los enlaces se cambian a texto de color azul/púrpura subrayado

Como especialistas en marketing por correo electrónico, debemos hacer un uso completo del correo electrónico que enviamos a los clientes.

Podemos incluir enlaces de suscripción, enlaces a nuestros blogs de tendencias, enlaces de redirección a nuestro sitio web para lograr la participación del cliente.

Cuando se envía un correo electrónico HTML desde Outlook, dichos enlaces aparecen en texto azul/púrpura subrayado cuando se visualizan en diferentes clientes de correo electrónico.

Para evitar este problema, utilice la etiqueta <font> y envuelva el texto con una etiqueta <span> y un atributo de estilo.

Intenta usar el siguiente código-

 <a> <span> <font color="#E3A216"> Click me </font> </span> </a>

Outlook puede estar bien para llenar su bandeja de entrada personal.

Pero, hablando de negocios, mira fuera de la caja.