Cómo crear una newsletter html

Ahora que el marketing digital está tan de moda gracias a su efectividad, el envío de newsletters a su vez también está en pleno auge y crece a pasos agigantados.
Existen muchas plataformas para la gestión de listas de mails y su correspondiente envío, tanto plataformas externas como aplicaciones internas dentro de nuestro CMS, aunque en este post nos centraremos concretamente en cómo crear y enviar un newsletter html a través de mail con nuestra propia plantilla en HTML.

Algunas personas utilizan una especie de dípticos en imagen para el envío de newsletters, aunque claramente tienen desventajas frente al newsletter HTML, ya que este último se abre directamente sin tantos problemas de “confianza” en el gestor de correos, puede ser responsive y además tiene más probabilidades de llegar a la bandeja de entrada de correo adecuada, y no al spam.

newsletter html
Copyright 123RF

Pasos para la creación del newsletter html

  • Consigue o crea una plantilla Newsletter HTML
    Como estoy vago y no quiero crear un código html desde cero, hago uso de una plantilla predefinida, por ejemplo:
    Responsive html templates
    Estas plantillas HTML además de limpias son responsive, es decir, su diseño se adaptará al tamaño del dispositivo con el que nuestro receptor abra el email newsletter.
  • Edición y maquetación del html en un editor de texto plano
    Ponemos bonito nuestro código fuente, por ejemplo así:

    newsletter html

  • Acorta urls de los links
    Acortamos todas las URLs de los links que haya dentro del código, para evitar spam y otros problemas relacionados, para ello existen decenas de acortadores de url, el acortador de urls de google por ejemplo nos puede valer.
  • Sube imágenes a algún dominio o plataforma de subida de imágenes
    Lógicamente las urls de las imágenes adjuntas al html tendrán que estar en linea, usa una plataforma de subida de imágenes o súbelas directamente a un dominio y directorio que tengas libre.
  • AGPD
    Asegúrate de enviar mails sólo a usuarios realmente interesados, y sobre todo debes tener al día el fichero de alta en la agencia de protección de datos.
    Después incluye un link al aviso legal que haga referencia a tu alta en la AGPD en el pié de página del newsletter html.

    Por otro lado es obligatorio dar la opción de “unsuscribe” en el newsletter, para usuarios que no deseen recibir más correos.

  • Envío del newsletter html
    Para enviar el HTML por email hay varias de opciones, como comentaba anteriormente tienes plataformas de gestión de envíos por mail, que además te dan la opción de usar tu propia plantilla html.

    Como este post es a modo de prueba lo haremos directamente desde nuestro navegador web o programa gestor de correos.

    Si lo hacemos desde gmail.com o outlook, simplemente damos a inspeccionar elemento dentro de la caja de envío (ver código HTML) desde el navegador web en este caso y pegamos el código fuente.

    Paso 1. Abrir nuevo email e inspeccionar elemento para insertar el HTML creado previamente

    html newsletter

    Insertamos el código html
    Añadimos y pegamos el código html de nuestra newsletter en este mismo div que pertenece a la caja de envío del mail.

    insertar html newsletter

    Insertamos el código html
    codigo html newsletter

    Paso 2. Enviar mail newsletter
    Comprobamos visualmente que el mail se ve correctamente dentro de la caja de envío del mail, y que el código html se visualiza en buen estado.
    envio newsletter html

    Paso 3. Newsletter recibido
    Comprobamos que hemos recibido el newsletter en perfecto estado. Si todo está Ok, ya está listo para enviar a toda nuestra lista de mails, con lo que tendríamos que hacer un copiar pegar de nuestra lista en el campo CCO debajo del asunto del email, para que llegue en copia oculta a cada uno de nuestros posibles clientes
    Abrimos nuestro programa gestor de correo para visualizar que el mail llegó en buen estado

    newsletter html recibido

comenta

Si te gustó este artículo o te sirvió de ayuda por favor compártelo
Un saludo,
Óscar / DevService
Por Óscar Carrillo