Guía fácil para maquetar un correo electrónico / email en HTML

Muchos son los que al oír la palabra HTML se asustan tanto que deciden de forma automática subcontratar cualquier cosa que implique su uso. Sin embargo, desde la plataforma de envío masivo de emails, Acumbamail, queremos ponerte más fácil que nunca el crear plantillas de email, dándote las claves para maquetar emails en HTML de forma fácil y sencilla.

¿Qué es el HTML?

HTML son las siglas de HyperText Markup Language en inglés. Se trata de un sistema de marcado que permite definir el aspecto y estructura de un documento online que se basa en marcas tipográficas (para el aspecto) y marcas lógicas (para la estructura) que formatean el contenido y definen sus particularidades.

Puedes aprender mucho más sobre HTML en este enlace.

¿Como funciona el HTML?

Básicamente el HTML funciona a través de etiquetas que se abren <etiqueta> y que se cierran </etiqueta>. Cada etiqueta tiene un significado y dota al contenido de un aspecto o estructura concretos.

Premisas básicas antes de comenzar a maquetar emails en HTML

• Es fundamental que recuerdes nuestros consejos sobre cómo optimizar imágenes para enviar por email.
• A la hora de plantear la estructura, ten en cuenta que la mayoría de usuarios dedican 1,4 segundos a leer tu correo electrónico, así que tienes que ser claro, sencillo y directo para conseguir tu objetivo.
• Son importantes las imágenes para llamar la atención, pero recuerda que NO serán descargadas de forma automática así que incluye siempre una buena descripción en su atributo ALT que invite a verlas.
• Si tu objetivo es conseguir una acción pon claramente un call to action y un botón donde hacer clic.
• No olvides las reglas básicas para no ir a SPAM.

Cómo maquetar un correo electrónico en HTML

En primer lugar, es importante que sepáis que a la hora de crear vuestras campañas de email marketing, Acumbamail os permitirá subir plantillas desde URL, pegando el HTML, subiendo el HTML, pegando texto o importando el ZIP.

Lo más cómodo para crear la plantilla en HTML directamente en la plataforma es elegir la opción de “Pegar texto” y dar al botón de “Fuente HTML” para poder comenzar a escribir nuestro documento HTML (cuando demos de nuevo a ese botón veremos cómo queda realmente).

En segundo lugar, procederemos paso a paso a crear nuestro email en HTML:

1. Crea una tabla para determinar la estructura del email
2. Algunas características como el float, margin y padding no se podrán ver correctamente en Gmail y Outlook 2007 por lo que las evitaremos
3. Fijaremos el ancho en las celdas, no en las tablas
4. Y el espacio se dará con cellpadding
5. Siempre que se pueda, evitaremos jugar con márgenes y espacios interiores, sustituyéndolos por la anidación de tablas.
6. A la hora de determinar el color, utilizar la propiedad de la tabla <td bgcolor=”#ff3322″> en vez de usar el CSS
7. Evita espacios en blanco en las celdas
8. La propiedad font para CSS si funciona correctamente en la mayoría de los exploradores así que podrás utilizarla pero siempre usando los métodos completos y no los abreviados. Ej: p {font:bold 1em/1.2em georgia,times,serif;} /  p {font-weight: bold;font-size: 1em;line-height: 1.2em;font-family: georgia,times,serif;}
9. En los enlaces es fundamental las definiciones de colores inline y una etiqueta <span> redundante. Ej: <a href="http://somesite.com/" style="color: #ff00ff;"><span style="color: #ff00ff;">this is a link</span></a>

Conclusiones

¿Qué te ha parecido esta guía para crear emails maquetados en HTML? Recuerda que Acumbamail también dispone de una serie de plantillas gratuitas y fácilmente customizables que puedes utilizar.

¿Buscas plantillas de email marketing? Pásate por aquí.

Prueba nuestro CSS Inliner para optimizar los estilos de tus emails.