Campañas de email en HTML: Que el código no te arruine las intenciones (Parte 1)
Son muchos nuestros clientes que siguiendo la buenas prácticas del email marketing, elaboran newsletter en HTML para enviarlos a sus contactos usando Fidelizador.
Puede que ya domines a la perfección el envío de campañas de correos, o tal vez, jamás te has percatado de que un mismo correo electrónico se ve distinto en Gmail, Hotmail, Outlook o Yahoo!. Por lo mismo, este artículo se divide en dos entregas; la primera con una visión general y que permite entender la naturaleza del correo electrónico con texto enriquecido, y la segunda, más técnica y que tiene relación con mejorar el código para que sea lo más compatible con la mayoría de los clientes de correo electrónico.
En un post anterior escribí sobre la evolución del correo electrónico, y mencioné brevemente lo que es HTML (Lenguaje de Marca de Hipertexto), que en el fondo es texto (igual que el de un libro o una revista) al que se le hace toda clase de “marcas” que indican cuándo un pedazo de texto es un título, cuándo una tabla y cuándo hay que agregar un enlace o una imagen.
Pero aunque el texto se «vista» de marcas, texto se queda, y sigue siendo algo sin ningún diseño o estilo. Lo que le pone colores, dimensiones, márgenes y bordes, se llama CSS (Hojas de Estilo en Cascada). ¿Y cómo funcionará esto entonces?
Es común que en los sitios de Internet, el HTML y el CSS se escriban en separado. Cuando uno visita http://www.example.org/index.html, el navegador de Internet va a buscar el archivo “index.html” y uno o más archivos terminados en “.css” especificados en el mismo “index.html”. Luego, el navegador interpreta lo que está en el HTML, busca los estilos de cada una de esas marcas, dibuja el estilo en la pantalla, revuelve y se lo sirve al usuario.
Pero el HTML fue creado específicamente para funcionar con HTTP (Protocolo de Transferencia de Hipertexto), que a grandes rasgos es un estándar creado para que podamos ver distintos sitios web. A pesar de que el HTML no sirve para escribir correos, a alguien se le ocurrió la genial idea de que podría hacer que un correo sea escrito en lenguaje HTML y visto por un “navegador web embutido” dentro de los distintos clientes de email.
Excelente idea, salvo porque tenemos varias limitaciones, y la más evidente (para los que hemos destripado los servidores de correo al menos), es que no podemos entregar un HTML y un conjunto de hojas de estilo en CSS en un mismo correo. Ahora, recordaremos que la inclusión de HTML para enviar correos fue una competencia entre empresas que ofrecían el servicio de correo más que un trabajo colaborativo entre ellas…
El resultado es que no existe una manera estándar de escribir correo en HTML que se vea igual en todos los clientes, y el objetivo que perseguimos al enviar un correo electrónico es que el mismo sea consistente entre todos los clientes. Para lograr un buen resultado, debemos diseñar nuestros correos usando las mismas técnicas que en 1995, entre ellas:
-
Tablas, que fueron hechas para datos tabulados, no para diagramar sitios completos.
-
Estilos en línea sobre las etiquetas, que se usaban porque pocos entendían bien cómo poner CSS en otros archivos hasta que se masificó Macromedia Dreamweaver entre 1997-99.
-
Estilos rígidos, porque los correos electrónicos no tienen la propiedad de los sitios web en que se reorganiza el contenido si uno cambia de resolución de pantalla.
Como si fuera poco, había que tomar algunas decisiones en particular: la pantalla más pequeña en la que Windows 95/98 y hasta 2000 era usable era de 640×480 (como referencia, en una vista FullHD tenemos 225% más de alto y 300% más de ancho de pantalla), por lo que si alguien quería asegurarse de que la otra persona no tuviera que mover las barras de scrolling mientras leía un email, debía enviarlo con un ancho máximo de 620 píxeles, estándar que hasta ahora se mantiene.
Con toda esta tremenda explicación a muchos nos da una tremenda flojera el diseñar un correo electrónico para ser enviado a través de una campaña de email… entonces… ¿Podemos simplemente utilizar un compositor de texto enriquecido, como si hiciéramos un documento en Office o iWork?. Pues… Es mala idea. Estos editores se llaman WYSIWYG (“What You See Is What You Get”, o “Lo que ves es lo que obtienes”), pero cuando se trata del correo electrónico, podrían llamarse algo así como WYSIPNWYG (“What You See Is Probably Not What You Get”, o “Lo que ves probablemente no es lo que obtienes”).
Todos estos editores tienen como referencia el uso de HTML orientado a la Web, por lo que está bien definir el diseño en uno de ellos, pero el resultado deberá retocarse con un editor de texto simple y las hojas de estilo deberán reescribirse para que estén “en línea” dentro del código HTML. Y a veces el resultado entre dos clientes de correo electrónico es tan distinto, que conviene publicar una versión del correo que pueda ser visible desde el correo electrónico.
Si usted, estimado lector, trabaja intensivamente con campañas de correo electrónico, es conveniente que configure distintas cuentas de correo (Gmail, Hotmail y Yahoo!, además de configurar varios clientes de correo de pruebas con su cuenta de Gmail), para que compare cómo se ve una campaña de correo en muchos lectores.
En la próxima entrega daremos a conocer algunos tips sobre mejorar la compatibilidad de lectores de correo electrónico.
Nos leemos!! 😀