Código para el diseño de e-mails y newsletters

Días atrás me toco diseñar unas plantillas para los e-mails y newsletters de un proyecto. Voy a compartir algunos consejos y sobre todo una conclusión:

Si eres un obsesionado de los estándares web, empieza por poner algo de música relajante, hacerte un lavado de cerebro y retroceder unos cuantos años.

La cuestión es que webmails y gestores locales no suelen seguir estándares, por lo que al final cada uno hace lo que le da gana. Lo que buscamos es que el diseño del e-mail sea compatible con: Gmail, Yahoo! Mail, Hotmail, AOL, Thunderbird, Outlook, Outlook Express, Windows Live Mail, Apple Mail.
Para lograr cierta compatibilidad entre esta amalgama podemos seguir algunos consejos.

Por cierto, Gmail y Hotmail han dado peores resultados en test Acid, en cambio Thunderbird y Yahoo! Mail han dado mejor nota.

Meta-información

• Sin Doctype DTD
• Pero si poner un meta meta http-equiv="Content-Type" content="text/html; charset=utf-8"
• Añadir un tittle
• Podemos usar target="_blank" en los enlaces. De esta forma no se abrirá en la misma ventana si usamos un webmail.

Layout

• Es recomendable usar una anchura fija de 600px.
• Layout con tablas. Si si, es totalmente necesario!.
• Mejor si especificamos <table width="100%" ....
• No se pueden anidar tablas. La estructura debe realizarse completamente con filas y columnas.
• En las tablas podemos usar parámetros como colspan="2", border="0", align="left".
• Internet Explorer tiene problemas con los TD vacios <td></td> para solucionarlo podemos incrustar una imgen de un pix transparente: <td><img src="blank.png" alt="" width="10" height="1" /></td>.

Contenido

• Lógicamente siempre debemos usar rutas absolutas.
• Evitar el uso de videos, flash (object), en lugar de ello usemos imágenes y enlaces al recurso a href="recurso".
• JavaScript no permitido.
• Las imágenes deben siempre ir acompañadas del atributo alt="texto alternativo". Sin embargo no deben llevar los atributos width, height.
• No hace falta que usemos etiquetas como font
• Los caracteres especiales deben presentarse con entidades HTML.
• Alternativamente podemos incluir un enlace a una versión web.

Estilo

• En el head añadir el CSS necesario.
• Independientemente de este CSS añadirlo inline a cada tag que lo requiera (aunque sea redundante).
• Olvidemonos de usar formas abreviadas en el CSS.
• Si no queremos bordes en las imágenes con enlace podemos añadir border="0" (además de tenerlo en cuenta por CSS).
• Si necesitamos poner imágenes de fondo debemos usar el atributo bgcolor de una etiqueta td y nunca el background-image
• Aunque sea redundante es necesario especificar en cada etiqueta (párrafo, enlace, etc) el estilo en linea si se desea personalizar.

Y un consejo último: Menos es más. En el caso de los e-mails cobra una especial importancia este principio. Por tanto en cuestión de diseño y contenidos quedémonos con lo imprescindible.