Email Hacks: No sos vos, ¡Es Microsoft Outlook!

Diseñadores y maquetadores de emails sabemos que Microsoft Outlook es el cliente que más dolores de cabeza nos trae, en cierto punto hasta le tenemos una especie de odio por complicarnos tanto la existencia. Por suerte, hay un lenguaje especial que solo Outlook entiende y es ignorado por todos los demás clientes: Condicionales Comentados mso.

Microsoft Outlook es por lejos uno de los clientes más usados a través del mundo, tanto por consumidores como por empresas. Hay muchas versiones de Outlook, a través de los años es un programa que fue mejorando, cambiando como cualquier otro programa de Microsoft, y hay muchas versiones que están en uso hoy en día.
Entre esas versiones, cabe hacer algunas diferenciaciones:

• Outlook para Mac: Tiene buen soporte de HTML y CSS en general debido a que renderiza de la misma forma que Apple Mail. Siguiendo buenas practicas de diseño y maquetado no se debería tener problemas.
• Versiones de Outlook 2000 - 2003: Renderizan con Internet Explorer, lo que nos da un mejor soporte de HTML y CSS, aunque también tiene algunos huecos como min y max width.
• Microsoft Outlook 2007 y posteriores: Empezó a renderizar los emails con Word, y retrocedió en todo lo que es HTML y CSS, y presenta una serie de bugs a tener en cuenta al momento de diseñar y maquetar un email.

Uno de los principales problemas que nos encontramos es la falta de soporte para el modelo "caja".

Si bien acepta las propiedades width y margin, el soporte para otras propiedades y tags como min- y max-width, padding en divs y p, entre otras, brillan por su ausencia. Esta falta de soporte nos puede traer muchos inconvenientes en nuestros emails, como emails que se van al ancho completo de nuestra pantalla o falta de aire entre los bloques de texto. 

Otro problema que nos encontramos es la falta de soporte para el posicionamiento de elementos con CSS. Si bien los diseñadores de emails no los utilizamos, position, float, top, right, bottom, left no van a funcionar en Outlook. Y otro de los huecos que tenemos con Outlook es la propiedad display que tampoco tiene soporte.

Otros bugs a tener en cuenta en Outlook son:

• Gif animados: Outlook solo va a mostrar el primer frame, asique cualquier información relevante que incluyas en un gif animado tiene que estar en ese cuadro.
• Line-height: esta propiedad tiene problemas, sobretodo cuando se utilizan valores con decimales como 1.5 o valores menores a 0. 
• Outlook muestra las imágenes en su tamaño original, a pesar de que en el código especifiquemos otro tamaño.
• Soporte cero para propiedades list-style, nada de bullets lindos con css.
• Dado que Outlook utiliza Word para renderizar y Word es un programa para escribir documentos, interpreta que nuestro email es un documento pudiendo agregar saltos de página dónde no hay y generando espacios raros e indeseados.

Habiendo dicho esto y dejando claro que Microsoft Outlook 2007-2013 es lo peor de ser un diseñador/maquetador de emails, pasemos a la parte que más nos interesa...

EMAIL HACK: Condicionales para Microsoft Outlook.

Por suerte hubo alguna persona brillante que pensó en nosotros y dijo: "Les voy a complicar la vida... pero no tanto" y creó estos comentarios condicionales que solamente son interpretados por Outlook y nos solucionan varios problemitas de diseño. Simplemente consta de agregar este código:

<!--[if gt mso 9]>

Usa otro cliente de email por favor ! :)

<![endif]-->

Básicamente lo que estamos haciendo es comentar que SI (if) Microsoft Outlook Word esta renderizando, muestre lo que hay dentro del comentario y luego cierra el SI (endif).
En la declaracion del if incluimos dos condiciones más. Por un lado gt, que también tiene otras variables:

• lt: Significa less than, es decir, menor a determinada versión.
• gt: Significa greater than, es decir, mayor a determinada versión.
• lte: Significa less than or equal, es decir, menor o igual a determinada versión.
• gte: Significa greater than or equal, es decir, mayor o igual a determinada versión.

Y luego, las versiones:

• Outlook 2000 = 9
• Outlook 2002 = 10
• Outlook 2003 = 11
• Outlook 2007 = 12
• Outlook 2010 = 14
• Outlook 2013 = 15

En el caso de ejemplo estaríamos estableciendo que SI Microsoft Outlook Word esta renderizando y la versión es mayor a la 9, es decir Outlook 2000, muestre lo que se encuentra comentado. 
Seguramente te estas preguntando qué podría ir comentado, te cuento que por ejemplo podrías agregar tablas contenedoras, que eviten que tu HTML se muestre al 100%, estilos específicos para mso, columnas o filas para generar espaciados, entre otras muchas opciones que se adapten a tu diseño. Es cuestión de pensar un poco y tratar de sacarle el mayor provecho a estos truquitos.

Te comparto algunos links que pueden ser útiles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Post de ActionRocket sobre mso conditionals
Recopilacion de bugs y fixes para Outlook de Mailchimp

¿Conocés algún otro bug de Outlook o algún otro hack que quieras compartir? Comentalo!


¡No te olvides de seguir el blog en las redes sociales!
Twitter: @haceloresponsiv
Facebook: Hacelo Responsive Che
Y todo se repostea en Medium.

También pueden seguirme a mi!
Twitter: @marieseen
Linkedin: Marie Seen