Uno de los primeros problemas que nos encontramos cuando nos adentramos en el mundo de la maquetación de emails, sobre todo los perfiles que venimos de maquetación web, es que tendemos a pensar que los servidores de correo en los que se despliegan los emails funcionan de la misma manera que las webs que creamos, y siento decepcionaros, pero esto no tiene nada que ver con la realidad.
En los servidores de correo nos seguimos encontrando con el lenguaje XHTML, más conocido como maquetación en tablas. Es una mirada un poco hacia atrás, para los más nuevos, la maquetación basada en lenguajes de marcación fue el inicio de las páginas web, pero esto nos da pie a otra historia mucho más espesa y que requeriría de un par de posts más. Así que, de momento, quedémonos con que es imprescindible conocer el XHTML, porque es mucho más restrictivo que el HTML que estamos acostumbrados a ver y va a marcar la versatilidad de nuestros emails.
Una vez que conocemos el lenguaje con el que vamos a trabajar y antes de adentrarnos en las recomendaciones, es importante hablar de los servidores de correo. Cuando hablamos de maquetación en web podemos imaginar muchos navegadores que van a poder interpretar nuestra maquetación, pero quizás podríamos numerarlos con los dedos de las manos, al menos los más conocidos. Pero cuando hablamos de servidores de correo, las manos ya no nos van a bastar, dado que no solo hay diferentes servidores de correo, sino que hay diferentes versiones en las que utilizar dichos servidores de correo, contamos con Gmail, Gmail app, Outlook online, Outlook app, Outlook escritorio, AppleMail app, AppleMail online, AppleMail escritorio, etc. y, para entendernos, esto es como si abriéramos nuestro mail en una aplicación diferente en cada uno de ellos. Por lo que, si aún no habéis visto uno de los grandes retos que propone la maquetación de emails, os lo digo yo, nuestro email tiene que ser muy versátil.
Como os comentaba, esto es un reto bastante grande, ya que los servidores de correo no permiten la maquetación líquida, ya que la gran mayoría de ellos, digamos, no son muy amigos de las “media queries”, ni tampoco muy amigos de muchos de los estilos que solemos utilizar en CSS. Esto es un tema muy amplio, muy difícil de abordar en un solo post, pero si tenéis curiosidad sobre que estilos entienden y cuales no los servidores de correo, esta web es muy útil. Es importante conocer que cada servidor de correo tiene su propia CSS que aplica a todos los emails que dispone para darle un mínimo de estilos, por esto es muy recomendable que todos los estilos que le añadamos a nuestro email estén puestos en línea, para hacerlos más prioritarios que la CSS del propio servidor.
Ahora que ya tenemos algo más de contexto sobre los emails y los servidores de correo, vamos con las 5 recomendaciones que yo le daría a quien desee iniciarse en la maquetación de emails:
- La primera, y para mi la más importante, maquetación reutilizable. Si nos fijamos en la estructura que propone el lenguaje XHTML, veremos que sigue siempre la misma, “<table><tbody><tr><td></td></tr></tbody><table>” esto marca lo que yo llamo un bloque dentro del email, utilizar este esqueleto para marcar cada bloque dentro de un email va a hacer nuestro código reutilizable. Es muy común que nos encontremos con la necesidad de utilizar el mismo bloque en diferentes emails, maquetar siguiendo una estructura de bloques nos va a facilitar mucho el trabajo, ya que contamos con la maquetación definida y solo tenemos que cambiar el contenido. También nos va a permitir detectar errores de maquetación de manera más rápida, ya que podemos ir borrando bloques hasta que demos con el que está causando los problemas.
- Entender las limitaciones de los servidores de correo, muchas veces nos vamos a encontrar con que las exigencias del diseño de un correo son demasiado ambiciosas para los servidores de correo. Tenemos que entender que los servidores de correo tienen muchas capas de seguridad que no permiten que el contenido que muestran sea tan versátil como una página web. Es por todos sabido que son los principales agujeros de seguridad son los correos que recibimos, que pueden venir envueltos en malware de todo tipo, es por esto que los servidores de correo utilizan un lenguaje como XHTML y que no permiten elementos más allá de los básicos, imágenes (jpg y gifs) y texto. Si añadimos cualquier otro tipo de elemento o adjuntos más contenido a nuestro email, es muy probable que este termine entrando en la bandeja de spam al ser reconocido como un mail malicioso.
- Correlacionada con lo anterior, evitar las tipografías que no son de sistema, cómo os comentaba, las exigencias del diseño os van a llevar casi al 100% a encontraros con este problema, las marcas suelen querer su guía de estilos en todo su contenido (es lógico) pero en los servidores de correo esto no es tan sencillo. Muchos de ellos no interpretan el estilo de CSS que define las tipografías, por lo que no van a saber incluir la tipografía que tenemos alojada en nuestro propio servidor por lo que le acabará añadiendo la tipografía que tenga definida por sistema y nuestro email puede perder completamente el diseño que nosotros habíamos propuesto con la maquetación. Este punto es muy importante, lo más recomendable es maquetar con una tipografía de sistema o si no una de Google, que son las más reconocibles en la mayoría de los servidores de correo online, de esta manera nos vamos a asegurar de que el diseño se mantiene en cualquiera de los servidores de correo de los clientes. Esto también encuentra su lógica en lo que comentábamos en el punto anterior de la seguridad, las peticiones externas a contenido de un servidor propio, como las tipografías especiales, pueden abrir agujeros de seguridad. Esto no quiere decir que no se puedan usar, se pueden, algunos servidores de correo las interpretarán (los más utilizados no las interpretan) pero no son la mayoría.
- Optimización y alojamiento de imágenes, otro punto muy importante. Es necesario que las imágenes se encuentren alojadas en un servidor propio, bajo ningún concepto deberíamos incluir las imágenes como adjuntos de un correo, eso es un pase directo a la carpeta de spam. Y a parte de tener las imágenes alojadas en un servidor, esas imágenes tienen que estar optimizadas, para pesar lo mínimo posible. El peso de un email es muy importante, cuanto menos pese nuestro email, más posibilidades de entrar en la bandeja principal y más rápido va a ser la descarga de este en el servidor del usuario.
- Probar, probar y volver a probar. Es muy probable que la maquetación del email se haga previsualizando este en un navegador, como Chrome, para poder inspeccionar. Es algo que todos los maquetadores hacen, es lo común. Pero es muy importante que una vez tengamos finalizada la maquetación probemos en todos los servidores de correo como nos sea posible. Ya sea enviándonos el email a diferentes correos de diferentes servidores o utilizando herramientas de email marketing, que nos permitan obtener capturas de previsualizaciones en diferentes servidores con un solo clic, como este ejemplo que os dejo de Exponea, una plataforma de email marketing que utilizamos actualmente en Merkle:
Y con esto finalizo los 5 consejos o recomendaciones que a mi me hubiera gustado que me dieran cuando me inicié en la maquetación de emails. Esto es una pequeña pincelada por encima, es un mundo muy amplio y con muchas vertientes por explorar.
Como opinión personal, pienso que es un campo que va a crecer mucho en los próximos años con la creciente digitalización que están experimentando las tiendas post-covid, y es un ámbito en el que todavía quedan muchas mejoras por desarrollar.
Espero que os haya resultado interesante y de ayuda este post, nos vemos en futuras publicaciones.
¡Un saludo!
*Fuentes bibliográficas:
Autor :
Publicado en : Junio 28, 2022
Post por temática
