El arte de maquetar emails para que sean visualizables en todos los programas de correo es sumamente complicado. Cada cual soporta las propiedades de CSS que le parece. Haciendo un trabajillo reciente he encontrado estos consejos para maquetar emails en Scuain.com:
- 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/.
Son consejos bien útiles. Por otro lado, en Campaign Monitor, toda una referencia en el campo del emailing, hay una interesante tabla con las propiedades que soportan todos los lectores de correo electrónico. MailChimp también ofrece una guía descargable en PDF. Y está esta aplicación para comprobar el email antes de enviarlo.
¿Conocéis algún otro recurso fundamental para diseñar y maquetar emails?
7 comentarios ↓
gracias, muy interesante.
Joe, que artículo. Muy interesante. y un problema bastante común.
Gracias.
100% en desacuerdo con esto. http://www.w3.org/TR/1998/NOTE-HTMLThreading-0105
¿Te refieres que las recomendaciones están en desacuerdo con un estándar que aún ni siquiera se ha implantado?
Son recomendaciones para tirar con lo que hay, no con lo que debería ser.
Lo que quiero decir es que no es lo mismo quién de las recomendaciones. Yo personalmente me quedo con las de la w3c, es decir, hacer las cosas bien para que, en este caso, en los clientes de correo que soporten estándares se visualice a la perfección y luego hacer lo que se tenga que hacer para que se visualice bien en el resto (desgraciadamente, la inmensa mayoría).
En su día nos pasó eso con IE5 y Netscape, pero al ser IE5 más utilizado, dejamos de lado Netscape, que implementaba mejor los estándares. Eso nos ha llevado a donde estamos hoy, con multitud de navegadores que hacen un uso correcto y multitud de sitios web diseñados exclusivamente para ie que renderizan (palabro) fatal en el resto de navegadores (y no hablemos de javascript).
Ojo, esto no es ninguna batalla contra los productos de Microsoft, que por suerte, sus clientes de correo, en las últimas versiones, implementan bastante bien la normativa estándar (supongo que por el navegador instalado).
Cómo bien dices en un punto “objetivo es conseguir un aspecto similar y que puedan leerse sin problemas”. Yo lo diría así ” el objetivo es que la información sea accesible sin problemas y el aspecto sea similar, en la medida que sea posible”. Y si no es posible pero el mensaje se transmite, chapeau.
[...] en Tallerd3 un artículo que creo de un interés cada día más creciente, que trata sobre “El arte de [...]
Buen resumen de lo necesario! te paso una guía más extensa que añade indicaciones basadas en el artículo de Anang Graves.
http://www.webnostra.com/guia-para-crear-un-buen-emailing-en-html/
Dejar un comentario