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 atributoswidth
,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 etiquetatd
y nunca elbackground-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.