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.
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í:
- 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
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.
Insertamos el código html
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.
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
Si te gustó este artículo o te sirvió de ayuda por favor compártelo
Un saludo,
Óscar / DevService
Por Óscar Carrillo
Solicitar presupuesto
Edgar Gutierrez (G3Kdigital) says:
Veo que lo que yo llevo haciendo desde hace más de un año, otros lo hacen también aunque a mi si me gusta usar mi propia plantilla o bien crearla de cero.
Solo por aportar, ultimamente el desarrollo de aplicaciones para gmail de parte de terceros ha aflorado y hay siempre utilidades interesantes como: html-inserter-for-gmail que sí he probado, pero aun siento que le falta o newsletter-creator-for-gm que nunca use, pero que por palabras de un ex-cliente «es muy util y rapido».
Bueno, solo me resta decir que aunque no pruebo con los 100tos de clientes de correo y solo hago pruebas con las versiones movil y destkop de gmail.com, outlook, office365 y thunderbird, como diseñador gráfico es muy dificil cuando no tienes idea del código del porque ciertos errores, así que hare un pequeña lista de los que me acuerdo y ojala a alguien se anime a hacer un articulo de ello.
1. No uses el estilo inline: «background-image» usa la propiedad background=»http..»
2. Nada de background-position, position o display(al menos parcialmente), al menos no funciona en una gran tanda de clientes.
3. Sí bien no puedes usar sino tables, puedes usar P, H1, H2… y Divs, eso sí reiniciando mucho sus propiedades.
4. Las imagenes y enlaces que las contengan, deben siempre tener un display: block y un line-height: 0 o el que se acomode, nunca dejarlo por defecto, sino ya veran en outlook que pasa.
5. Siempre que vaya un texto, no olvides colocar el respectivo line-height.
6. Las direcciones de correo en un correo rompen tablas cuando son muy grandes, y cuando son tablas responsives tendrás yun desagradable visión en moviles, lo he solucionado con un simple a o colocando el estilo inline word-wrap: break-word.
7. A cada imagen dadle así sea un fondo de color, un tipo de letra y un tamaño de texto. est para que el Alt=»texto alternativo» sea más interesante de mirar.
Por ahora no me acuerdo de más pero sí les interesa aquí les dejo una galería propia en codepen donde podrán ver y copiar sí quieren el código de mis mailing back-ups http://codepen.io/collection/DEBBpA/. Saludos y Éxitos.