Skip to content

9 junio, 2011

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
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

para solucionarlo podemos incrustar una imgen de un pix transparente:
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.

 

No hay articulos relacionados.

Read more from CSS, frontpage, HTML5, Internet

Share your thoughts, post a comment.

(required)
(required)

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments