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
6 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é
4jaime
Agosto 17th, 2011 @ 7:05
buenas. Una pregunta muy básica: ¿con qué programa se maquetan las newsletters?
5Emailology, guía para maquetar un email en HTML
Octubre 27th, 2011 @ 19:56
[...] codificación en los emails.Adicionalmente os recomiendo leer algunos artículos como el del blog Scuain donde nos dan algunos consejos para maquetar un email o también puedes probar alguno de los [...]
6aqrvspil
Noviembre 18th, 2012 @ 8:49
アグ 激安 アグ 激安 coach 財布 アグ ブーツ アグ ブーツ
ファッション方法は色の袋をマッチングがあるとは限らないただ覚えている。
アグ 激安 アグ 激安 コーチ 財布 アグ ブーツ アグ ブーツ
http://www.gekiyasuuggmabushii.info/
確認してくださいを取得するためには 、決してきつすぎる快適です袋に入れてください。
アグ アグ ムートンブーツ coach 財布 激安 アグ ムートンブーツ アグ アウトレット
アグ ムートンブーツ アグ coach 財布 新作 アグ 店舗 アグ
このバッグはかもしれないを身に着け、うずくまっ数| 同様の様々なのために上の平手打ちの範囲。
長財布
サンダル
手帳
専門店
財布 ピンク
<a href=”http://www.gekiyasuuggmabushii.info/”>アグ 激安</a> <a href=”http://www.gekiyasuuggmetamashouhin.info/”>アグ ブーツ 激安</a> <a href=”http://www.coachyasui.info/”>コーチ 激安</a> <a href=”http://www.gekiyasuuggeregansu.info/”>アグ 激安</a> <a href=”http://www.gekiyasuuggfasshon.info/”>アグ ブーツ 激安</a>
場合はないあなたのバッグの フェードアウトしたいと思います。
<a href=”http://www.gekiyasuuggmabushii.info/”>アグ 激安</a> <a href=”http://www.gekiyasuuggmetamashouhin.info/”>アグ ブーツ</a> <a href=”http://www.coachyasui.info/”>コーチ</a> <a href=”http://www.gekiyasuuggeregansu.info/”>アグ ブーツ</a> <a href=”http://www.gekiyasuuggfasshon.info/”>アグ ブーツ 激安</a>
<a href=”http://www.gekiyasuuggmabushii.info/#0566″>アグ キッズ </a> <a href=”http://www.gekiyasuuggmetamashouhin.info/”>アグ キッズ </a> <a href=”http://www.coachyasui.info/#9642″>コーチ 財布 新作</a> <a href=”http://www.gekiyasuuggeregansu.info/”>アグ ブーツ 格安</a> <a href=”http://www.gekiyasuuggfasshon.info/”>アグ 店舗</a>
面での伴うに関連付けられた靴や鞄や靴私達のほとんどのから事実のため ファッションと快適。
<a href=”http://www.gekiyasuuggmabushii.info/”>アグ 店舗</a> <a href=”http://www.gekiyasuuggmetamashouhin.info/”>アグ ブーツ 通販</a> <a href=”http://www.coachyasui.info/#1476″>コーチ 財布 新作</a> <a href=”http://www.gekiyasuuggeregansu.info/#1150″>アグ ムートンブーツ</a> <a href=”http://www.gekiyasuuggfasshon.info/#3599″>アグ キッズ </a>
<a href=”http://www.gekiyasuuggmabushii.info/”>システム手帳
</a> <a href=”http://www.gekiyasuuggmetamashouhin.info/”>leatherware
</a> <a href=”http://www.coachyasui.info/”>斜めがけ
</a> <a href=”http://www.gekiyasuuggeregansu.info/#5637″>時計
</a> <a href=”http://www.gekiyasuuggfasshon.info/#8103″>財布 ピンク
</a>
Leave a Reply