Maquetar haciendo compatible nuestro diseño con IE6, 7, 8, Firefox, Safari etc es siempre un dolor de cabeza pero cuando se trata de maquetar correos electrónicos la cosa se complica aún más y aquellas cosas que no se deben hacer en páginas web se vuelven se vuelven obligatorias en correos. Veamos algunos tips

Maqueta usando tablas

Pues si aqui las tablas funcionan mejor y hasta es recomendable usar esos métodos de corte con Photoshop o Fireworks que considero primitivos y poco confiables 🙂 además procura mantener lejos los textos de los gráficos.

No hagas diseños complicados

No se te ocurra usar diseños con PNG 24bits, cosas que requieran hacks, position fixed y otros trucos que a duras penas funcionan en navegadores como IE6, en lectores de correo son casi imposibles y no uses muchos gráficos que sea lo mas liviano posible.

Usa estilos en linea

Siempre he recomendado el uso de hojas de estilo externas o separar el diseño de la programación pero cuando se trata de correo olvídalo no todos soportan usar estilos en la cabecera sino que debemos usar estilos en linea como este:

1
<p style="font-size:12px; color:red">Aqui mi texto</p>

No uses javascript

Olvidate por completo del javascript, por lo general este es bloqueado o aparecerá con mil advertencias de seguridad que ningún usuario se atreverá a intentar abrirlo.

Haz un diseño elástico o pequeño

Cuando hablamos de páginas web hay ciertas resoluciones estándares cuando se trata de correos electrónicos nada de eso existe con uno 500px de ancho debe ser compatible con el 95% de clientes de correo aunque nunca se sabe.

Pueden encontrar un muy util cuadro sobre que características son soportadas por los diversos clientes de correo AQUI