sábado, 28 de enero de 2012

Correcta Codificación HTML para Emails

El soporte HTML de los distintos clientes de email es muy variable. Esto nos puede generar algunos problemas al momento del maquetado.

Tranquilos… no hay por que alarmarse! A continuación enumeramos una serie de tips que son de gran utilidad a la hora del maquetado y pueden ahorrarnos unos cuantos dolores de cabeza.

En primer lugar, el secreto para lograr una correcta visualización de la pieza es codificarla utilizando el HTML más básico posible.

Evitar el uso de editores como Word o Front Page, que suelen agregar estilos que "ensucian" el código HTML, o en todo caso revisar el código generado para limpiarlo.

Es recomendable utilizar Dreamweaver o un editor HTML similar que nos permita un control total sobre el código generado (notepad para los valientes!).

Realizar siempre un envío de prueba de la pieza de email a los clientes más utilizados (Hotmail, Yahoo, Gmail, Outlook, etc.) antes de enviar la campaña.

Estructura

No utilizar elementos div, sino tablas para la estructura y organización del contenido. Es la técnica más confiable y compatible con todas las aplicaciones.

No incluir formularios, javascript, objetos flash, applets java, etc.

Imágenes

En lo posible, no utilizar un contenido formado solamente por imágenes. La descarga es más lenta y no es visible si el cliente tiene desactivadas las imágenes.

Mantener el peso de las imágenes bajo, en lo posible no más de 500kb por email, para optimizar el tiempo de descarga.

Utilizar textos alternativos en las imágenes mediante el atributo alt siempre que se pueda. Utilizar los atributos width y height en todas las imágenes facilita el correcto renderizado de la pieza, incluso si las imágenes están desactivadas.

Evitar el uso de imágenes de fondo, y de hacerlo, utilizar el atributo background de una tabla, no el estilo CSS background-image, en algunos clientes como Gmail y Lotus Notes no son bien soportados.

Nunca utilizar los atributos width y height para modificar el tamaño de una imagen, redimensionarla utilizando un editor de imágenes.

Evitar el uso de imágenes con transparencias, algunos navegadores viejos no las soportan.

Ciertos clientes, como Lotus Notes, no soportan una profundidad de color mayor a 24 bits, no es recomendable utilizar 32 bits.

Estilos

Tratar en lo posible de evitar el uso de CSS. En caso de hacerlo, limitar su uso al formateo de textos.

Utilizar estilos CSS inline (dentro del tag, style="…", por ejemplo

), no utlizar links a CSS externos ni el tag