header_lecciones_v5

Cómo configurar un correo html para email marketing

por Santiago de Jesús Quintero, el 27 de abril de 2020

Cómo configurar un correo html para email marketing

Construir correos html puede ser algo diferente a lo que un desarrollador front-end normalmente hace, sobretodo por la maquetación, debido a que está se hace mediante tablas. Con esta guía aprenderás a diseñar un correo html, te harás una idea de cómo funciona y obtendrás las bases necesarias para entender un poco sobre el mundo de Email Marketing.

Conocimientos previos

  • HTML
  • CSS

¿Qué es el Email Marketing?

“El email-marketing es una técnica utilizada por las marcas para contactar con su público objetivo a través del correo electrónico. Esta técnica de marketing incluye newsletters y mailing y sobre todo una buena estrategia que avale las acciones que se realizan”.1

¿Qué es un correo html?

Es un correo electrónico diseñado como un sitio web, es usado en las estrategias de email marketing y tiene muchos beneficios: permite añadir enlaces, imágenes y un diseño detallado.

¿Cómo se construyen estos correos?

  1. Desde “estrategia” se analizan datos para definir la intención (objetivos) y contenido del correo.
  2. Desde “creatividad”se piensa cómo se comunica el mensaje, esto se hace utilizando el mismo lenguaje que maneja la marca.
  3. El diseñador crea el boceto.
  4. El desarrollador front-end construye el html de acuerdo al boceto.
  5. El correo se envía mediante la plataforma de automatización.

Nosotros haremos el paso 4 y 5, basándonos en un diseño de internet.

Desarrollo de un Correo Electrónico HTML

Limitaciones del Correo Electrónico HTML

“La mayoría de clientes de correo electrónico no son compatibles con todos los tipos de contenido HTML que se ve en la web. Los navegadores web pueden mostrar secuencias de comandos, animaciones y menús de navegación complejos, mientras que tu bandeja de entrada normal no está creada para gestionar este tipo de contenido”2.

Los clientes de correo no leen Javascript, <iframe>, Flash, audio incrustado, video incrustado, formularios. Muchos de los estilos más recientes no son leídos, por ejemplo: clear, float, z-index, etc.

Por tal motivo para construir un correo html es ideal seguir las siguientes recomendaciones:

  1. Propiedades de las etiquetas HTML por encima de CSS.
  2. Uso de tablas para la maquetación.
  3. Ancho de 600px.
  4. Estilos en línea (CSS en el mismo documento HTML).
  5. No usar estilos avanzados.

Construyendo un correo html

A continuación construiremos un email, el diseño lo sacaremos de https://stripo.email/es/templates/, pueden escoger el que deseen y trabajar con ese. Yo usaré el siguiente: Plantilla de correo electrónico "Amor a nuestro alrededor" de Día de San Valentín para la industria de Gadget.

1. Creamos la carpeta donde irán los archivos. Dentro creamos una carpeta llamada “img” para guardar las imágenes y un archivo “index.html” donde irá todo el código.

Desarrollo de un Correo Electrónico HTML  1

2. En la carpeta “img” ponemos las imágenes que aparecen en el boceto. En mi caso es el corazón grande y la imagen de fondo.

Desarrollo de un Correo Electrónico HTML 2

3. Yo agregué una imagen adicional de 1 pixel, en el código se pone con display: block; así la imagen nos ayudará a que las proporciones en mobile no se dañen, por eso la fila donde se pone debe tener el ancho máximo del boceto.

Desarrollo de un Correo Electrónico HTML 3

4. Creamos una tabla general que nos permitirá ir construyendo el email html, le daremos unas propiedades (quitaremos los bordes, padding, etc) para que se vea bien.

Desarrollo de un Correo Electrónico HTML 4

5. Usamos la imagen del pixel, tal como se explica en el paso “3”.

Desarrollo de un Correo Electrónico HTML 5

6. Ya estamos listos para empezar a maquetar el email.

Desarrollo de un Correo Electrónico HTML 6

Si vemos el boceto, podemos darnos cuenta que deben ser dos filas, así tendremos la imagen de fondo en la primera y el texto sobre el fondo oscuro en la segunda.

7. En el código quedaría así:

Desarrollo de un Correo Electrónico HTML 7

Las propiedades como background-position y background-repeat ya tienen esos valores por defecto, pero a veces es necesario hacerlo explícito para no tener problemas con algunos clientes de correo. Las alturas de la fila las saqué del boceto.

Desarrollo de un Correo Electrónico HTML 8

La altura de la primer fila le adicioné 12px, porque la que me muestra es la del recuadro azul, entonces el espacio fuera de eso se debe contar, así mismo con el ancho.

Si ejecutamos el html, se vería de la siguiente manera:

Desarrollo de un Correo Electrónico HTML 9

8. Dentro de la fila que contiene la imagen de fondo debemos poner la imagen del corazón y texto, hay que tener en cuenta que siempre es preferible usar maquetación mediante tablas y no depender tanto del estilo margin (no quiere decir que no lo podamos usar).

Desarrollo de un Correo Electrónico HTML 10

Desarrollo de un Correo Electrónico HTML 11

9. Ahora vamos a poner los textos, los clientes de correo reciben algunas familias de fuente, si no reconoce una la deja por defecto. Nosotros la pondremos en sans-serif.

Desarrollo de un Correo Electrónico HTML 12

Por ahora se ve así:

Desarrollo de un Correo Electrónico HTML 13

10. Agregamos el texto que está dentro de la fila que tiene color de fondo, le puse un poco más de height porque estaba muy pequeño.

Desarrollo de un Correo Electrónico HTML 14

Los colores de los textos los saqué del boceto, todos estos insumos de este tipo se encuentran en él.

Desarrollo de un Correo Electrónico HTML 15

Y concluimos la construcción del email html, no pusimos enlace en el botón, pero en un caso real iría el enlace que nos den como insumo.

El email queda así:

Desarrollo de un Correo Electrónico HTML 16

Enviando el email html

Ahora lo enviaremos mediante una plataforma de automatización, existen múltiples plataformas, nosotros usaremos Campaign Monitor es una buena herramienta para empezar a crear nuestras campañas.

1. Deben crearse una cuenta para poder empezar a trabajar. Lo primero que hacemos es crear una nueva campaña.

Cómo enviar un email html

2. Configuramos la campaña. Le damos un nombre, asunto y preheader si lo tenemos, elegimos que correo aparecerá como el remitente y le damos en Next.

Cómo enviar un email html 2

Cómo enviar un email html 3

3. Luego importamos el archivo fuente y las imágenes en formato zip.

Cómo enviar un email html 4

4. Nos sale una advertencia de que no tenemos etiqueta unsuscribe en el código, decimos que lo ponga por nosotros y continuamos. La mayoría de veces nosotros se la ponemos para darle los estilos que deseemos.

Cómo enviar un email html 5

5. Nos aparece para que pongamos el email en texto plano, esto es porque mientras se carga el correo con el diseño muestra este texto, le decimos en “import from your HTML” y pasamos a definir los destinatarios.

Cómo enviar un email html 6

6. Por lo general ya vamos a tener las bases de datos a las que regularmente se le envían estos correos, entonces elegimos la que nos indiquen.

Cómo enviar un email html 7

7. Nuestra campaña está lista para enviar, le damos en “programar envío” y luego en “enviar ahora”, si desean programan una hora para el envío.

Cómo enviar un email html 8

8. Los clientes reciben el correo.

Cómo enviar un email html 9

Si el correo es abierto desde el celular se vería de la siguiente forma:

Cómo enviar un email html mobile

Los estilos del correo se cambian automáticamente, esto es porque si uno le da clic el cliente de correo crea un borrador con ese correo como destinatario.

Conclusiones

  • Aunque casi no se usa en el desarrollo web, las tablas en html son fundamentales en la construcción de los correos que se usarán como estrategia de marketing.
  • Los estilos se deben hacer en línea, no en una hoja de estilos externa.
  • Existen propiedades css que los clientes de correo no leen.

Si quieres profundizar más acerca de email marketing:

Referencias

[1] ¿Sabes bien lo que es el email marketing y cómo sacarle partido?. Vilma Nuñez (2014). https://vilmanunez.com/que-es-el-email-marketing/.

[2] Limitaciones del correo electrónico HTML. https://mailchimp.com/es/help/limitations-of-html-email/

 

Temas:Desarrollo de Software

Lecciones Pragma

Lecciones en Academia Pragma

Aquí encontrarás tutoriales técnicos para que apliques en temas de desarrollo de software, cloud, calidad en software y aplicaciones móviles. 

También puedes visitar nuestro Blog con contenido actual sobre Transformación Digital, Marketing, Conocimiento de Usuario y más. 

Blog

Suscríbete a la academia

Descarga la Guía para trabajar con ambientes IBM Websphere Portal