Tips para diseñar tu email en ActiveCampaign

Antes de que te pongas a pensar en formas imposibles, colores poco contrastados y tamaños ilegibles para aplicar en el diseño de tu próximo correo en ActiveCampaign, debes saber una serie de limitaciones y consideraciones a tener en cuenta.

De la misma manera que a la hora de diseñar una web no todo vale, lo mismo sucede con los correos.

Debes tener en cuenta ya no sólo que sea legible, sino que el código que quieres aplicar sea correctamente interpretado por la gran mayoría de gestores de correo. Por desgracia, esto significa la mayor parte de las veces que no podrás emplear el código avanzado de HTML y CSS que conoces a día de hoy, sino que tendrás que volver a prácticas anteriores y te parecerá revivir el diseño de los años 2000…

Cómo debe ser el esqueleto de un correo de ActiveCampaign

• Ancho igual o menor a 650px: esto te garantizará que la mayor parte de los clientes de correo muestren correctamente tu mensaje.
• Menos es más: los esqueletos más simples suelen funcionar mejor. Cuanto más compliques tu diseño, mayor tiempo tendrás que dedicar a la parte de comprobación-prueba-error.
• Utiliza tablas HTML: sí amigos, nada de utilizar flexbox ni css grid. Regreso al pasado y al uso de tablas para situar el contenido en el espacio en blanco.
• Cuidado con el espacio interior de las celdas: Outlook tomará como referencia el espacio interior de cualquier celda y se lo aplicará a todas las demás de la misma fila, algo que puede desencadenar en un efecto visual desagradable. Tendrás que ver que todas las celdas tengan exactamente el mismo espacio interior, y en caso de que quieras añadirle más espacio a una celda en concreto, poner en su interior un div o una tabla.
• No utilices colspans=””: algunos gestores de clientes simplemente no los soportan.

Qué CSS no debes aplicar en un correo de ActiveCampaign

• Clases CSS: algunos gestores de correo no las soportan. En su lugar tendrás que utilizar CSS en línea (inline). Sí, horrible, pero…
• Defínelo todo: nada de jugar con agrupaciones del tipo style=”border: 1px solid #000″, sino que tendrás que especificar al máximo tipo style=”border-size:1px; border-style:solid; border-color:#000;”.
• Nada de float ni position: lo de alinear elementos tendrás que hacerlo mediante el uso de tablas.
• Nada de hojas de estilo externas: no funcionarán en la mayoría de gestores de correo. Tu CSS debe de estar puesto todo inline dentro del HTML.

Cómo añadir imágenes y vídeo en un correo de ActiveCampaign

• Utiliza rutas absolutas: no introduzcas el código tipo <img src=”imagen.jpg”> sino indicando toda su URL <img src=”https://tuweb.com/imagen.jpg”>.
• Utiliza siempre etiquetas alt: algunos gestores de correo desactivan las imágenes por defecto, por lo que únicamente si has establecido algún valor para la etiqueta alt sabrán que ahí debe de haber un gráfico. Ejemplo: <img src=”https://tuweb.com/imagen.jpeg” alt=”Esto es una imagen”>.
• No insertes vídeos ni Flash: no es una buena idea embeber directamente vídeos o flash en tu correo por dos motivos. El primero, que muchos gestores de correo no los soportan. El segundo y no menos importante, que correrás el riesgo de que los sistemas de detección de virus y spam lo califiquen como malicioso. En vez de eso, algo útil es introducir una captura de pantalla del propio vídeo con un enlace hacia la web donde puedan reproducirlo.
• Los gifs animados no son soportados por todos: como es el caso de Outlook 2007. Los gestores que no soporten los gifs, únicamente mostrarán el primer frame.
• Cuidado con las imágenes que se solapan: el concepto figura/fondo está muy bien y es muy vistoso, pero aquí puede darte más problemas que otra cosa. Si quieres evitar problemas, no las utilices como fondo.
• Olvídate del truco de la imagen transparente de 1px: algunas personas hacían esto (añadir una imagen transparente cuadrada de 1px en todos su lados, o 2px) para equilibrar su diseño. Lamento decirte que algunos gestores de correo e incluso filtros antispam penalizan esta práctica.
• Comprueba cómo se ve tu email sin imágenes: ten en cuenta que algunos gestores deshabilitan las imágenes por defecto, por lo que la primera impresión que se llevará tu lector la tendrá sin imágenes. Por eso es importante que el contenido y el email en general se vea bien sin ellas.
• Revisa el tamaño de tus archivos: si quieres que no tarde mucho en abrirse, controla que todos los archivos que lo compongan (como las fotografías) sean lo más pequeñas y optimizadas posible.

Qué pasa con los fondos en los correos de ActiveCampaign

• Imágenes no: tal y como ya hemos comentado en el apartado anterior, no es una buena idea situar una imagen de fondo.
• Rellenar todo el fondo del cuerpo de un color: algunos clientes de email como Gmail no muestran el color de fondo. En lugar de aplicar el color a la etiqueta body, aplícasela a un div.

Otras cosas a tener en cuenta

• Nada encima de la etiqueta <body>: todo lo que pongas antes de esa etiqueta desaparecerá.
• No metas javascript: recuerda, tienes que diseñar como si estuvieras en el año 2000 o antes…
• Evita utilizar Microsoft Office para definir tu correo: cuando copias el contenido y lo pegas en otro lugar, suele llevar asociado cierto código que lo formatea y que podría darte problemas de diseño a posteriori. Mejor que escribas directamente en ActiveCampaign.

Como ves, el diseño de correos (ya no sólo para ActiveCampaign sino para cualquier proveedor) está muy limitado en cuanto a posibilidades debido a los gestores. Diseñar la plantilla o esquema de un correo no es una tarea sencilla y precisamente por este motivo tanto Active Campaign como otras herramientas suelen ofrecernos plantillas predeterminadas, de manera que podamos evitar estos quebraderos de cabeza.

Por último decirte que NO es necesario contar con un diseño de correos propio y exclusivo para empezar. Y que realizar este esfuerzo (bien por tu cuenta, bien contratando a un diseñador que lo haga por ti) puede ser una tarea interesante cuando tu proyecto sea lo suficientemente grande y tu marca tenga recorrido. Hasta entonces, tu foco debería de estar en otra parte 😉

(1 votos, promedio: 5,00 de 5)