Mejores Prácticas para el Diseño y Envío de Newsletters 2

Como prometimos en la primera entrega de este artículo en esta segunda parte abordaremos el diseño y envío de newsletters o Boletines Electrónicos, intentando cubrir algunos de los aspectos técnicos fundamentales, los cuales podrían sintetizarse en estas 3 preguntas:

  1. ¿Cómo hago un envío masivo?
  2. ¿Cómo logro que el envío no sea confundido con spam y llegue a la bandeja de entrada de los suscriptores legítimos?
  3. ¿Cómo consigo que el newsletter se vea igualmente bien en los distintos sistemas de correo electrónico?

Cómo hacer un envío masivo a una base de suscriptores

  1. El método “casero”

    A medida que la base de suscriptores crece, la forma casera de hacer envíos comienza a hacerse insostenible

    Es probable que en las primeras etapas de envío de newsletters optemos por el método de insertar todas las direcciones de los destinatarios en el campo CC de nuestro programa de correo o, si somos un poco mas cuidadosos, tomemos la precaución de utilizar el campo CCO para no exhibir impunemente las direcciones de e-mail de los destinatarios al resto de la lista ni dejar tan accesible la posibilidad de que usen el botón “Responder a Todos”. De una u otra forma, nuestro newsletter se verá poco profesional y nos toparemos con restricciones en la cantidad de e-mails enviados por parte de nuestro ISP o de nuestro servicio de webmail lo que nos obliga al tedioso trabajo de hacer los envíos por tandas.

  2. Utilizando un software “cliente” (que corre en nuestra computadora)

    A medida que la base de suscriptores crece, la forma casera de hacer envíos comienza a hacerse insostenible. Como una posible solución a este problema, se presentan varias aplicaciones de envío masivo que utilizan los recursos nuestra propia computadora y nuestra conexión a Internet. Esto tiene sus desventajas:

    Estos programas fueron y son utilizados por spammers de todo tipo, por lo que muchos filtros no los dejarán pasar, los marcarán como “junk”, “spam” o lo mandarán a la carpeta de correo no deseado.

    Si la dirección IP que nos provee nuestro ISP es fija, los servidores que reciban los e-mails no dejarán pasar tantos mensajes provenientes desde una sola IP, para ellos desconocida como fuente confiable de envío. Si la IP es dinámica, las posibilidades de ser bloqueados aumentan aún más.

    Los datos de los suscriptores quedan almacenados en nuestro equipo y no accesibles para el usuario que desee suscribirse, actualizar su e-mail o darse de baja automáticamente desde la web. Esto nos obliga al trabajo de procesar cada requerimiento de a uno por vez.

    Si no son acompañados por un sistema de reportes on-line no pueden medir indicadores básicos como la tasa de apertura.

  3. Mediante un Proveedor de Servicios de E-mail (ESP)

    Cuando hace unos años se nos presentó el problema,encontramos que la única solución profesional para hacer envíos de newsletters y para mantener y hacer crecer una base de suscriptores que desean recibirlos era una solución basada en web, que contara al menos con un servidor dedicado para la tarea. Esa solución podía implementarse como un desarrollo “a medida” para cada cliente o podíamos crear una Aplicación Web que reduzca la inversión inicial de cada cliente y les permita desentenderse de los problemas de envío de correo en un contexto técnico muy cambiante, que tiene que balancear continuamente la lucha contra el spam con la llegada a destino de los e-mail legítimos. Esto nos llevó a trabajar en el desarrollo de SimultaNews.com, que comenzó en 2003 a ser utilizarlo por estudios, agencias, empresas e instituciones de casi 20 países de habla hispana. Actualmente existen varios servicios similares y cada uno podrá encontrar el más adecuado a sus necesidades y a su presupuesto.

¿Cómo logro que mi envío no sea confundido con spam?

Además de las cuestiones técnicas mencionadas arriba, cuya conclusión sería: “Obtener una cuenta en un Sistema de envío de Newsletters nos da muchas más chances de que nuestro newsletter llegue a destino”, existen otros aspectos que pueden influir en la tasa de entrega (en inglés se utiliza el término “deliverability” que podría traducirse como “Entregabilidad”). La tasa de entrega de un envío es el resultado de dividir la cantidad de e-mails que llegan a la bandeja de entrada de los suscriptores por la cantidad de direcciones de e-mail a las que se intentó hacer el envío:

Tasa de entrega =
cantidad de emails recibidos en la bandeja de entrada
cantidad de emails enviados

Nuestro objetivo es mantener esa tasa en el valor más alto posible. De esto se ocupará en gran parte el servicio web que contratemos. Los mejores servicios de envío de newsletter deben tener una buena reputación y asegurarse de implementar las recomendaciones de los mayores proveedores de correo electrónico, como por ejemplo la autenticación de los e-mails salientes, pero además existen aspectos del contenido, diseño y codificación HTML/CSS que influyen también en la llegada de nuestro newsletter.

Diez recomendaciones para mejorar la Tasa de Entrega

  1. Utilizar una dirección de e-mail y un remitente (“De:” o “From Name:”) que sea reconocible por el suscriptor. Preferentemente que contenga el nombre de la empresa que lo envía.
  2. Mantener una frecuencia fija, conocida de antemano por los suscriptores. Si enviamos diariamente un boletín que se suponía semanal, probablemente los suscriptores terminen rechazándolo y marcándolo como no deseado.
  3. Agregar links automáticos de baja de la lista (los buenos Servicios Web de envío de newsletters incluyen esta función). Si un suscriptor no encuentra rápidamente la forma de darse de baja de un newsletter, optará por marcarlo como spam.
  4. Evitar el uso excesivo de mayúsculas y signos de admiración en el remitente, en el asunto y en el contenido.
  5. Mantener un balance entre la cantidad de texto e imágenes. Vemos muchos newsletters visualmente muy bellos, que consisten en una única imagen incrustada en un HTML. Para los filtros, un envío de ese tipo luce como un perfecto spam.
  6. Agregar los correspondientes textos “Alt” a las imágenes y atributos como “title” a imágenes y links. Los spammers no se tomarían ese trabajo.
  7. Descartar la idea de incluir flash, gifs animados, JavaScript, controles ActiveX o video dentro de un newsletter HTML. Para mostrar una animación o video, usemos links a páginas externas en las que coloquemos esos contenidos.
  8. Evitar el uso de colores primarios y secundarios puros aplicados al texto o fondos.
  9. Mantener la lista de suscriptores limpia, actualizada y libre de cualquier dirección de e-mail de personas que no hayan solicitado o no deseen recibir más nuestro newsletter. (ver la parte 1 de nuestro artículo).
  10. En definitiva: Si no queremos que nos confundan con spammers debemos intentar no parecernos a ellos.

¿Cómo consigo que el newsletter se vea igualmente bien en los distintos sistemas de correo electrónico?

A diferencia de lo ocurrido con los más populares navegadores, que en los últimos años han avanzado hacia una mayor compatibilidad con los estándares de codificación HTML/CSS permitiendo a los diseñadores web crear páginas bellas, accesibles y fácilmente actualizables, las cosas son muy diferentes con los cientos de aplicaciones, servicios de webmail y dispositivos móviles que se utilizan para visualizar el correo electrónico.

Cinco consideraciones sobre el correo electrónico en HTML

  1. El soporte de CSS en muchos de los sistemas de e-mail es muy pobre. Por ejemplo Microsoft Outlook en sus versiones de 2007 y de 2010 (que utiliza el motor de Word y no HTML para mostrar los e-mails) no reconoce los atributos CSS de posición.
  2. Los servicios de webmail más populares (Hotmail, Yahoo, Gmail) eliminarán el contenido completo del <head> y los atributos incluidos en el tag <body> de nuestro código. Todo lo que incluyamos dentro de esas etiquetas desaparecerá (por ejemplo las hojas de estilo, y el color de fondo). Gmail en particular eliminará toda hoja de estilos CSS que encuentre, tanto en el head como en el body.
  3. Los servicios de webmail muestran parte de los emails con sus propias hojas de estilo e ignoran buena parte del formato que se le haya dado con CSS.
  4. Si las imágenes fueran embebidas en el e-mail, tal como hacen algunos programas de correo, muchos usuarios las recibirían como datos adjuntos. Conclusión: las imágenes deben estar disponibles para ser descargadas desde un servidor. Sin embargo desde hace unos años, la mayoría de los clientes de email y servicios de webmail bloquean la descarga de imágenes desde un servidor externo y se requiere que el usuario autorice esa descarga.
  5. El ancho en px del área en la que se muestran los e-mails es muy variable, más allá de la resolución de pantalla. Los paneles de vista previa, el acceso mediante dispositivos móviles y el tamaño del área de visualización de los webmail lo hacen cambiante e imprevisible.

Para crear un buen Newsletter en HTML y lograr la mayor compatibilidad posible la solución es retroceder en el tiempo y volver a recomendar algunas técnicas ya casi en desuso y seguramente vistas como no muy “cool” por las nuevas camadas de diseñadores web.

Doce recomendaciones para diseñar y codificar un newsletter HTML

  1. Mantener el diseño lo más simple posible
  2. Utilizar tablas (sí, tablas) y no divs para posicionar los elementos de nuestro newsletter. Preferentemente usar tablas diferentes para cada parte del contenido y evitar en lo posible, las tablas anidadas y la combinación de columnas (colspan)
  3. Si queremos incluir un color para el fondo de nuestro newsletter deberemos crear una tabla de 100 % de ancho con ese color de fondo.
  4. No usemos hojas de estilo externas ni embebidas en el head. Podemos utilizar CSS sólo aplicando los estilos “inline”, es decir repitiendo cada estilo dentro de cada etiqueta HTML mediante la propiedad style. Lamentablemente es la única forma totalmente segura de aplicar formato mediante CSS a un newsletter, pero hay formas de hacer este proceso menos tedioso. Usando con inteligencia las funciones de buscar y reemplazar de cualquier editor podremos cambiar estilos sin tanto trabajo. También hay herramientas online para convertir código de CSS externo, como Inline Styler. Aquí, un ejemplo de estilos inline aplicado a un párrafo (el código y el resultado):
    <p style="text-align:center;background-color:#e9e9e9; padding:4px;">Este texto debería verse dentro de un bloque con un fondo claro</p>

    Este texto debería verse dentro de un bloque con un fondo claro

  5. Si no tenemos tiempo o ganas de hacer esta tarea, podemos probar incluyendo las hojas de estilo dentro de los tags <body> y </body>. Esto funcionaba bastante bien hasta hace poco, pero no funcionará en Gmail por lo que si tenemos muchos suscriptores de ese servicio es preferible usar estilos “in line”. Otra opción es rescatar a nuestra vieja y ya obsoleta etiqueta <font>, para dar un formato sencillo al texto.
  6. Utilizar un ancho fijo de menos de 600 px, para asegurarnos de que la mayoría de los dispositivos puedan mostrar decentemente nuestro diseño.
  7. Subir las imágenes a un servicio de hosting (o hostearlas en el propio servicio web de envío) e incluir como ruta de todas las imágenes, la url absoluta de cada archivo de imagen. Por ejemplo: si tenemos una carpeta llamada “newsletter” en nuestro sitio, y usamos un editor como Dreamweaver, probablemente nos quede algo así en el código:
    <img src="logo.jpg">

    Para que los usuarios que reciben el email puedan ver esa imagen deberemos reemplazar ese código por:

    <img src="http://www.ejemplo.com/newsletter/logo.jpg">
  8. Los vínculos deben también contener la ruta absoluta al archivo vinculado:
    <a href="http://www.ejemplo.com/pagina-de-ejemplo.htm">
  9. Diseñar el newsletter teniendo en cuenta que muchos suscriptores le darán una leída “por arriba” para ver si les interesa antes de decidirse a activar la descarga de las imágenes. Es importante que se vea medianamente bien aún en esas condiciones. Una sugerencia: indicar siempre el alto y ancho de cada imagen para que el “placeholder” (indicador de posición de imagen) tenga el mismo tamaño que la imagen original y no se desarme el diseño.
  10. Si queremos que más gente lea y haga click en los links de nuestro Newsletter, nunca usemos imágenes para esos links ni para los títulos o contenidos relevantes.
  11. Podemos usar el Dreamweaver u otra herramienta WYSIWYG pero, en última instancia, siempre tendremos que codificar “a mano” parte de nuestro newsletter. Si no estamos dispuestos a ensuciarnos las manos con el código, es mejor que le pasemos la tarea a alguien que pueda hacerlo.
  12. Hagamos varias pruebas antes de enviar un newsletter. Recomendamos tener al menos un equipo con los principales programas de correo instalados y tener varias cuentas POP3 y de webmail que usemos para testear los resultados en cada sistema.

Nota: Este artículo fue originalmente publicado en Septiembre de 2008 y actualizado en Julio de 2012.