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.