Cómo mejorar tus Emails para Outlook: Trucos para conseguir una mejor visualización
Para mejorar tus emails de Outlook- revisa el diseño
Conseguir que tus campañas tengan el mejor resultado para llegar correctamente (y no a los filtros de spam) a los clientes es lo más importante para cualquier agencia. Para cumplir este objetivo, varios departamentos deben colaborar de manera unida: escribir un buen copy, diseñar los emails y finalmente desarrollar el código para enviarlos.
Pero no solo tenemos que tener en cuenta el mensaje y el público objetivo, sino también la forma en la que ese mensaje se va a visualizar, aunque no solo en cuanto al dispositivo (móvil o tablet o pc) sino también el cliente de correo en el que se va a renderizar.
Tristemente, no todos los clientes leen el código de la misma manera, lo que produce diferentes resultados de una misma plantilla. En concreto Microsoft Outlook es el que más complicaciones genera porque desde su versión del 2007 Outlook empezó a utilizar el sistema interno de Microsoft Word para renderizar sus emails.
¿Y esto qué quiere decir? Pues que como no es capaz de leer HTML y CSS completamente, modifica el código que tan cuidadosamente hemos desarrollado pasándolo por el filtro del Word.
Por eso mismo os vamos a explicar unos pequeños hacks o arreglos en el estilo que tenemos que tener en cuenta para conseguir que también la gente que utiliza Outlook pueda ver los emails tal y como los hemos diseñado.
Safe-Fonts para Outlook
La lista de tipografías funcionales en Outlook es limitada. Si intentas utilizar una tipografía no soportada por el programa será siempre cambiada a Times New Roman.
Es cierto que no podemos utilizar la misma variedad de fuentes en un email que en una landing page, pero sí podemos evitar que al menos no veamos siempre Times New Roman. La manera de lograrlo es utilizando safe fonts o fuente seguras, o en otras palabras, tipografías que se renderizan en todos los clientes de la misma manera.
Aquí tenéis una pequeña lista sobre la que elegir:
- Arial
- Arial Black
- Courier
- Courier New
- Georgia
- Tahoma
- Verdana
Inline CSS
No todas las versiones de Microsoft Outlook leen el CSS que incluimos en el <head> de nuestro HTML, por esto mismo tenemos que incluir los estilos de manera extra en línea.
Es verdad que esto nos va a hacer el código más complicado de editar posteriormente, pero es una buena práctica a tener en cuenta.
Outlook añade un borde de 1px a las tablas
Puede que si no utilizamos un color de fondo para nuestra tabla no nos demos cuenta de esto, pero Outlook añade un borde de 1px a todas las tablas de nuestro email.
Para poder solucionar esto simplemente tenemos que utilizar la función de border-collapse en cada uno de los td de nuestro email. Esta función podemos añadirla en los estilos del head o directamente en línea en cada una de las td.
Y también espacios innecesarios entre ellas
Utilizar el sistema de renderizado de Word hace que Outlook procese los píxeles de manera diferente, los transforma en puntos (pt) y por eso mismo los espacios en blanco se van a ver multiplicados por el factor de diferencia entre pixeles y puntos.
La mejor manera de resolver esto es decir a Outlook que no deje espacios inventados entre las tablas y las celdas, y esto lo conseguimos agregando a cada una de las tablas estos atributos:
Outlook ignora los márgenes y los paddings de las imágenes
¿Te ha pasado alguna vez que has visto tu email y de repente los espacios en blanco que habías puesto han desaparecido?
Esto es porque outlook no renderiza las propiedades margin y padding del CSS cuando las ponemos en una imagen:
Para solucionar esto podemos utilizar aspase y hspace, que nos añade los espacios vertical u horizontalmente.
Declara doblemente el tamaño de las imágenes
Outlook puede ajustar el tamaño de las imágenes al de la tabla automáticamente al igual que los demás clientes. Pero mientras que ellos requieren un código de CSS en-línea más sencillo
Outlook requiere que añadamos la medida deseada, además de como estilo en-línea, como un atributo. Así conseguiremos que nuestras imágenes tengan una visualización óptima.
Aceptemos las limitaciones
Hay que ser realistas y aunque hasta ahora habíamos podido engañar a Outlook para conseguir la solución que queríamos, hay dos cosas contra las que no podemos luchar:
1- Incrustar formularios o videos directamente en el email (aunque esto no es solo problema de Outlook, la mayoría de los clientes tampoco lo permiten).
2 - Utilizar imágenes de fondo, ya que no se mostrarán. Solo funcionan en outlook.com pero no en los programas instalados en el sistema operativo.
3 - No soporta GIFs.
Y tras estos pequeños trucos para mejorar nuestro código, nos queda el consejo definitivo:
Testea, Testea y Testea
Visualiza tu email desde todos los clientes y en todos los dispositivos posibles, revisa outlook.com, revisa Android, iPhone, la versión de escritorio, la versión online desde diferentes exploradores No vas a conseguir un resultado 100% idéntico en todas las plataformas, pero al menos sí que la visualización sea óptima.
Como una ayuda final, para mejorar tus emails para Outlook os dejamos un link de cada uno de los tipos de etiquetas HTML que son compatibles con cada cliente de correo para así montar el código de manera que no os vaya a dar problemas de visualización: https://caniuse.email/
Trish Recuero