Os dejamos a continuación una recopilación de ejemplos para el diseño de newsletters:










Os dejamos a continuación una recopilación de ejemplos para el diseño de newsletters:










Hemos cubierto ya algunos de los grandes capítulos en la construcción de una newsletter; diseño, factores técnicos…
Pero ahora una vez realizado en envío, es el momento de medir los resultados de la campaña y comprobar si hemos alcanzado los objetivos que nos marcamos en anteriores fases.
Deberemos analizar indicadores tales como:
- Tasa de apertura: ¿Cuántas personas que recibieron el correo lo abrieron?
- Tasa de click: ¿Cuántas hicieron click sobre algún enlace?
- Reenvío: si nuestra newsletter contaba con la función “enviar a un amigo”, ¿cuántas personas la emplearon?
- Cancelación de suscripción: ¿Qué número de personas han cancelado su suscripción?
- Tasa de conversión: ¿Cuántas personas tras leer la información realizaron una compra/acción?
Aunque es difícil encontrar una única fuente que nos facilite todo lo que debemos saber y necesitamos para diseñar nuestras newsletters, si contamos con una gran cantidad de recursos online.
Dave Greiner tiene una lista bastante interesante con sugerencias técnicas y trucos que vale la pena visitar y ver en su totalidad. Aquí os dejamos algunos destacados:
- Usar tablas para la estructura, en lugar de CSS.
- Las tablas anidadas son más fiables que el padding y el margin.
- No utilizar imágenes PNG, porque Lotus Notes 6 y 7 no las muestran.
- Establezca explícitamente un margen para los párrafos, los valores por defecto varían mucho.
Plantillas HTML y galerías de diseño:
- Free templates from Campaign Monitor
- Free templates from MailChimp
- Campaign Monitor gallery of great designs
- Beautiful Email Newsletters Gallery
- Inspirational Newsletter Designs: Flickr Set
Artículos interesantes de Campaign Monitor
- Guide to CSS rendering in email clients
- Which email clients block images?
- Can I use a form in my email?
Herramientas para testar nuestras newsletters:
- Campaign Monitor design and spam testing
- 42 HTML Email Design Resources: Un resumen de con los mejores recursos de diseño aplicado a clients de correo electrónico, que abarca visiones generales, normas, plantillas, checklists, herramientas de diseño y galerías entre otros.
Maquetar para clientes de correo es regresar al pasado y a la utilización de tablas. También es necesario definir los estilos CSS en línea, añadiéndolos a cada uno de los elementos.
Pero tampoco nos desesperemos, porque hay algunos servicios online que nos pueden ayudar con este proceso.
- Premailer
- The Automatic Inliner CSS tool: para los estilos
- Inline Styler: para convertir las reglas de estilo en estilos de línea.
Para una buena experiencia es conveniente además, incluir siempre una versión en texto plano, ya que algunas personas pueden tener su sistema bloqueado no pudiendo ver la vista HTML o simplemente su cliente de correo no lo permite por estar demasiado anticuado.
Ofrecer esta alternativa dará al usuario la posibilidad de leer el comunicado sean cuales sean las características de su cliente de correo.
Os dejamos un ejemplo de esta práctica:

Otro punto a tener en cuenta es la visualización de las imágenes.
Si utilizas Outlook o Gmail habrás visto en más de una ocasión que las imágenes no se muestran directamente en el mensaje sino que los lectores tienen que hacer clic para que estas se descarguen y muestren.
Os dejamos un par de tablas que resumen como tratan los clientes de correo tanto web como desktop el bloqueo de imágenes:


Finalmente os dejamos algunas ideas:
- Evitar las imágenes en el contenido relevante, como titulares, enlaces o llamadas a la acción, ya que si el lector no tiene activas las imágenes ese contenido aparecerá en blanco.
- Añadir un enlace a la versión web del boletín, de esta manera si su gestor no le permite la visualización correcta podrá hacerlo directamente desde la web.
- Utilizar el atributo alt para que los usuario de gmail tengan un mejor experiencia.
- Especificar la altura y anchura de las imágenes para asegurarse de que los marcadores de posición no las saquen del diseño.
- Realiza una prueba de envío con las imágenes inhabilitadas antes de enviarlo para chequear que el mensaje es comprensible.
¿Qué otros aspectos tenéis en cuenta en a la hora de maquetar newsletters?
Diseñar con un objetivo nos permitirá poder medir su eficacia.
Os dejamos un ejemplo a continuación para que veáis a que nos referimos:

Cuando diseñamos no podemos perseguir 10 objetivos, porque al final no alcanzaremos ningún, en muchos casos será necesario centrar con el cliente el objeto de la comunicación para poder crear una identidad visual que se ajuste a aquello que pretendemos conseguir.
Otro punto a tener en cuenta es la baja de los usuarios. En muchas ocasiones estamos tentados a poner este tipo de información en la parte inferior, bien pequeñito y en gris clarito, vamos todo lo escondido que se nos ocurre. Pero ¿qué sentido tiene complicarle la vida a aquellos usuarios para los que nuestra información ya no es relevante? Dificultarle el proceso sólo conseguirá que nos tachen de spamers, además de dejarles un mal sabor de boca sobre nuestra empresa.
Os dejamos un buen ejemplo de esta práctica:

En el próximo artículo de la serie, hablaremos sobre el código.
Céntrate en lo relevante.
Comentábamos en artículos anteriores que el lector juega un papel fundamental dentro de la construcción de la newsletter.
Es cierto que cada vez que realizamos una comunicación somos conscientes de que podríamos enviarla a toda nuestra lista de contactos, pero que el usuario acceda a recibir información de nuestra parte no significa que quiera ser bombardeado por un sinfín de descuentos, promociones, etc.
¿Entonces qué hacemos? Una idea sería, organizar nuestra base de datos por ítems de interés. Identifiquemos la información de relevante para un determinado grupo y hagámosle llegar eso.
Además ahora mismo las ISPs y los proveedores de correo dan mayor valor a su definición de spam, por lo que es fundamental centrarnos en lo relevante.
Respeta al lector.
La bandeja de entrada del correo electrónico es hoy en día un lugar atestado de comunicados, un espacio ruidoso, muy ruidoso.
Y es necesario ser realista, un usuario tipo no estará esperando nuestros comunicados con expectación.
Por ello es importante que cuando enviemos nuestro email, nos aseguremos de que no vamos a hacer perder el tiempo o la atención de nadie.
¿Cómo? Siendo relevantes y yendo al grano, en lugar de enterrar la información bajo una montaña de saludos y encabezados con fotos divertidas…averiguando por qué alguien querría nuestra información en su buzón de correo y ajustando el mensaje y la forma a ello.
A continuación podéis ver un buen ejemplo de esto.
Se trata de una campaña de 37signals en la que anuncian Haystack. Podemos ver como desde primera instancia nos aclaran que es Haystack, si necesidad de investigar dentro de la información.
Claro y conciso, si estás interesado seguirás leyendo.

Las newsletter son una realidad que inunda nuestros buzones de correo.
Es por ello que queremos dar comienzo a una serie de post relacionados con el tema, donde pretendemos compartir nuestros conocimientos sobre planificación, diseño y construcción de newsletters en html.
Primero destaquemos los puntos clave en la construcción de este tipo de campañas:
- Respeto al lector. No hagas perder el tiempo ni atención de nadie.
- Céntrate en lo relevante.
- Diseña con un objetivo definido (así podrás comprobar que funciona).
- Haz sencillo para el lector anular la suscripción.
- Maqueta como si fuera 1999 (literalmente) y usa las CSS en línea.
- Incluye siempre una versión en texto sin formato.
- No asumas que las imágenes se pueden ver.
- Respeta la ley.
- Realiza una prueba antes de realizar el envío definitivo.
