Acumbamail · Email marketing

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

· 13 octubre, 2014
maquetar emails

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 ponérte 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?

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.

Regístrate gratis Comienza a usar gratis nuestro servicio y disfruta de 2.000 emails al mes para siempre. No necesitas tarjeta de crédito.

¿Como funciona?

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.
  • Para cualquier duda sobre etiquetas y atributos puedes consultar esta Guía de HTML.

¿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).

maquetar emails html

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>

¿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.