Con este post voy a comenzar una serie llamada "Casos de estudio de análisis de email". Como sugiere el nombre analizaré de vez en cuando diversos aspectos de correos electrónicos de marketing o boletines reales que lleguen a mi buzón y que tengan algo interesante que destacar o muestren lecciones que aprender. Tanto en lo que se refiere a buenas como a malas prácticas. Espero que los encuentres interesantes y que todos podamos aprender algo (yo incluido).

En este primer post voy a hablar sobre un correo que he recibido hace unos pocos días en mi cuenta de GMail. Se trata de un correo de marketing de HTC, el fabricante de dispositivos móviles, que me invitaba a probar gratuitamente su nuevo servicio en línea de correo "push" y sincronización llamado HTCmail.

En la siguiente figura puedes ver los contenidos del correo que recibí visualizado en GMail con las imágenes habilitadas:

Haz clic en la imagen para aumentar

La verdad es que no está nada mal. Pero, ¿qué pasa cuando no permites que se vean las imágenes? (que es lo que pasa por defecto). Veámoslo:

Haz clic en la imagen para aumentar

Esto revela un buen diseño del contenido por parte del equipo de marketing de HTC. Como puedes apreciar, todavía puedes leer todo el contenido perfectamente, y el mensaje original completo se entrega al destinatario aunque las imágenes no se visualicen. Incluso el texto que va originalmente en el gráfico se visualiza bien. El "truco" para ello es que han incluido el mismo texto que había en el gráfico dentro del atributo ALT de la etiqueta <img>  que se usa para colocar la imagen en el HTML. De este modo, cuando la imagen no se visualiza sí lo hace este texto alternativo, al menos en algunos clientes de correo como GMail (échale un vistazo a este artículo (en inglés) de Campaign Monitor para ver una lista de clientes de correo que soportan el atributo ALT).

Sin embargo han incluido la altura del gráfico de la cabecera en la misma etiqueta <img>, lo que no es una buena idea ya que es bastante alto. Por ello cuando el cliente de correo no visualice los contenidos alternativos lo que obtendremos será una zona en blanco de unos 250 píxeles de altura. Y esto pasará en la gran mayoría de los clientes de correo del mercado, moviendo los verdaderos contenidos casi a la zona "below the fold" de forma que mucha gente no los leerá y borrará el correo.

En GMail esto no pasa porque quita totalmente las imágenes cuando no están permitidas y además soporta el atributo ALT, lo que es la mejor de las situaciones para este contenido en particular (no así para otros contenidos como seguramente tendremos oportunidad de ver en otros análisis más adelante).

El resto del correo está bien distribuido y con un HTML muy limpio (usando tablas y no etiquetas div, una buena práctica en diseño de correo HTML), por lo que se visualizará bien en la mayoría de los clientes de correo. La única pequeña cosa que vale la pena advertir es que el atributo ALT para el gráfico del recuadro ("Aspectos destacados") se han olvidado de traducirla y se visualiza como "Key features" (en inglés) en la versión sin imágenes. Esto es un fallo habitual en empresas que hacen marketing multinacional y es algo con lo que debemos tener especial cuidado.

El resto de correo se visualiza aparentemente bien: muestra unos cuantos gráficos y un borde sombreado en el recuadro de características, que incluso tiene los bordes redondeados. De todos modos las "flechas" que pueden verse en los bordes de la zona de contenido principal revelan que hay algo que no está funcionando bien del todo. Y el rectángulo gris "powered by" así como la extraña línea verde discontinua a la izquierda de las características son pistas de que algo no está bien.

Echemos un vistazo a los contenidos HTML originales visualizados en un navegador de Internet sin limitaciones:

Haz clic en la imagen para aumentar

Como era de esperar había problemas con la correcta visualización del correo en GMail. Lo primero es la desaparición del fondo de color gris. El problema en este caso es que han utilizado el atributo "background" de la etiqueta HTML <body>:

<body bgcolor="#6a6a6a"...

Esto afecta a la parte de abajo del contenido y es el motivo de que el gráfico "powered by" esté como "colgado" por ahí con un efecto muy feo. De hecho incluso han tenido suerte ya que eligieron un color gris algo más claro para el texto y éste es visible incluso contra el fondo blanco por defecto. Si hubieran usado el color blanco para hacer que el texto resaltara más contra el fondo oscuro el efecto hubiera sido que no se vería.

Lo que tendrían que haber hecho es establecer este fondo gris en una tabla exterior de una sola celda que contiene al resto del contenido. Generalmente la etiqueta <body> y todo lo que está fuera de ella es eliminado por los clientes de correo antes de visualizar los contenidos, así que el color allí establecido se pierde. En este caso además han utilizado varios estilos CSS embebidos en la cabecera de la página HTML, que también se retiran y que no son aceptados o visualizados por muchos de los clientes de correo del mercado.

Analizando los contenidos "brutos" del correo que enviaron vemos que han incluido el código HTML completo de la creatividad (todo lo que hay entre las etiquetas <html> y </html>), lo que no suele ser una buen idea. También han incluido una versión de sólo texto del correo para ser consumida desde dispositivos móviles lo que constituye una buena práctica.

En resumen: la estructura del email y su HTML están bien diseñados y relativamente bien implementados, aunque han fallado en un par de cosas básicas que no han conducido al resultado óptimo para los contenidos.

My nota para este correo sería un 7 sobre 10 :-)