Algunas empresas, disponen de herramientas para generar newsletters de forma automática que mantienen a sus suscriptores informados periódicamente. En cambio, muchas otras empresas dedican grandes esfuerzos en gestionar sus bases de datos y en diseñar newsletters cada vez más efectivos en lo que a número de aperturas y clicks se refiere.
En función del tipo de información que se quiere enviar será necesario diseñar newsletters específicos o adaptados a la imagen de un determinado producto. Desde las agencias de publicidad online intentamos desarrollar newsletters atractivos y funcionales, compatibles al máximo con los principales programas de correo electrónico y capaces de transmitir los valores que nuestro cliente quiere evidenciar sobre sus contactos.
A continuación voy a intentar describir cada uno de los pasos que sigo en el diseño de un newsletter, desde el encargo hasta la publicación online y el envío. No voy a entrar en detalles estéticos o tendencias en el diseño, si no en la metodología al elaborar el newsletter:
1- Primeros pasos: Encargo y conceptualización del newsletter
Conviene plantearse varias preguntas antes de iniciar el diseño de un newsleter y es importante saber cuáles son las necesidades o expectativas de nuestro cliente para preparar una buena propuesta.
- ¿Se trata de un newsletter informativo o de imagen? Me explico: encontramos dos tipos de newsletters:
o Los informativos, maquetados en html compuestos por imágenes, botones y textos siguiendo una estructura similar al de una página web. Se utilizan para comunicaciones periódicas, informativas, etc.
o Por el contrario los newsletters de imagen priorizan el diseño y la atracción visual, se maquetan con una o varias imágenes divididas y montadas en un html. Normalmente se utilizan para la promoción de un solo producto, novedad u oferta determinada. Estos newsletters son más susceptibles a ser filtrados como spam por algunos sistemas de correo electrónico y se utilizan para comunicaciones esporádicas.
- ¿Qué periodicidad tendrá el newsletter? La periodicidad con la que se envíe el newsletter nos obligará a determinar elementos modulares que faciliten la maquetación en los siguientes envíos. También deberemos definir qué elementos se mantendrán sin cambios en los siguientes envíos, por ejemplo: cabecera o título del newsletter, logotipos de la marca, textos legales, etc.
- ¿Qué información transmitirá el newsletter y a qué público nos dirigimos? Parece una obviedad pero el tipo de producto o información condicionará el diseño del newsletter así como el número de productos que se prevé anunciar en cada envío. Por otro lado debemos saber a qué público nos dirigimos, esto nos condicionará a la hora de disponer las zonas donde el usuario puede hacer click o que elementos debemos enfatizar.
2- Elaboración de la propuesta, diseño de los bocetos
Personalmente considero que esta es la parte más importante en todo el proceso de diseño del newsletter. Es el momento de empezar a darle forma a la propuesta y presentarle a nuestro cliente cómo creemos que debe ser su newsletter. El 90% del trabajo se realiza en esta fase.
- Trabajar el diseño en Photoshop: Soy partidario de trabajar el diseño del newsletter en Photoshop, de esta manera obtenemos un resultado bastante fiel a lo que veremos una vez montado en HTML. No recomiendo trabajar el boceto en un programa de diseño vectorial y dejar la parte vectorial para trabajar elementos muy concretos del newsletter que montaremos posteriormente en Photoshop.
- Trabajar directamente en el tamaño final del newsletter: Algunos diseñadores se empeñan en realizar los bocetos en alta resolución como si se tratase de un trabajo que va a ir a imprenta. Si el newsletter va a tener 600 píxels de ancho, prefiero trabajarlo a esa medida y así poder comprobar en todo momento la legibilidad de los contenidos.
- Suavizado del texto: Todavía no estamos montando el newsletter en html pero conviene tener una visión lo más aproximada posible y que nuestro cliente también la tenga al ver la propuesta. El texto de muestra lo estamos escribiendo directamente en Photoshop y conviene quitarle el suavizado o bien definir el suavizado “redondeado”. Es el que más se aproxima al resultado que veremos en el newsletter definitivo. Debemos diferenciar qué textos serán “editables” y qué textos serán imágenes por ejemplo titulares o textos con efectos de sombreado, botones, etc.
- Tipografías: Teniendo en cuenta lo explicado en el punto anterior, debemos tener en cuenta que las tipografías utilizadas para representar el texto editable deberán ser las más comunes en los contenidos web: Arial, Verdana, Trebuchet MS, etc.
A partir de la propuesta diseñada en Photoshop haremos un JPEG o PDF de todo el newsletter para poder presentárselo al cliente. Si conviene hacer algún cambio será mucho más fácil hacerlo en el psd de Photoshop que no en una página ya montada en HTML.
El archivo psd resultante nos servirá una vez aprobado para obtener los elementos que formarán el newsletter. Estos elementos los iremos exportando por separado en formatos JPEG o GIF. Por ejemplo imágenes, fondos, iconos, botones, logotipos, etc. Los exportaremos con la opción “Guardar para web” y así definiremos la compresión de las imágenes.
3- Newsletter aprobado, montaje en HTML
Una vez el cliente nos ha aprobado nuestra propuesta de diseño del newsletter toca montarla en HTML, yo utilizo un editor como Dreamweaver. Esta parte es la más delicada ya que conviene hacerlo de la forma más compatible posible con los diferentes programas de correo electrónico.
Si se trata de un newsletter de “imagen” como he comentado al principio, sólo deberemos dividir el JPEG resultante en porciones más pequeñas y determinar el grado de compresión de cada imagen. Así facilitaremos la descarga que si montamos una sola imagen. Los JPEG’s resultantes de dividir la imagen los montaremos en una página html como si se tratase de un puzzle.
Por el contrario, si el newsletter se compone de diferentes imágenes, textos, botones, links, etc. Obtendremos los elementos gráficos del psd que hemos trabajado en la fase anterior.
- Montar el newsletter utilizando tablas: Recomiendo siempre utilizar tablas en lugar de capas para evitar incompatibilidades y disparidad en la visualización. Inicialmente defino una tabla con las dimensiones totales del newsletter. Dentro de esta tabla dividiremos celdas y anidaremos otras tablas para ir dando forma a nuestro diseño.
- Definir dimensiones absolutas en píxels nunca relativas: Algunos clientes de correo electrónico presentan incompatibilidades al interpretar las medidas de las imágenes y tablas en porcentajes. Nos podemos encontrar con usuarios que reciben el newsletter completamente deformado por culpa de una tabla cuyas medidas hemos indicado en %. Por eso siempre especifico medidas absolutas en píxels, tanto de las tablas, celdas e imágenes. Sabiendo las medidas exactas del newsletter podemos calcular fácilmente el espacio en píxels de cada elememento.
- No utilizar estilos CSS: Si bien algunos programas de correo sí que los interpretan, algunos programas de envío lo omiten, así que para evitar problemas mejor no utilizarlos. Conviene desactivar la opción que viene por defecto en las preferencias de Dreamweaver, concretamente en el apartado “General” desactivaremos la opción: “Utilizar estilos CSS en lugar de etiquetas HTML”. En su lugar definiremos las características de los textos mediante etiquetas HTML en cada párrafo.
- Alineación de los contenidos: La alineación de los textos especificada en etiquetas html se interpreta correctamente por los clientes de correo. En cambio la alineación de imágenes y celdas de las tablas no siempre se visualizan bien. En este caso intento dejar la alineación en “default” y defino la posición ajustando las dimensiones de tablas y celdas. Por ejemplo: si queremos colocar una imagen alineada a la derecha respecto a un párrafo de texto, prefiero dividir la tabla en dos celdas, colocando el texto en la celda de la izquierda y la imagen en la celda de la derecha. Y la celda de la derecha tendrá la misma medida en píxels que la imagen que quiero colocar.
- Incluir un link para visitar el newsletter en el navegador de internet: Este enlace se coloca en la parte superior del newsletter y normalmente dice algo como: “Si no visualiza este mensaje pulse aquí”. Irá linkado a la página html de nuestro newsletter publicada en el servidor web. Es una vía de acceso para aquellos contactos que su programa de correo no les muestre el newsletter correctamente.
- Textos legales: Además de disponer de la autorización expresa del destinatario para recibir publicidad desde nuestra empresa, la LOPD (Ley Orgánica de Protección de Datos) obliga a colocar la palabra “Publicidad” en el asunto o en la parte superior del cuerpo del e-mail. Además debemos incluir una nota legal al pie del e-mail que identifique la titularidad de la base de datos y los derechos que tiene el usuario para acceder a ellos, modificarlos o cancelarlos.
4- Publicación en el servidor y envío
Una vez programado el newsletter y teniendo las imágenes comprimidas, debemos publicarlo en un servidor web mediante un cliente ftp. La dirección web será algo así como: “http://www.dominio.com/newsletter/index.html “ y a esta dirección deberá apuntar el link: “Si no visualiza correctamente este mensaje pulse aquí”
Duplicaremos la página html creada y en la copia local, sustituiremos todas las referencias a las imágenes (especialmente las imágenes de fondo), especificando la URL completa a la imagen publicada en el servidor web. Por ejemplo: si la ruta local de la imagen del logotipo del newsletter era img/logo.jpg la cambiaremos por: “http://www.dominio.com/newsletter/img/logo.jpg”. De esta manera nos evitaremos problemas con el software de envío.
Este código html guardado localmente ya podremos utilizarlo para realizar las primera pruebas de envío. Conviene testear el newsletter antes de hacer el envío definitivo para ver cómo se recibe en los principales clientes de correo y en los webmails más populares (Gmail, Yahoo, Hotmail, etc.)
Espero que os haya servido de ayuda estos breves apuntes. Supongo que habrá quien utilice otros métodos, tal vez más eficaces, en cualquier caso estos detalles son los que he podido ir recopilando durante todo este tiempo en el que he desarrollado newsletters para los clientes de nuestra agencia.
