¿Cómo maquetar un correo electrónico en HTML?

Para maquetar email a HTML, por lo general, se realiza de forma manual basado en tablas (Tableless CSS), ya que, los correos muchos clientes de correos no soportan el HTML convencional de DIV, SPAN, etc. Sin embargo, hay programas que lo realizan de forma automática, pero no logran una acabo profesional. Por ello, te ayudaremos a crear con una sencilla guía de pasos, pero recordemos antes:

¿Qué es el HTML?

HTML es un lenguaje de marcado de hipertexto, no confundir con un lenguaje de programación y no es tan complicado aprenderlo, ya que no requiere programar, solo conocer la reglas, semántica y buenas prácticas de maquetación. A grandes rasgos, HTML junto con el CSS definen el look and feel de una página web; es decir, todo el aspecto visual de una página web.

¿Cómo se trabaja con HTML?

HTML usa etiquetas para poder realizar la maquetación web, estas tags <p></p>, <ul></ul>, <h1></h1>,etc. Estas etiquetas se usan de acuerdo al contenido que desees mostrar. Por ejemplo: la etiqueta <p></p> se usa para párrafos, los títulos son definidos con <h1></h1>, etc.

Pasos para maquetar un correo electrónico en HTML

Para maqueta un correo electrónico debe comprender que cada cliente de correo interpreta el código HTML en forma de tablas, hay excepciones como Gmail que soporta DIVs y hasta responsive en sus versiones modernas, pero no es mandatorio.

Crear un nuevo documento de trabajo con tu editor de código preferido.
Crear estructura general con un tabla (normalmente de una medida fija de 600px)
Recuerde si desea mayor compatibilidad con todos los clientes de correos no use CSS en un archivo, todo ser de forma en línea en cada tabla y etiqueta HTML.
No todos las propiedades de CSS son soportados, por ejemplo no se admite: float, fixed, etc.
Debe usar tabla para crear separaciones y bloques.
Evite usar espacios en blanco.
Todas las propiedades y valores debe ser colocado de forma inline, <td style="font-size:14px;">
Use <img style="display:block;" /> para las imágenes.
Cada elementos, enlace, etc, debe colocarse con su propiedad de css para que se visualice correctamente en cada cliente de correo.
User formatos completos para propiedad de CSS, ejemplo: style="font-size:14px;font-family:arial;"

Categoría: Maquetación EMAIL