Blog > Tips de email marketing

11
Junio-2011

Problemas para crear un html que se vea bien en Microsoft Outlook 2007/2010

Microsoft Outlook 2007/2010 suele provocar problemas adicionales con la visualización de los mensajes de HTML.

Estas nuevas versiones a diferencia de las anteriores que utilizaban el motor de IE para procesar los correos, utiliza el motor de Word.

Muchos problemas pueden ser remediados evitando las hojas de estilo en cascada, algunos tags HTML (DIV, SPAN, EMBED, etc) y Javascript. Sin embargo, la utilización de Outlook 2007/2010 trae nuevos problemas.



Considere los puntos siguientes cuando diseñe para Outlook 2007/2010:


Evitar layouts donde pequeños espacios son requeridos. La propiedad cell-padding no es fiable, dado que Outlook va a poner el padding fuera de la caja.

Utilizar atributos de tamaño para las tablas. Outlook 2007/2010 no mide siempre las cajas dentro de las tablas correctamente si están en blanco.

Especificar el tamaño de cada imagen. Además, asegúrarse que el tamaño forma parte de las propiedades del archivo. Es posible que de todos modos Outlook inserte un espacio debajo de cada imagen, para asegurarse de que no haya espacio conviene agregar en la etiqueta de cada imagen la propiedad css style="display: block;"

En cuanto a los selectores CSS da soporte a varios pero falla en los siguientes:

  • *
  • e ]] f
  • e:active, e:hover
  • e:focus
  • e:first-line
  • e:first-letter

Propiedades CSS básicas que no soporta:

  • float
  • clear
  • display
  • background-image
  • background-position
  • background-repeat
  • border-spacing
  • visibility
  • opacity
  • overflow
  • height
  • width
  • vertical-align
  • Atributos de posicionamiento (position, left, right, top, bottom)

A continuación se muestran algunos puntos básicos para pasar la prueba de fuego:

  • Todas las sentencias CSS serán aplicadas en línea 
    Ejemplo: [[p style="color: #efefef;"]]Texto[[/p]]
     
  • Si la maqueta o estructura posee columnas deben implementarse mediante tablas.
     
  • No se deben usar atributos CSS de posicionamiento, dimensiones e imágenes.
     
  • Las dimensiones deben darse por medios de los atributos de tablas, 
    Ejemplo: [[td width="100" height="200"]][[/td]]
     
  • No se deben usar imágenes de fondo.
     
  • No debe usar GIF animados, solo se mostrará el primer fotograma
     
  • No debe usarse ni Javascripts ni flash, no funcionarán

Ver También:

¿Cómo diseñar un newsletter y que se vea bien en todos los clientes de correo?

Comentarios

Deja tus comentarios
Guía paso a paso para hacer su primer envío con NewsMaker, la herramienta de email marketing más fácil y poderosa.
Más Leídos