El correo electrónico HTML en Gmail y Outlook 2007

Por Maikel González Suárez | 2008-02-25 | email, html

Actualizado 11 de junio de 2008

Es cierto que el correo electrónico no fue creado originalmente para el envío de documentos HTML al igual que la Web. Pero hoy la mayoría de los clientes de correo electrónico suportan HTML y muchos de ellos lo utilizan como formato predeterminado.

Técnicamente podríamos enviar un documento HTML como un archivo adjunto, pero eso sería complicar la experiencia de los usuarios finales teniendo que abrir una nueva aplicación cuando su cliente de correo electrónico puede ya manejar HTML.

El envío de correo electrónico HTML es ampliamente utilizado, ejemplo de ello son los boletines de negocio, los cuales se benefician con las bondades que permite el uso de HTML y CSS, pues obviamente su presentación es superior al del texto plano.

Vamos a ver una introducción sobre los aspectos fundamentales a tener en cuenta en la creación de un correo electrónico HTML, específicamente para dos de los clientes de correo más usados Gmail (vía Web) y Outlook 2007 (PC), pues han sido los que más dificultades han generado.

Gmail

El principal inconveniente de Gmail es que no soporta CSS incrustado en la cabecera (elemento <style> dentro del elemento <head> o <body>) ni tampoco referenciado a un fichero CSS externo (elemento <link> dentro del elemento <head> o <body>). Gmail no soporta CSS a menos que esté en línea, de esta manera se pueden obtener buenos resultados al menos para lo básico. De ahí que tampoco soporte selectores CSS.

Principales propiedades CSS que no soporta :

background-image
background-position
background-repeat
float
font-family
height
list-style-image
visibility
opacity
z-index
Atributos de posicionamiento (position, left, right, top, bottom)

Microsoft Outlook 2007

Outlook 2007 a diferencia de Gmail si soporta el elemento <style> dentro del elemento <head> o <body> así como <link> dentro del elemento <head> o <body>. 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)

El hecho de no soportar float supone un retraso en el diseño de correos en 5 años, etapa cuando se usaban tablas para maquetear. Lo cierto es que muchos de los diseñadores más jóvenes que comenzaron con CSS/XHTML nunca han utilizado tablas en sus proyectos deberán retomar la vieja escuela. Sin embargo, es de notar que los correos maqueteados con tablas son más consistentes y accesibles.

Conclusiones

Teniendo en cuenta todos elementos se puede ver la difícil labor para lograr un correo electrónico HTML compatible para la mayoría de los clientes. Sin embargo, si se logra ver correctamente un diseño en Gmail y Outlook 2007 puede decirse que ha pasado la prueba de fuego y prácticamente dar por hecho que se muestre correctamente para el resto de los clientes de correo (al menos los más usados).

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 texto con imágenes de fondo.
¿Se anima añadir alguna más?

Fuentes

20 comentarios

Añadido por Maikel el 2008-06-11

Realmente no conozco solución alguna para este problema de colocar imágenes de fondo. En el artículo había un error al respecto a ese punto, pues lo daba como sugerencia por medio del atributo background para tablas. Campaign Monitor acaba de actualizar el informe sobre soporte de CSS por los soporte de CSS.

Añadido por Gustavo el 2008-06-11

Saludos, les escribo para comentarles que estoy metido en el grandisimo problema generado por las buenas ideas de microsoft para outlook 2007, estoy diseñando un programa de envio de mails, y he tratado de generar un standard html para el correo que se pueda visualizar en casi todos los servidores de correo, pero por requermientos de usuario, necesito manejar una imagen de fondo, cosa que pareciese imposible en outlook 2007, ya no se que hacer, he utilizado las mil y unas herramientas que existen... al final me llevan a concluir de que "NADA DE IMAGENES DE FONDO EN OUTLOOK 2007"..Por favor quisiera sabes si habra una solución a mi problema?...

Añadido por Maikel el 2008-06-06

Añadir que Outlook 2007 no reconoce bordes en imágenes a pesar que teóricamente se supone que los reconocía. http://www.email-standards.org/blog/entry/outlook-2007-doesnt-show-image-borders/

Añadido por Marcela el 2008-05-30

HOla, Te quería hacer una pregunta si es que puedes ayudarme, Tengo un programa de envio de correos (autoresponder unlimited) pero solo envía mails de texto plano. Mi pregunta es si se puede modificar para hacer que envíe los mails con formato html para poder darle una mejor imagen a los correos y si sabes como o que código debo insertar para que tenga este editor html. Si alguien sabe también le agradecería mucho ayudarme ya que no soy experta webmaster

Añadido por Leandro el 2008-05-17

Esto no me ha dado resultado: Las imágenes de fondo serán colocadas por medio del atributo background de las tablas, ejemplo: Pongo las imagenes como background dentro de una tabla, pero el Outlook no me las muestra. Ahora cuando pongo reenviar en ese mail el mail ahi recien aparecen las imagenes, pero la idea es que las personas no tengan que hacer eso para poder ver el diseño completo. ¿Alguna solucion para esto?

Añadido por Gabriela el 2008-07-07

Hola que tal,mi problema también son las imágenes background, pues no se pueden ver. Pero de lo que he leido y espero haber entendido bien es de que para el Outlook 2007 se puede ligar una hoja de estilos externa?? con el link?...esto es así, y si es así esto afecta a los demás clientes de correo electrónico(hotmail, yahoo, outlook 2002,2003) saludos

Añadido por Zaikoms el 2009-02-17

Creo newsletters con imágenes de fondo y se ven correctamente (al menos para el envío desde gmail). Siempre las coloco desde tablas y no he tenido problemas. Saludos!

Añadido por Dawen el 2009-05-07

Mi gran problema es que mi querido jefe quiere poner una cabecera pra todos los correos que salgan de la empresa, con este punto no tuve probemas, lo problemas empezaron cuando me dijo quesi no salia centrada repecto a un folio, que cuando se imprime sale la cabecera cortada y no sale entera... lo raro es que la misma cabecera en el outlook 2003 no tiene ese problema. Saludos

Añadido por desarrollo web el 2009-07-16

Excelente artículo. Es una lástima que para maquetar newsletters/boletines tengamos que estar maquetando con tablas y de una forma para nada estandar... Un saludo, Alejandro Arco

Añadido por Margarita el 2009-09-14

Llevo todo el verano queriendo abrir el programa y no hay posibilidad. Deseo me digan que ocurre, de lo contrario me daría de baja. Attmente Margarita

Añadido por Carlos el 2009-11-04

Buenas tardes, tengo comprobado que outlook sigue haciendo de las suyas y no reconoce las imagenes de fondo asi que ya desisto, sin embargo Gmail si que lo reconoce, claro esto es un problema porque ahora dependiendo del gestor de correo que utilice cada persona el mensaje se vera bien o mal... en fin... asi va microsoft..

Añadido por Maikel el 2009-11-13

Les comparto una herramienta online que permite convertir las sentencias CSS a atributos inline, lo cual facilita este duro trabajo de darle los estilos al boletín: http://inlinestyler.torchboxapps.com/styler/

Añadido por Maikel el 2010-01-06

Otra herramienta online que permite convertir las sentencias CSS a inline. http://www.mailchimp.com/labs/inlinecss.php

Añadido por Marisa el 2010-04-27

NO PUEDO ENTRAR EN MI CORREO ELECTRONICO Y ME ACONSEJAN ENTRAR POR html

Añadido por helen el 2010-06-09

alguien me puede decir detalladamente como hago para enviar un boletin htl x gmail??? pero paso x paso..donde db ir primero , dsps, etc,, esque no se nada de web ni diseño pero ya me lo tome como un reto terminar este trabajo! Gracias!

Añadido por adrian el 2010-10-22

Conclusion, un montón de escrituras al pedo que no resuelven el problema de nadie. Si te gusta escucharte hablá frente al espejo.

Añadido por Basi el 2011-08-25

Hola compañeros, ya buscando por todos lados alguna respuesta , he realizado un boletín news letter en Html, he realizado test en Gmail, Hotmail, Thunderbirt, pero el cliente usa outlook y no le aparecen las imagenes de fondo , puede alguien ayudarme por favor, llevo dos dias de reatraso en la entrega y no soy capaz de dar con la tecla,, Mil gracias.

Añadido por alexander yosafat urias hernandez el 2011-09-27

hola

Añadido por alexander yosafat urias hernandez el 2011-09-27

hola lindas chicas

Añadido por vitogq el 2011-10-11

Mi problema esta con los enlaces no me aparecen en gmail, se ven Texto en lugar de Texto Como gestor de correo uso phpmailer. Un saludo