Dominar Outlook: una mirada retrospectiva a los problemas comunes de representación

Microsoft es uno de los principales actores de la industria del correo electrónico. Microsoft Outlook y su homólogo basado en la web Outlook.com tienen una cuota de mercado de más del 10% en conjunto. ¡Esto es bastante grande!

En un mundo en el que los usuarios pueden elegir entre una gran variedad de clientes de correo electrónico, ¿cómo se ha mantenido Outlook tan popular? Microsoft Office no solo se instala comúnmente en computadoras de empresas de todo el mundo, sino que muchas computadoras domésticas y portátiles con Windows vienen con MS Office preinstalado. El cliente de correo electrónico predeterminado que se incluye con MS Office es… Outlook.

Luego está Outlook.com, que comenzó su carrera como cliente de correo electrónico como Hotmail, en 1996. En 1997, Microsoft adquirió Hotmail por aproximadamente $ 400 millones y lanzó Hotmail como MSN Hotmail. Más tarde fue rebautizado nuevamente a Windows Live Hotmail. Finalmente, en 2013 Hotmail fue reemplazado por completo por Outlook.com. Con la historia de Outlook.com entretejida con Hotmail, no debería sorprendernos saber que en 2015, Outlook.com tenía más de 400 millones de usuarios activos.

Problemas de representación comunes en Outlook

La creación de correos electrónicos para Outlook siempre ha sido un desafío. Desde Outlook 2007 en adelante, Microsoft dejó de usar Internet Explorer para procesar correos electrónicos y en su lugar optó por usar Microsoft Word como motor de procesamiento. Excelentes noticias para los usuarios de Microsoft Office, que pueden copiar y pegar elementos de Word o Excel en sus correos electrónicos de Outlook sin problemas. No son tan buenas noticias para los especialistas en marketing de correo electrónico y los desarrolladores que utilizan HTML para crear sus correos electrónicos. Intente copiar y pegar una página web HTML en un documento de Word y obtendrá una idea de cómo Word traduce HTML.

Naturalmente, los talentosos desarrolladores de correo electrónico comenzaron a hacer su magia en el desarrollo de una plétora de hacks de correo electrónico para asegurarse de que sus hermosos correos electrónicos HTML se reproduzcan con la misma belleza en Outlook. No es una tarea fácil, ya que muchos hacks tienden a involucrar VML (Vector Markup Language), que no es algo que sueles aprender en la escuela de duros golpes para el desarrollo de correo electrónico.

Aquí hay un breve resumen de algunos de los problemas más populares que enfrentan los desarrolladores de correo electrónico cuando desarrollan correos electrónicos para Outlook:

Usar tablas en el desarrollo de correo electrónico

En el desarrollo web moderno, puede usar contenedores como divs para contener contenido, con tablas que se usan únicamente para datos tabulares. Sin embargo, para colocar elementos como divs correctamente dentro de una página HTML, a menudo se requieren atributos CSS como flotante y posición.

Outlook no admite estos atributos. Para estructurar correctamente sus correos electrónicos para obtener la máxima capacidad de procesamiento entre dispositivos / clientes / navegadores, los desarrolladores usan tablas para crear correos electrónicos.

Si bien las tablas han estado funcionando para los desarrolladores de correo electrónico durante años, son restrictivas en lo que se puede lograr en términos de diseño de correo electrónico. Los diseñadores deben pensar en términos de filas y columnas para que sus diseños se puedan construir fácilmente con tablas.

Imágenes de fondo con VML

Texto en vivo. Texto en vivo. Texto en vivo. Es el mantra del marketing por correo electrónico. Tenga tanto texto en vivo como pueda en sus correos electrónicos para asegurarse de que sus correos electrónicos lleguen a la bandeja de entrada (en lugar de correo no deseado), sean accesibles para todos y legibles con las imágenes desactivadas.

Las imágenes de fondo pueden permitirle superponer texto en vivo sobre una imagen, ya sea un patrón o una hermosa foto. Las imágenes de fondo pueden crear una hermosa sensación de profundidad en los diseños de sus correos electrónicos, sin dejar de ser accesibles.

Sin embargo, Outlook no admite imágenes de fondo con HTML puro. Outlook requiere el uso de VML para que las imágenes de fondo funcionen. Afortunadamente, no necesita aprender VML en su totalidad para poder usar imágenes de fondo en su correo electrónico. Campaign Monitor tiene una gran herramienta que generará su código VML y HTML para que pueda brindarle imágenes de fondo a prueba de balas en sus correos electrónicos.

Sin soporte para GIF animados

Con la falta de soporte de video en el correo electrónico y los vendedores de correo electrónico que buscan hacer que sus correos electrónicos sean más dinámicos y atractivos, el humilde GIF animado es la manera perfecta de darle vida a sus correos electrónicos.

Sin embargo, Outlook no admite GIF animados. Si bien la imagen se cargará y aparecerá para el usuario, solo se renderizará el primer fotograma de la animación.

Si tiene suscriptores que abren correos electrónicos en Outlook y está usando GIF animados, haga que ese primer cuadro de la animación cuente. Mantenga el GIF simple y la animación no sea parte integral del mensaje, sino más bien un beneficio adicional para aquellos que pueden ver la animación completa.

No se admite el relleno en las etiquetas p, div y a

El relleno es un gran atributo de CSS que puede introducir espacio en sus elementos. Es un atributo CSS útil para colocar elementos en un correo electrónico o para crear un respiro alrededor de los elementos para mejorar el diseño.

Una solución fácil para esto es utilizar los atributos HTML de espacio de celdas y relleno de celdas en la tabla para crear espacio alrededor de los elementos dentro de una tabla.

Para introducir relleno en sus párrafos, la etiqueta p, use el atributo de estilo mso-line-height-rule: exactamente; combinado con la altura de la línea para darle un respiro a su copia y texto, lo que hace que sea más fácil de seguir:

 <p>Your text here</p>

No es solo Outlook

Si bien el cliente de escritorio ha planteado problemas para los desarrolladores de correo electrónico durante años, ahora hay una nueva versión de Outlook.com para que los desarrolladores de correo electrónico la aborden, que a su vez ha generado su propia parte de las peculiaridades de la representación. Muchos de los cuales son diferentes a las peculiaridades que se encuentran en Outlook. (Por supuesto.)

Un cambio no ha sido un paso en la dirección correcta: Outlook.com elimina todo lo que esté incluido en un conjunto de consultas de medios. Por lo tanto, no hay forma de diferenciar entre la versión móvil o de escritorio de un correo electrónico.

Sin embargo, hay buenas noticias. Hay algunos errores de renderizado que estaban en versiones anteriores de Outlook.com que se han reparado. Más notablemente: el truco de flotación / margen. Para que la versión anterior de Outlook.com entendiera estos atributos CSS, tenían que escribirse usando mayúsculas o una combinación de mayúsculas y minúsculas. Ahora el caso no importa.

Anteriormente, para que Outlook.com entendiera el atributo de margen, tenía que usar:

 Margin: 10px;

Pero ahora puedes usar:

 margin: 10px;

Para obtener una lista más completa de cambios, el desarrollador de correo electrónico Remi Parmentier ha escrito un excelente blog sobre lo que necesita saber sobre el nuevo Outlook.com y lo que los desarrolladores de correo electrónico deben buscar.
Dominar Outlook

Mantener su código relevante

Si alguna vez ha trabajado como desarrollador de correo electrónico, a menudo puede parecer que las publicaciones de objetivos de la capacidad de procesamiento de correo electrónico se mueven más de lo debido. A medida que el desarrollo del correo electrónico continúa evolucionando, siempre habrá nuevas técnicas que deben "traducirse" a Outlook.

Por ejemplo, cuando se introdujo el desarrollo de correo electrónico híbrido / esponjoso para garantizar que la aplicación móvil de Gmail representara una versión móvil de un correo electrónico, los desarrolladores de correo electrónico también crearon nuevas técnicas para permitir que Outlook procese esos correos electrónicos.

A medida que los desarrolladores de correo electrónico van más allá, con muchos aspirantes a crear correos electrónicos sin tablas, estas nuevas técnicas tendrán que simplificarse para las muchas versiones de Outlook que todavía están en uso.

Es justo decir que los desarrolladores de correo electrónico innovadores y talentosos nunca han tenido más demanda. VML aún no se ha dominado en el correo electrónico, y mientras Outlook use Word como su motor de renderizado, esta será un área clave en la que los desarrolladores de correo electrónico pueden continuar impulsando sus conocimientos y su valor.

La creación de correos electrónicos lleva tiempo

Con todos estos desafíos que Outlook impone a los desarrolladores de correo electrónico, así como la creciente lista de clientes y dispositivos de correo electrónico que necesitan soporte, no es de extrañar que una gran parte del tiempo dedicado al marketing por correo electrónico se dedique al desarrollo y prueba de correos electrónicos HTML.

En nuestro Estado de la producción de correo electrónico de 2016, más del 44% de los encuestados informaron haber dedicado más de 3 horas al desarrollo de correo electrónico. Esto no es poco tiempo y debe tenerse en cuenta al analizar un flujo de trabajo completo de marketing por correo electrónico.

Outlook siempre ha sido una bestia engañosa para los desarrolladores de correo electrónico. Desafortunadamente, no se puede ignorar, ya que tiene una cuota de mercado de clientes de correo electrónico considerable, que podría ser mayor si trabaja en el sector del marketing B2B. Simplemente, no se puede ignorar Outlook.

¿Tiene problemas para que sus correos electrónicos funcionen en Outlook?

Nos hemos asociado con Microsoft para priorizar los errores de procesamiento de correo electrónico en Outlook, identificar problemas más rápido y anunciar mejoras y correcciones a la comunidad.

Ayúdanos a mejorar Outlook y envía tu error de renderizado.

Envíe un error de renderizado de Outlook →