Cómo maquetar un Email o Newsletter

Maquetar un email puede ser a simple vista un proceso fácil, pero la verdad es que es mas complicado de lo que parece.

Lo primero que vamos a decir es que hay una cantidad enorme de clientes de emails (cada uno con sus versiones), y cada cliente utiliza un motor de renderizado diferente.
Por ejemplo Outlook 2007 usa el motor de Microsoft Word, Lotus Notes 8 usa IE 6-7-8 y Mozilla Thunderbird el de Firefox.

Nuestra meta, como no podía ser de otra manera es hacer un email que se vea bien en la gran mayoría de clientes.

Para ello tenemos que tener en cuenta las siguientes consideraciones:

- Usar tablas para hacer el layout.
- No usar Javascript.
- Todo el CSS en línea <table style="color: #fff; background-color: #333;">
- Tenemos que usar las fonts por defecto.
- Las imágenes tienen que estar alojadas en un servidor remoto.
- No usar atajos CSS, por ejemplo font tiene que tener las propiedades separadas.
- No usar padding ni float, ya que algunos motores no lo soportan.
- Añadir a las imágenes el siguiente código CSS style="border:none;display:block" ya que hotmail añade márgenes y Outlook añade un borde a las imágenes.
- Evitar palabras como Free, Ganar, Gratis, Win para evitar que nuestro email acabe en la carpeta Spam.

Para ver qué propiedades CSS soportan los principales clientes de correo podemos consultar esta guía.

Por último solo nos quedaría testear bien nuestro email. Para ello podemos mandarnos el email a la cuenta que queramos desde putsmail.