Consejos para maquetar emails
Septiembre 8th, 2008
Después de los consejos para diseñar un email del otro día, hoy toca explicar algunas recomendaciones para maquetarlo.
- Maqueta usando tablas, con un HTML básico
Desafortunadamente, nada de <div> en el código. - El uso de CSS está limitado
Algunas propiedades como backgound-image o margin no suelen funcionar. Este listado es la mejor referencia para saber cuales puedes usar. Se actualiza periódicamente y existe una versión imprimible en PDF. - El CSS debe estar insertado en línea en cada etiqueta HTML
Por ejemplo <p style=”font-size: 20px; color: #656565;”>. Si no quieres hacerlo a mano, Premailer es una herramienta que inserta las diferentes propiedades en cada una de las etiquetas.
Si vas a usar clases, es necesario que dupliques el código CSS: debes insertarlo tanto en el <head> como en el <body>. - Usa el atributo alt en las imágenes
Si el programa de correo o webmail bloquea las imágenes (la mayoría lo hacen por defecto), se podrá leer una pequeña descripción de esa imagen. - No adjuntes las imágenes
Debes colgarlas en un servidor y poner la ruta absoluta (<img src=” http://www.midominio.com/mail/imagen.gif” … />) - No uses Flash ni JavaScript
La gran mayoría de programas y webmails lo filtran o desactivan. - Usa la codificación ISO-8859-1
Es la más habitual para emails en castellano. Además, y como medida de seguridad, es recomendable usar entidades HTML. Si te resulta más cómodo, puedes usar este conversor. - Comprueba el resultado
Después de maquetarlo, hay que comprobar el resultado a través de los diferentes clientes (Outlook Express, Mozilla Thunderbird…) y webmails (Gmail, Hotmail, YahooMail…).
Siempre existirán pequeñas diferencias entre uno y otro, así que el objetivo es conseguir un aspecto similar y que puedan leerse sin problemas. - Vigila el nivel de spam
Actualmente, muchos de los emails no superan los filtros anti-spam. El nivel de spam aumenta si usas muchos links y poco texto, tamaños de fuente elevados, texto en mayúsculas, caracteres “raros” en el título… Puedes comprobar los niveles de tu email en http://spamcheck.sitesell.com/.
Para terminar este post, os dejo dos webs:
- Campaign Monitor es la web de referencia.
- Mailchamp también ofrece recursos interesantes. Tienen una guía (PDF, 1.2MB) bastante completa.
Sígueme en Twitter
Feed RSS
3 Responses to “Consejos para maquetar emails”
1pumpkin
Noviembre 17th, 2008 @ 23:08
Vaya, vaya… no conocía algunos de esos recursos y me van a venir de puta madre. Muchas gracias, hombre
2scuain
Noviembre 18th, 2008 @ 1:02
De nada! La verdad es que a mi también me van de lujo.
3Kilian
Diciembre 11th, 2008 @ 20:41
Pues muchas gracias porque justo me viene perfecto para un proyecto. Siempre he sido partidario del email con texto plano, aunque aveces hay q impactar un poquito publicitariamente.
Sigo sin estar seguro del beneficio de un email con imágenes…
saludos y muy buen blog el tuyo, te seguiré
Leave a Reply