10 tips para crear Newsletters utilizando HTML

Hay varias cosas que un diseñador debe tener en cuenta a la hora de diseñar un Newsletter. Además del mensaje y el diseño publicitario, es importante prestar atención a cómo el destinatario recibirá el News en su correo electrónico, cómo lo verá: con fotos, sin fotos, con qué tipografías. Aquí presento algunos conceptos básicos sobre Newsletters en HTML para que la campaña sea realmente efectiva.

Un Newsletter es generalmente parte de alguna campaña de promoción. Aunque la empresa esté informando y no promocionando, esta pieza de comunicación sigue siendo un reflejo de la imagen que la empresa quiere dar, con la que deberían identificarla.

1. El Asunto

El “tema” del News debe estar condensado en el nombre del Asunto, que verá el destinatario en su bandeja de entrada de su e-mail. Aquí no se puede andar con rodeos. Debe ser un mensaje fuerte y claro. Poniendo un ejemplo: una empresa de viajes que promociona diferentes paquetes turísticos, elegirá la mejor promoción para incluir en el Asunto como: “Consigue un 20% de descuento en tu viaje”, sin detallar de qué viaje se trata. Lo que queremos conseguir es que el destinatario se sienta interesado y quiera leer nuestro e-mail.

<title>Consigue un 20% de descuento en tu viaje</title>

2. El mensaje

Es importante que el diseño tenga diferentes “capas”, dependiendo de la importancia del mensaje. Así, en un News como el de la fotografía se pueden leer esos niveles como:

Mensaje principal: “Small Hotels, BIG Personalities in SFI”

Mensaje de apoyo: “Boutique Hotels on Union Square”

Cuerpo del mensaje: Aquí se incluirá el detalle de la promoción. Fíjate con atención que hay dos párrafos destacados: el primero, a modo de introducción, en negrita; y el tercero, donde se detalla el valor monetario de la oferta, en rojo. Así, el destinatario puede leer sólo lo que le interesa de forma rápida, sin tener que leer de más para encontrar lo que busca. El texto rojo es un mensaje claro y obvio. También destaco que el precio está bien resaltado. La persona interesada en el precio puede leer directamente eso y profundizar en el resto de la información si es que realmente le interesa.

Cuando en el cuerpo de un mensaje hay demasiada información, todo pierde pregnancia. En el caso de un instituto de educación que promociona cursos, podrán decir que todos los cursos son igual de importantes, pero no todos pueden estar al mismo “nivel” en el diseño. Se puede elegir uno o dos para destacar, luego cuatro en un segundo nivel y el resto en un tercer nivel. De esta manera, se logra captar la atención del destinatario sobre un punto. Si no existe un diseño basado en niveles, el destinatario deja de leer, se marea por la información.

En esta imagen se puede ver que el texto de la izquierda posee mucha información y toda en el mismo nivel, mientras que en el texto de la derecha la información está “ordenada” en niveles. El lector le prestará atención a los primeros tres artículos y seguirá leyendo si está interesado.

3. No abusar del logo

Es molesto que el logotipo de la empresa se vea repetidamente en una pieza de comunicación. Por eso, con uno o dos logos es más que suficiente. Acuérdate que el logotipo debe ir siempre linkeado a la página de la empresa.

4. Aviso legal

En el pie o footer del Newsletter debes agregar un aviso legal indicando que el Newsletter ha sido enviado por cortesía de la empresa. Aclara que:

• la empresa no comparte la dirección de correo del destinatario con ninguna otra empresa
• la empresa no envía correo basura o “spam”
• el destinatario puede dejar de recibir el Newsletter (debes indicar allí mismo cómo hacerlo: a través de un correo electrónico, dirigiéndose a alguna parte del sitio web, etc.)

En el Newsletter de Micro Star International, el footer se ve así:

5. Si no ves el Newsletter…

Los News suelen subirse como un sitio web. Esto es así para poder redirigir a los usuarios a una página, en caso de que no puedan ver el correo. Así, el destinatario tiene la posibilidad de ver nuestro mensaje de cualquier manera.

Para esto, debes incluir en la parte superior del News, un enlace con algo parecido a: “Si no ves nada, haz clic aquí: http://www.agenciadeviajes.com/newsletters/news21.html”

6. Evita el uso de CSS

Como muchos proveedores de correo no muestran los estilos adjuntos a un mensaje, debes evitar trabajar con CSS, tanto como una hoja adjunta como dentro del código HTML en forma de estilos (<style>) al inicio del código.

En vez de eso, debes tratar cada elemento de forma individual. Si a todos los subtítulos le asignabas el estilo <h3> que quedaba estipulado en un CSS, ahora deberás asignárselo a cada uno por separado de esta manera: <td style="font-family:'Trebuchet MS', Verdana, Arial; font-size:13px"><font color="#333333">. Es un poco fastidioso, pero te aseguras de que el cliente vea el e-mail tal cual lo has diseñado.

7. Manejo de tipografías

Cuando en el código le asignas aun texto un estilo de tipografía o fuente, debes incluir tres opciones: font-family:’Trebuchet MS‘, Verdana, Arial. Muchas personas no tienen ciertas fuentes instaladas en sus computadoras. Esto significa que jamás verán el News con la fuente que tu has elegido, pero puedes darles opciones. En este caso, Trebuchet MS es la fuente predeterminada. Si el destinatario no la tiene, verá el News con Verdana, y si no tiene Verdana, lo verá con Arial. Escoge fuentes similares para que el News mantenga una continuidad con el diseño original.

8. Imágenes

Quizás lo más destacado a la hora de diseñar un Newsletter es el tema de las imágenes. Hoy en día la mayoría de los proveedores y programas de manejo de correo electrónico deshabilitan las imágenes. Para verlas, el usuario debe seleccionar la opción de habilitarlas, pero no todos lo hacen. Entonces es el desafío del diseñador, crear un News donde la información importante no esté incluida en las imágenes, sino que estas sean más bien un accesorio.

También debe lograr que cuando las imágenes no se muestran, no quede un espacio vacío en su lugar que moleste o que esté muy destacado. Yo personalmente, ubico las imágenes y luego las reemplazo por elementos grises del mismo tamaño. Así tengo una idea de cómo verá el News una persona que no haya habilitado las imágenes.

Con respecto al color, debes tener en cuenta que muchas veces los textos aparecen sobre una imagen, y a veces se plantea un problema cuando la imagen de fondo es oscura y el texto es blanco o claro. ¿Por qué? Porque si las imágenes están deshabilitadas, se muestra un fondo gris y el texto no se ve. En este caso, lo que debes hacer es asignarle un color oscuro a la table donde va a ubicarse la imagen:

<td width="426" height="115" background=”URL de la imagen” bgcolor=”#000033″>

9. News listando contenido

Muchas veces, los Newsletter buscan informar sobre el último contenido o las últimas novedades de un sitio web. Este es el caso del News de ElWebmaster.com, donde se listan los artículos de la última semana. En estos Newsletters lo más importante es que la información sea clara, que el listado tenga algún tipo de distinción de “capas”, con contenido más y menos importante bien diferenciado, ninguna o pocas imágenes y enlaces claros a las páginas del sitio que estamos recomendando. No es necesario que el News esté alojado en Internet como una página web.

10. Newsletter de imágenes

También existen Newsletter donde la imagen es tan importante que el 80 por ciento del News está basado en imágenes. Las empresas con mucho desarrollo en publicidad gráfica prefieren este tipo de comunicación. Cuando el destinatario tiene deshabilitada la opción de mostrar imágenes, estos News se ven como cajas vacías. Aquí es sumamente importante incluir la opción de “Si no ves el Newsletter…”.

Estos News deben dejarse únicamente para campañas de promoción y envío de novedades, nunca para mensajes informativos que deben ser recibidos sí o sí, puesto que es probable que sean pocos los destinatarios que lleguen a leer el mensaje completo.

En la imagen superior se puede ver cómo queda un Newsletter basado en imágenes y uno donde las imágenes son accesorios del contenido, cuando quedan deshabilitadas.