Cinco pasos para desarrollar un Newsletter en HTML
23 junio, 2015
Un newsletter sigue siendo el elemento principal de las campañas de correo electrónico, un medio eficaz para comunicar algo entre empresas y consumidores. Las empresas pueden medir varios parámetros dentro del correo, como compras realizadas o clics a enlaces, y el consumidor recibe información concisa y presentada de manera agradable.
Codificar un correo en HTML puede ser fácil y divertido. A diferencia de un sitio web, los correos HTML necesitan verse bien en clientes de correo arcaicos, como Outlook o Mac Mail, así como en los últimos smartphones y tabletas. Lograrlo no es tan difícil.
Fundamentos del correo HTML
El mayor problema al codificar un correo en HTML es que existen demasiadas herramientas para leerlos, desde las de escritorio (Eudora, Outlook, Thunderbird, Lotus Notes), las basadas en web (Yahoo!, Hotmail, Google Mail) hasta las aplicaciones de correo en smartphones y tabletas. Al final, son estos clientes de correo los que determinan el HTML y CSS que se mostrará.
Si realizar sitios web garantizando su compatibilidad con los principales navegadores es complicado, tratar de hacerlo para todos los clientes de correo es una tarea titánica. No sólo por las variaciones de los clientes de correo, también por las variables del tamaño y resolución de las pantallas, lo cual lo complica aún más.
Ya sea que se codifique el HTML a mano o se utilice alguna plantilla, hay algunos conceptos fundamentales a seguir:
- El uso de tablas de HTML para controlar la plantilla de diseño. Sabemos que usar CSS es la práctica más viable para sitios modernos, pero debemos evitarlo en correos HTML.
- Utilizar inline CSS, es decir, colocar los estilos en cada etiqueta HTML, para controlar elementos como fuentes e imágenes de fondo, y jamás enlazar archivos de CSS.
- No usar abreviaturas de CSS, por ejemplo, en lugar de usar código como
font: 12px/16px Arial, Helvetica, se deben indicar las propiedades individuales:font-family,font-sizeyline-height.
Paso 1: Utilizar tablas HTML para la disposición de los elementos
Así es, las tablas están de regreso. Algunos clientes de correo están atrasados años en términos de soporte de CSS, lo cual significa que controlar el diseño a través de tablas es lo más apropiado para una visualización consistente.
El primer paso en crear un correo HTML es decidir qué tipo de disposición se desea. Para Newsletters, una o dos columnas son las mejores opciones, pues será más fácil controlar el caos que producirá el contenido en un espacio reducido como lo es un correo electrónico.
Una disposición de una sola columna consiste de:
- Una cabecera (header), que contiene el logo y algunos enlaces de navegación, para reforzar la marca.
- El cuerpo (body) con los diferentes contenidos.
- Un pie de página (footer), mostrando enlaces similares los de la cabecera y la información de términos y condiciones y métodos para dar de baja la suscripción.
Algunos correos a dos columnas utilizan el área más estrecha para enlazar a más información fuera del correo mientras que la zona más ancha se utiliza para el cuerpo del mismo. En ambos formatos se incluyen algunas imágenes con un pequeño texto explicativo y los enlaces correspondientes.
No importa si se desean más áreas de contenido, todas estas posibilidades se pueden crear utilizando tablas para dividir el espacio en filas y columnas, de hecho, es la única manera consistente para lograrlo en los diferentes clientes de correo electrónico.
Paso 2: Agregar estilos de CSS
A pesar de las limitaciones de los clientes de correo para soportar CSS hay algunas instrucciones que si funcionan y nos pueden ayudar a crear correos más atractivos, siempre y cuando tengamos en consideración algunos detalles.
- Primero, utilizar los estilos dentro de las etiquetas HTML, jamás usar declaraciones CSS en el
<head>, siempre después del<body>, pues clientes como Google Mail eliminan los estilos que se encuentran en la cabecera del HTML, al igual que los elementos enlazados<link>. - Para la tabla contenedora, ajusta su ancho al 98%, algunos clientes como Yahoo! utilizan un colchón para mostrar correctamente el correo. Si un diseño lo requiere, se puede ajustar hasta un 90% para evitar problemas potenciales. Obviamente las tablas dentro de este contenedor deberán ajustarse al 100%.
- La información general sobre las fuentes debe ir en la etiqueta de datos de la tabla
<td>más cercana al contenido, aunque esto resulte en declaraciones múltiples en todas las etiquetas. Minimiza el uso de etiquetas<div>, úsalas para flotar contenido dentro de una celda. Google Mail, por ejemplo, ignora las declaracionesfloatde CSS (Yahoo! y Hotmail si los toman en cuenta), por lo que a veces es mejor crear tablas anidadas. - Al contrario del
<div>, la etiqueta<span>funciona casi siempre, ya que son elementos en línea. Pueden ser utilizadas para colorear o ajustar el tamaño de las fuentes o para posicionar texto por encima o debajo de otros contenidos.
Siempre se deberá revisar el código antes de continuar.
Paso 3: Adoptar las mejores prácticas.
El saber que se ha creado un HTML válido utilizando es solo parte de la solución, existen muchas prácticas que hay que seguir para asegurar la correcta recepción un correo HTML.
El siguiente paso es probar en todos los clientes de correo posibles, lo cual nos ayudará a identificar problemas.
Lo primero sería utilizar los navegadores Firefox e Internet Explorer. Si el correo se muestra perfectamente en ambos, existe la posibilidad de que funcione en Outlook, Yahoo!, Google Mail y otros servicios con problemas menores. De ser posible, hay que probarlo en IE6 para darnos una idea de cómo se vería en Outlook 2003. Finalmente, probarlo en Safari, lo cual dará una idea de como se muestra en un iPhone o un iPad.
Una vez que aparece correctamente en los navegadores, habrá que enviar el correo a cuentas de prueba, que por lo menos deben incluir los servicios más populares como Yahoo!, Google Mail y Hotmail. Si, por ejemplo, en la lista de suscriptores no se incluye ningún usuario de AOL, no es necesario probarlo en una cuenta de este servicio.
Aquí mencionamos algunos de los ajustes más comunes que se encuentran en esta etapa de prueba:
- Algunas veces se necesita indicar anchos fijos de columna en lugar de porcentajes, no es ideal pero puede ser la única forma para una visualización correcta.
- Si hay problemas con el espaciado, es mejor ajustar los atributos HTML de
cellpaddingycellspacingde la tabla, solo en caso de que no funcione utilizar CSS. - Puede ocurrir desplazamiento de imágenes cuando se coloca la etiqueta
</td>abajo de una<img>, es un antiguo problema del HTML, si se coloca en la misma línea de código que la<img>se elimina el problema. - Es importante asegurarse que el correo se visualiza de manera aceptable sin imágenes, si se usa texto en blanco, se sugiere usar un color oscuro como fondo de la celda.
También se recomienda cumplir con las siguientes prácticas:
- No utilizar JavaScript, los clientes de correo lo inhabilitarán.
- Si una imagen se encuentra rebanada y colocada dentro de varias celdas de una tabla, se deberá probar el correo en tantos servicios como se pueda, podrá verse bien en Outlook pero descuadrarse por completo en Hotmail. Podría ser mejor hacer la imagen de fondo en una tabla que contenga la tabla con la información, se obtiene el mismo efecto mejorando la compatibilidad.
- Para imágenes de fondo, utilizar el atributo de tabla
backgrounden lugar de CSS. Es lo más consistente. - Almacenar las imágenes en un servidor en línea, de preferencia en un folder separado de un sitio web, por ejemplo, …/images/e-mail/ y no eliminarlas. Algunas personas verán el correo meses después de ser enviado.
- Asegurar que todas las imágenes tengan los atributos
alt,heightywidth. Mejora la visualización en Google Mail y mantiene la disposición de los elementos si no se ven las imágenes. Hay que tomar en cuenta que Outlook no reconoce el atributoalt. - Utiliza el atributo
target=“_blank”para los enlaces, para que los usuarios que se encuentren en un correo web no sufran interferencia al abrir un enlace. - Jamás recurrir a técnicas de spam. Jamás.
Una vez realizadas todos estos ajustes y pruebas, el siguiente paso es verificar lo siguiente:
- ¿La dirección de correo se muestra correctamente, como un nombre y no una simple dirección?
- ¿La línea de asunto es apropiada?
- ¿La información de contacto es correcta y visualmente clara?
- ¿Se incluyen los datos de porqué se recibe el correo y como dejar de recibirlo?
- ¿El correo contiene un enlace a la versión web?
El último punto es importante, pues algunos servicios de correo no permiten ver correo HTML.
Paso 4: Crea código para Google Mail, Lotus Notes y Outlook 2007
Google Mail, Lotus Notes y Outlook 2007 tienen sus propios retos al crear una Newsletter en HTML.
Al correr a través de un navegador de internet, Google Mail no puede controlar del todo el contenido de los correos que muestra, por lo tanto, Google tomó las medidas necesarias para asegurar que su aplicación funcione, independientemente de la calidad del HTML y CSS de los correos que recibe. Al parecer la mejor solución ha sido utilizar normas algo primitivas.
De inicio, Google Mail elimina cualquier estilo CSS que se encuentre entre etiquetas <style> del HTML, no importa donde se encuentren, solo por mencionar una de las limitantes.
En el caso de Outlook 2007 es sorprendente que tiene menor soporte de CSS que versiones previas de él mismo.
La buena noticia es que si el código generado funciona en las aplicaciones mencionadas, lo más probable es que se muestre correctamente en la mayoría de los clientes de correo electrónico. A continuación enlistaremos algunos consejos:
- Definir el color de fondo en las celdas
<td>de una tabla con el atributo bgcolor, no con estilos de CSS. - De igual forma utilizar el atributo
backgroundde la etiqueta<td>para imágenes de fondo, recordando que Outlook 2007 ignora todas las imágenes de fondo por completo. - Utilizar
paddingpara controlar el espacio entre las celdas de las tablas puesmarginno funciona correctamente. - Si se requiere mostrar bordes en la tabla, Google Mail muestra los bordes de
<td>cuando se encuentra dentro de un<div>, pero no si es solo un estilo de la etiqueta. - Si
<p>y<a>se muestran de diferentes tamaños, envolver el enlace<a>dentro de la etiqueta<p>. - Asegurarse que el contenido en general tenga un
paddingde por lo menos 10px alrededor. - Verificar que todas las fuentes se muestren de manera correcta y ajustar los estilos de
<td>,<h>,<p>y<a>de ser necesario.
Todavía muchas empresas utilizan Lotus Notes, el cual representa un problema un poco más complicado, pues su soporte de CSS es aún más primitivo. Además de que dependiendo de la versión, muestra el HTML de una u otra forma. Para minimizar los problemas, se sugiere:
- Utilizar una tabla que contenga la disposición de todas las tablas, manteniéndolo todo junto.
- Mantener un espacio al interior de esta tabla utilizando cellpadding o dándole un porcentaje de ancho a las tablas internas.
- Como se mencionó anteriormente, evitar declaraciones de
<style>. - Evitar enlaces para saltos dentro del propio correo.
- No usar
colspanen las tablas de HTML. - Verificar que el ancho de cada una de las celdas
<td>sea definido, porque a diferencia de los navegadores, Notes no las ajusta automáticamente, sino de una en una. - Tomar en cuenta de que Notes alineará todo a la izquierda, siempre.
Para más información, se puede revisar una lista de elementos CSS soportados por algunos de los clientes de correo en móviles, escritorio y web más populares.
Paso 5: Crear código para smartphones y tabletas
En la actualidad la mayoría de usuarios revisan su correo electrónico en dispositivos móviles, afortunadamente sus clientes de correo relativamente modernos y con buen soporte CSS facilitan la adaptación de correos HTML. Una gran herramienta es utilizar @media para crear tablas específicas para estos dispositivos y los clientes web y de escritorio ignorarán su contenido de manera automática. Para más información sobre correos responsivos visita esta guía para consejos e ideas.
Conclusión
Muchas personas prefieren recibir correos HTML que de texto simple por varias razones. Pero para los desarrolladores es una tarea a la vez simple y compleja. Hemos tratado de disminuir algunos de los problemas a enfrentar en la creación de estos correos. Pero siempre surgirá algún problema y si debe de tomarse una decisión entre un diseño simple o una solución compleja, la simplicidad siempre será la apuesta más segura.
