¿Quieres desarrollar tu propia plantilla de email pero tienes poca experiencia (o ninguna) escribiendo código? Este artículo puede serte de mucha ayuda a la hora de crear una newsletter básica.
Trataré de dar instrucciones claras y no demasiado técnicas, de todos modos no te preocupes ya que podrás descargarte el archivo .html junto con las imágenes al final del artículo, ¡y podrás jugar un poco con el código! Pero antes, te dejo un vídeo donde verás cómo utilizar el editor de Mailrelay para preparar una newsletter:
Primero tenemos un archivo html básico con las primeras líneas de código, si lo abres con un programa como Dreamweaver este código ya aparece por defecto:
Dentro de las etiquetas «title» ubicas el título de tu campaña, por ejemplo: <title>Mi newsletter</title>, a continuación y antes del cierre de la etiqueta «head«, ubicamos estilos css que darán orden a nuestra campaña y harán que se vea mejor, estos estilos podrán ser modificados a gusto. El código se vería así:
A continuación tenemos las etiquetas «body«, dentro de las cuales se ubica la información que será visualizada en los distintos clientes de email desde los que se abrirá nuestro email. Como estos son muchos (y la forma de leer mails puede distar mucho entre unos y otros, modificando lo que visualizan) lo más recomendable es no escatimar en reglas css, para aumentar las posibilidades de que nuestro mensaje se vea de la misma manera por ejemplo en gmail, yahoo, hotmail, etc. Podemos ubicar dentro de «body» varias reglas para que se vea así:
Lo más aconsejable a la hora de hacer una newsletter es usar tablas, definiendo el alto y ancho de cada una, para asegurar una correcta visualización. Si queremos un color de fondo determinado detrás del contenedor, lo mejor es usar una tabla que ocupe la totalidad del área, por lo que en este caso uso las siguientes propiedades (puedes modificar el color cambiando la propiedad «bgcolor» usando otro código de color html):
Lo que hice también es especificar la fuente que quiero que se visualize en el mail, como dije antes es bueno usar estilos en cada tabla, incluso en las columnas, en ocasiones repitiendo un mismo estilo. Es mejor ser redundante y tener todo bajo control en estos casos.
Dentro de la etiqueta «table» se ubican las etiquetas «tr» (líneas) y «td» (columnas) mediante éstas ordenamos la información. El primer mensaje es «si no puede ver bien este corrreo visite la versión web», siempre es aconsejable dar esta opción a los usuarios. El link usa la función “web_version”
Luego ubicamos un nuevo tr y td, dentro de éste irá una nueva tabla (ubicar una tabla dentro de otra es una buena manera de usar una estructura medianamente compleja dentro del contenedor y evitar que se desarme). Esta tabla contiene la información principal.
De hecho, para tener una newsletter con márgenes adecuados para la información, podemos ubicar otra tabla dentro de esta, otra vez con la función align=»center» pero con un ancho menor, lo que se vería así:
Para tener un margen superior o inferior (también márgenes entre diferentes elementos) se genera una columna con una altura definida, de este modo:
Llegamos al encabezado del mensaje, en este espacio puedes escribir el nombre de tu empresa, o simplemente ubicar una imagen con el logo de la misma. Si la imagen contendrá un link a un sitio web, es recomendable que contenga la etiqueta border=»0″, esto es para evitar ver un borde azul en la imagen, como suele verse por defecto en algunos clientes de email. También es recomendable que cada imagen tenga un texto alternativo, algunos usuarios pueden tener deshabilitadas la imágenes por defecto y gracias a este texto podrán saber de qué se trata.
Lo que sigue es el título del boletín, con un un margen superior e inferior para el que utilizaremos el método anteriormente mencionado, una columna que genera un espacio (en mi caso, de 15 pixeles), para el título utilizamos la etiqueta para encabezados “h2”
Debajo ubicamos la imagen principal del boletín, en este caso ocupando 560 px de ancho:
Finalmente hemos llegado a la instancia donde escribiremos nuestro contenido principal!
En este ejemplo tenemos un solo artículo principal, pero desde luego puedes agregar tantos como necesites, copiando y pegando el código.
Al final de nuestro contenido, lo que resta incluír en nuestro email es el pie, donde incluiremos los datos de nuestra empresa/sitio web, y un link que ofrece a nuestros suscriptores la posibilidad de darse de baja (lo cual siempre es recomendable), todo esto dividido por una simple línea, para mantener el estilo limpio de nuestro boletín:
Luego de esto cerramos las tablas (incluso las que estan dentro de otras tablas) con excepción de la principal, la que provee el fondo gris. Ubicaremos debajo una última columna con textos legales en un tamaño de fuente pequeño, y entonces sí terminamos de cerrar la tabla principal.
Y ahí lo tenemos, una plantilla básica de newsletter explicada paso a paso!
Como mencioné al principio del artículo, no quise ponerme demasiado técnica en la explicación, por lo que algunos detalles fueron obviados. No obstante si tienes algunas dudas sobre estilos y consejos sobre lo que conviene hacer y lo que no en un mail html, te recomiendo que leas estos otros artículos al respecto:
Las 10 claves basicas para maquetar tus newsletters
Hablemos seriamente de plantillas de email marketing
Espero que este artículo te haya sido de ayuda para futuras campañas, y como lo prometido es deuda, puedes descargar esta plantilla haciendo
esta genial el articulo de newletters lo explica muy bien y con imágenes muy claras.