Diseñando correctamente el mail en HTML – Parte 3: Casos especiales – Gmail, Lotus Notes y Outlook 2007

Como veníamos analizando en las entradas anteriores, que un mail se vea exactamente como nosotros intentamos diseñarlo, puede ser una tarea complicada.

Quienes dificultan la tarea son los diferentes clientes de correo y webmails. A continuación, nos vamos a detener en tres casos especiales: Gmail, Lotus Notes y Outlook 2007.

Veremos a continuación preguntas frecuentes sobre errores en la visualización de un mail hecho en HTML:

En Gmail:

¿Cómo consigo que tome el color de fondo?
Hay que definirlo dentro de una celda TD como bgcolor=. No lo va a reconocer si es un estilo CSS.

¿Cómo hago para que muestre una imagen de fondo?
Será necesario definirla con el atributo background= dentro de la celda TD. No se puede hacer con CSS.

¿Cómo controlo el margen dentro de una celda?
El estilo no funciona en las celdas de una tabla. La solución es usar padding.

¿Cómo hago para agregarle un borde a una tabla?
No lo va a tomar si está definido como un estilo de borde dentro de un tag TD. Hay que definirlo en un DIV.

¿Cómo consigo darle un color específico a un link?
Habrá que definir la fuente en la celda TD, para que se aplique tanto a la tag P como a la A, y agregar el estilo color= en la tag A.

¿Cómo lo corrijo cuando el texto y el link quedan de dos tamaños distintos?
Si el link (A) tuviera un tamaño diferente al del resto del texto, habrá que encerrar el A dentro de una tag P.

En LotusNotes:


¿Por qué las celdas no se ven en el orden que las hice?
Para asegurarse que cada celda se muestre en el lugar que corresponde, la mejor opción es crear una tabla principal que contenga a otras tablas más pequeñas donde estén las secciones fundamentables del mail (como ser el header, contenido y footer).

¿Por qué no toma los llamados dentro del propio mail?
Es muy extraño que un llamado interno (un link a alguna sección dentro del propio mail) funcione. Lo mejor es evitarlo.

¿Cómo consigo que quede centrado el texto?
Notes no suele tomar el texto centrado. Lo mejor es aceptar el alineado a la izquierda.

¿Cómo hago que las celdas se muestren con el ancho que corresponde?
Lotus no funciona como un navegador web, que automáticamente le asigna el ancho más grande a cada celda que no lo tenga definido. Es necesario revisar cada celda TD y asignarle el ancho exacto.

¿Cómo hago que tome el estilo que declaro en el HEAD?
Lo más probable es que Notes borre los estilos que se agreguen al HEAD. Lo más seguro es usar estilos inline dentro de cada tag (TABLE, TD, H1, H2, P, A, etc.).

¿Cómo consigo que muestre las imágenes?
Notes suele convertir las imágenes, así que lo más recomendable es guardarlas en un servidor aparte, llamándolas con la URL absoluta.

Outlook 2007:

Como utiliza un intérprete HTML más antiguo que Gmail y LotusNotes, todas las respuestas a las preguntas frecuentes que incluimos para los dos últimos, se aplican también a Outlook 2007.

  • 48 Los Usuarios han Encontrado Esto Útil
¿Fue útil la respuesta?

Artículos Relacionados

Diseñando correctamente el mail en HTML – Parte 1: Contenido, Imágenes, Evitar filtros Anti-SPAM

En esta serie de tutoriales te acercaremos los mejores consejos para que, al llegar a destino,...

Diseñando correctamente el mail en HTML – Parte 2: Cómo usar tablas e inline CSS

Para que el mail se visualice de manera correcta desde prácticamente cualquier cliente de correo...

¿Cómo hago para evitar que los mails enviados lleguen como SPAM?

A continuación te brindamos algunos tips a tener en cuenta para evitar que los mails enviados...