Representación de correo electrónico de Outlook: cómo aprendí a dejar de preocuparme y a amar Outlook

Corrija los problemas de escala de DPI

En las computadoras con Windows, hay una configuración global que las personas pueden cambiar (o, en algunos casos, se establecen más altas de manera predeterminada) que escala el texto y los elementos gráficos para hacerlos más grandes y más fáciles de leer. Esto es excelente para la accesibilidad, pero no tanto para Outlook, ya que solo algunos elementos se amplían y otros no.

Afortunadamente, hay una solución. Primero, debe agregar un espacio de nombres XML a la etiqueta HTML:

Luego, agregue algo de código para corregir la escala de la imagen justo antes de la etiqueta </head>:

Y finalmente, asegúrese de incluir cualquier ancho establecido como una propiedad CSS con píxeles y no como un atributo en sus tablas.

✗ No esto con ancho = ”600 ″ :

Sí, así con style = "width: 600px;" :

Eso solucionará la mayoría de sus problemas para clientes de 120 DPI. Eche un vistazo a esta comparación en paralelo antes y después de esta corrección:

Outlook 2013 a 120 DPI (sin corrección)	Outlook 2013 a 120 DPI (con corrección)

Que diferencia, eh?

No espere que funcionen los efectos de desplazamiento

Outlook no admite la pseudoclase de desplazamiento. Aún debe incluirlo para crear interacciones para aumentar la accesibilidad de su correo electrónico en otros clientes de correo electrónico, pero no se sorprenda si no funciona en Outlook.

No dependa de un GIF animado para transmitir su punto

Los clientes de escritorio de Outlook no admiten GIF animados. Puede hacer que el marco inicial muestre la imagen que desea mostrar en Outlook, o puede ocultar el GIF animado de Outlook y usar codificación condicional para mostrar una imagen fija que desee. (Nuevamente, más sobre la codificación condicional a continuación).

No use contenido interactivo sin un respaldo

Los correos electrónicos interactivos son un gran no para Outlook. Dependen de la codificación AMP o del truco de la casilla de verificación, los cuales no son compatibles con Outlook.

En el caso de AMP para correo electrónico, se mostrará el archivo HTML en lugar del AMP, por lo que no hay codificación adicional para eso. Para la interactividad de pirateo de la casilla de verificación, tendrá que ocultar el contenido interactivo y mostrar el respaldo de Outlook. Nuevamente, la codificación condicional es tu amiga aquí.

No agregue relleno ni márgenes a las imágenes

Outlook elimina el relleno y los márgenes de las imágenes. En su lugar, asegúrese de agregar relleno a la celda de la tabla alrededor de la imagen. O si tiene la imagen en la misma celda que la copia, agregue un margen a la etiqueta alrededor de la copia (<h1>, <h2>, <p>, etc.).

El miedo es el asesino del correo electrónico: el código que necesita para afrontar sus miedos de Outlook

Codificar un excelente correo electrónico para los clientes de correo electrónico de escritorio de Outlook requiere salirse del HTML y CSS "normales". Hay tres tipos de código que ayudarán a que sus correos electrónicos brillen en estos clientes: codificación condicional, propiedades MSO y VML.

Puede ser aterrador trabajar con algo nuevo, pero te prometo que vale la pena. ¿Y ese momento en el que consigues que funcione correctamente? Sentirás que acabas de hacer el Kessel Run en menos de 12 parsecs.

Codificación condicional

La codificación condicional es una codificación que analiza qué cliente de correo electrónico o navegador está usando su suscriptor y solo muestra el código si cumple con el condicional dentro del comentario, como por ejemplo:

Incluso puede usar esto para apuntar a versiones específicas de los clientes de escritorio de Outlook agregando los números de versión:

Sin embargo, Outlook es todo menos sencillo, por lo que los números de versión no se corresponden con el nombre del cliente de correo electrónico:

• Outlook 2000 = mso 9
• Outlook 2002 = mso 10
• Outlook 2003 = mso 11
• Outlook 2007 = mso 12
• Outlook 2010 = mso 14
• Outlook 2013 = mso 15
• Outlook 2016, Outlook 2019 y Office 365 escritorio = mso 16

Y luego puede volverse más complejo al dirigirse a un rango de clientes con menos de (lt), mayor que (gt), menor o igual a (lte), o mayor o igual a (gte). Por ejemplo:

Entonces, si solo está viendo algunas cosas salvajes que suceden en un cliente específico, puede dirigirse a ese cliente específicamente y ocultar y mostrar un mejor contenido para él.

También puede utilizar comentarios condicionales para ocultar contenido de Outlook diciendo "if! Mso" que significa "si no mso":

Algo a tener en cuenta: el código condicional solo funciona en clientes de escritorio de Outlook. Como aquí es donde entran en juego muchos problemas, probablemente los necesitará más que cualquier solución para los clientes de correo web.

Pero también hay formas de apuntar a los clientes web, aunque no hay forma de apuntar a un cliente web de Outlook sobre el otro. Por lo tanto, cuando apunte a Outlook.com, también apuntará al cliente web de Office 365 (pero no al cliente de escritorio).

Puede apuntar a los clientes web de Outlook aprovechando el hecho de que Outlook agrega "x_" a todos los nombres de clase, pero no lo hace para el selector de atributos. Entonces, si tiene una clase "foo" y desea tratarla de manera diferente para los clientes web de Outlook, puede orientarla con este código:

(Gracias a Mark Robbins por esta corrección y a Dylan Smith por howtotarget.email).

Propiedades de MSO

Como se mencionó anteriormente, existe CSS específico para Outlook que puede agregar y que solo afectará a los clientes de correo electrónico de escritorio de Outlook. Aquí hay algunos que encontrará que son bastante comunes, y es posible que ya haya oído hablar de ellos:

mso-hide: todos;

Esta propiedad ocultará todo de los clientes de escritorio de Outlook. Se elimina cuando se reenvía el correo electrónico, así que tenga cuidado de usarlo por sí solo si esa es una función que sabe que sus suscriptores a menudo aprovechan. Puede emparejarlo con el código condicional "si no mso" si es un codificador "por si acaso".

mso-line-height-rule: exactamente;

Esta propiedad garantiza que Outlook muestre la altura de su línea en lo que designe en la propiedad de altura de línea. Sin él, Outlook no respeta necesariamente las alturas de sus líneas. Si trabaja en una industria donde la precisión es clave, probablemente esté muy familiarizado con esta propiedad.

mso-padding-alt

Este es un poco menos común, pero he tenido que usarlo de vez en cuando. Le permite declarar el relleno que es específico de Outlook. Entonces, si el relleno normal que tiene en una celda no se muestra correctamente en Outlook, puede usar mso-padding-alt para establecer valores que se ajusten a su diseño para Outlook.

tamaño-de-fuente-mso-ansi

Este es otro que solo uso ocasionalmente. Le permite establecer tamaños de fuente específicos para Outlook. Entonces, si Outlook hace que su fuente sea un poco más grande que otros clientes de correo electrónico y termina con una línea final corta de la copia que no deseaba, agregue mso-ansi-font-size y establezca un tamaño de fuente que se ajuste a su copia.

Hay muchas más propiedades de MSO que puede usar, así que siga adelante y vea si hay algo que solucione un problema de renderizado por usted.

VML

VML son las siglas de Vector Markup Language. Es la versión de Microsoft de SVG, pero el idioma se ha depreciado y se usa muy raramente (¡yay correo electrónico!). Microsoft tiene la documentación para VML archivada en línea, por lo que aún puede buscar cómo usarla para crear vectores en Outlook, donde todavía es compatible. En teoría, cuando Microsoft haga la transición a su modelo "One Outlook", podremos dejar atrás VML.

Asegúrese de incluir la declaración del espacio de nombres VML. Por lo general, lo agrego al elemento <html> en mi plantilla repetitiva para poder usar VML siempre que lo necesite:

Una vez que tenga eso, puede agregar cualquier VML a su código dentro de los condicionales de MSO:

Ese código formaría un rectángulo azul de 200 px por 50 px. Tal vez no sea algo que realmente pueda usar en un correo electrónico, pero puede usar VML para agregar botones con esquinas redondeadas a su código, imágenes de fondo y degradados de fondo. Campaign Monitor tiene dos herramientas creadas por Stig para ayudarlo a crear imágenes de fondo o botones con esquinas redondeadas. Descubrí que son una excelente manera de agregar VML cuando recién está aprendiendo.

También puede usar VML para crear un posicionamiento absoluto falso, efectos de sombra o un respaldo para admitir el arte CSS en Outlook. Hay muchas cosas que puede hacer con VML una vez que se sumerge.

Viva mucho tiempo y envíe un correo electrónico

Outlook ha sido durante mucho tiempo la pesadilla de los especialistas en marketing por correo electrónico, pero no tiene por qué serlo.

Con las herramientas adecuadas, puede crear hermosos correos electrónicos que se procesan correctamente en Outlook. Consulte los recursos a lo largo de esta publicación para desarrollar sus habilidades de codificación de Outlook y pruébelas en sus correos electrónicos con Litmus Builder y Email Previews. Piense en la codificación de Outlook como un rompecabezas que espera ser resuelto, y es posible que le encante Outlook y todas sus peculiaridades.

Pruebe sus correos electrónicos en Outlook con Litmus Vea cómo se verán sus correos electrónicos en Outlook y solucione cualquier problema antes de presionar enviar. Con Litmus, siéntase seguro de que está creando correos electrónicos con píxeles perfectos con los que sus suscriptores pueden interactuar. Inicie su prueba gratuita →