Guía para un responsive perfecto en tus campañas de email marketing

Hoy vamos a ver cómo asegurar que el diseño de tu plantilla de newsletter sea 100% responsive con esta guía completa para crear campañas de email responsive.

En el editor de Acumbamail tienes varias herramientas que te van a ayudar a ajustar la adaptabilidad de tus diseños al máximo. También cuentas con la opción de visualizarlo en diferentes dispositivos, para detectar cualquier fallo que pueda afectar al responsive.

¿Qué es el diseño responsive? 

El diseño responsive asegura que los contenidos online se muestren de manera óptima en diferentes dispositivos, incluyendo smartphones, ordenadores y tablets. La idea es que el contenido y la estructura se adapten al tamaño de la pantalla y a las capacidades del dispositivo, sin necesidad de recurrir a diseños distintos para cada uno de ellos.

Esta metodología ha ganado relevancia recientemente debido al aumento de usuarios que navegan por Internet utilizando dispositivos distintos a los ordenadores tradicionales. Por ello, se ha vuelto más imperativo que nunca adaptar estos contenidos a las diferentes plataformas desde las cuales se accede.

Beneficios del diseño responsive

Entre las principales ventajas que ofrece el diseño responsive se encuentran:

– Mejor experiencia de usuario: Facilita el acceso y la navegación en la página, proporcionando una experiencia más agradable para los visitantes.

– Optimización del tiempo de carga: En lugar de tener múltiples archivos duplicados con diferentes dimensiones para cada dispositivo, un diseño responsive permite que el mismo archivo se adapte a diferentes tamaños de pantalla, eliminando redundancias que consumen recursos y ralentizan la carga.

– Potenciación del SEO: La adaptabilidad del sitio web a múltiples dispositivos es favorablemente reconocida por los principales motores de búsqueda, lo que mejora el posicionamiento en los resultados orgánicos.

– Eficacia en SEM: Las campañas de Marketing en Motores de Búsqueda (SEM), especialmente en redes sociales, obtendrán un rendimiento mejorado al mostrar contenido adaptado a cada dispositivo, aumentando así las oportunidades de generar clientes potenciales.

–Facilita la gestión: Al tener un único diseño que se adapta a todos los dispositivos, la actualización y mantenimiento del sitio se simplifica.

Desventajas del diseño responsive

No obstante, también plantea algunos retos:

– Coste de desarrollo elevado: Implementar un diseño responsive requiere más tiempo y esfuerzo, lo que podría incrementar los costes.

– Complejidad en la administración: Aunque un único diseño puede simplificar la gestión, también puede complicarla en casos donde ciertos elementos no se adapten bien a todas las pantallas.

– Rendimiento en dispositivos antiguos: Los dispositivos más antiguos pueden tener problemas para cargar o visualizar correctamente sitios con diseño responsive debido a sus limitaciones de hardware o software.

Pese a estos desafíos, las ventajas superan, tanto cualitativamente como cuantitativamente, las desventajas. Por lo tanto, optar por un diseño responsive debería ser una prioridad, ya sea para un sitio web o para una newsletter.

Factores a tener en cuenta para una buena adaptabilidad

Nuestra recomendación es que primero finalices el diseño y luego pases a adaptarlo. Esta opción es mucho mejor que intentar ir haciendo la adaptabilidad a la par que el propio diseño. Te va a costar menos esfuerzo y tiempo primero terminar el diseño y después asegurar la adaptabilidad.

Esto no quiere decir que te olvides por completo del responsive. Diseña teniendo en mente que tus receptores puedan visualizar el correo desde un dispositivo móvil:

– Botones y enlaces táctiles: Asegúrate de que los botones y enlaces sean lo suficientemente grandes para facilitar su uso en dispositivos táctiles.

– Priorización del contenido: Decide qué información es más importante y colócala de manera prominente. En dispositivos móviles, el espacio es limitado.

– CTA (Llamadas a la acción): Coloca los botones o enlaces de llamada a la acción de manera estratégica y asegúrate de que sean fácilmente visibles y clicables.

– Minimalismo: Limita el uso de multimedia como vídeos o animaciones, y no uses estructuras complejas, ya que pueden no mostrarse correctamente. Cuanto más complejo el diseño, peor va a ser la adaptabilidad, y tendrás que hacer un diseño diferente para que la versión móvil sea funcional.

– Código: Si vas a inyectar HTML propio en tu plantilla que sea lo más limpio y sencillo posible para asegurar la compatibilidad con diversos clientes de correo electrónico.

– Vistas previas y pruebas: Utiliza herramientas y emuladores para probar cómo se verá y funcionará tu diseño en diferentes dispositivos y navegadores.

Cómo asegurar que tu campaña de Acumbamail sea responsive

En el editor de plantillas de Acumbamail tenemos varias opciones que nos facilitan el poder hacer una buena adaptabilidad de la plantilla.

Configuración especifica de móvil

El primer paso que podemos dar es configurar las propiedades específicas de móvil de los contenidos.

Dependiendo del contenido encontrarás más opciones o menos, una que siempre estará disponible es la de relleno. En otros podrás también editar independientemente el tamaño de la fuente, alineación y ancho.

Para poder acceder a esta configuración primero debes activar la vista móvil, haciendo clic sobre el botón del móvil en la parte superior izquierda.

Cuando lo hagas verás una previsualización de la plantilla para móvil. Ahora solo debes hacer clic en el contenido que quieras editar.

Dentro de las propiedades podrás ver una etiqueta con la palabra “móvil” al lado de alguna de las opciones.

Esto significa que al editar esta propiedad lo estarás haciendo exclusivamente en la versión móvil, y no afectará a la versión de escritorio. 

Por ejemplo si en un “Título” quiero que el tamaño de la fuente sea menor en la versión móvil que en la de escritorio, puedo ir a la vista en móvil y editar este campo en las propiedades para ajustarlo al tamaño que quiero, mientras tanto en la versión de escritorio se mantendrá el tamaño de la fuente original.

Si no ves la etiqueta “Móvil” al lado del campo entonces los cambios que hagamos SÍ se aplicarán a la versión de escritorio.

Duplicar contenido

Si con estas opciones no llegamos a un buen resultado, no nos queda más remedio que duplicar el contenido que esté causando problemas y configurar cada uno de manera que se visualice correctamente en cada dispositivo.

Para hacer esto hay que usar la opción “ocultar en”, que encontraremos al final de todas las propiedades de contenidos.

Como hemos dicho duplicamos el contenido, ahora tenemos 2 contenidos exactamente iguales. En uno de ellos activamos la opción ocultar en escritorio y en el otro la de ocultar en móvil.

Ahora procedemos a hacer los cambios necesarios en cada uno de los contenidos, no te olvides de utilizar las vistas de escritorio y móvil.

Al ocultar elementos aparecerá la opción de “Visibilidad”, un botón con un ojo al lado de los botones de vista de escritorio y móvil.

Si el botón tiene el icono del ojo y fondo morado entonces la Visibilidad está activada. Si por el contrario el icono del ojo está tachado y tiene fondo blanco está desactivada.

¿Qué significa que la visibilidad esté activada o desactivada? Cuando la visibilidad está desactivada solo veremos los contenidos que se ven en versión que estemos viendo (escritorio o móvil). Por ejemplo, en el caso de que hayamos ocultado una imagen en la versión móvil, si vamos a la vista previa de móvil y tenemos la Visibilidad desactivada no veremos esa imagen por ningún lado. Pero si activamos la Visibilidad podremos ver la imagen que hemos ocultado.

Por lo tanto, si tienes la visibilidad activada podrás ver los contenidos duplicados en tu plantilla. Para evitar confusiones, los contenidos que estén ocultos aparecerán difuminados y con menos opacidad, así podrás distinguirlos fácilmente.

Teniendo la visibilidad activada, también podrás distinguir en qué dispositivo está oculto el contenido al pasar el cursor sobre él. Aparecerá un pequeño icono del dispositivo (móvil o escritorio) tachado en la parte suprior.

Nuestra recomendación es que mientras estés adaptando tu diseño mantengas la visibilidad activada y la desactives para ver cómo va a quedar el resultado final.

Esta opción de ocultar en escritorio o móvil también está disponible en las propiedades de las filas, por lo que podrás ocultar filas enteras.

Configuraciones responsive en filas

Y hablando de filas, hay un par de opciones responsive especiales en la configuración de filas:

No apilar (columnas) en móvil

Si ya has usado el editor de Acumbamail (y si no te lo cuento), sabrás que la estructura básica de la plantilla son las filas. Dentro de éstas tenemos las columnas. El número de columnas por fila varía desde 1 hasta 6. Además puedes variar el espacio que ocupa cada columna dentro de la fila, haciendo que unas ocupen más espacio que otras.

El número de columnas va a tener un impacto directo en la adaptabilidad de tu diseño, básicamente cuantas más columnas tenga la fila peor. Por eso mismo las columnas se apilan de manera automática en la versión móvil.

¿Que qué es eso de que se apilan? Muy fácil, que en vez de aparecer en una línea horizontal, aparecen en línea vertical, una detrás de otra.

Presta atención al siguiente ejemplo:

¿Cuál de las dos opciones te parece que ofrece una mejor experiencia de usuario?

Si no lo sabes ya te lo digo yo, la segunda.

Invertir el orden (de las columnas) en móvil

Otra opción relacionada con las columnas, pero esta vez con su orden. El orden en el que aparecen las columnas es: primero la columna 1 (la de la izquierda) y después el resto en secuencia.

Pero este orden a veces no es el ideal, sobre todo al hacer diseños combinando filas y jugando con qué contenido ponemos en cada una. Para que sea más sencillo te lo voy a explicar con ejemplos en imágenes.

En este diseño tenemos 2 filas, cada una con dos columnas, mostrando diferentes productos. Para hacer el diseño un poco más interesante hemos cambiado la posición de las imágenes principales. En la primera fila la imagen está en la columna de la izquierda (columna nº1) y en la segunda fila la imagen está en la columna de la derecha (columna nº2). 

En la versión escritorio no vamos a tener problemas. Pero el orden en el que se verán las columnas al apilarse en la versión móvil no es el mejor, ya que se vería así:

Si queremos que primero salgan las imágenes principales y después la información y el botón que nos lleve a la página de producto deberemos invertir el orden de las columnas de la segunda fila en la versión móvil. Al activar esta opción nos ahorramos el tener que duplicar la fila e invertir el orden de las columnas en la versión móvil. Con la opción activada este es el resultado:

Como ves, el orden tiene mucho más sentido así 

Probar en dispositivos

Cuando envías una campaña de email marketing, tus suscriptores pueden abrir los correos electrónicos desde una gran variedad de dispositivos y clientes de correo. El hecho de enviarte una prueba a una dirección tuya no significa que la visualización vaya a ser igualmente adecuada para todos los usuarios.

Dependiendo del dispositivo (desktop, tablet, mobile) y de la peculiaridad de cada uno de ellos (tamaño de pantalla, resolución, etc.), la visualización puede ser diferente. 

Lo mismo pasa con los diferentes clientes de correo: Gmail, Hotmail, Outlook… Existe una gran variedad, y cada uno interpreta el código de los emails de manera diferente. Debido a esto, puede ser que un correo que se vea correctamente en uno, se encuentre con algún problema en otro. Y esto sin tener en cuenta las diferentes versiones que existen de cada uno de ellos, debido a actualizaciones de software.

Por ello desde Acumbamail tenemos disponible una herrmienta de pago (con lo que te costará la prueba, se le paga un café a la diseñadora, lo cual permite que pueda seguir escribiendo artículos tan útiles como este) que te perimite probar tu diseño y así visualizar tu campaña en la mayoría de dispositivos y navegadores del mercado.

En el paso 4 (Diseño) y el paso 5 (Envío) de tu campaña, podrás enviar una prueba que se abrirá en los diferentes dispositivos y clientes.

Se realizará una captura de pantalla en cada uno de ellos. Podrás comprobar que tus suscriptores verán tus correos de manera correcta, o solventar cualquier posible error antes de enviar la campaña.

En esta previsualización se incluye una gran variedad de clientes de correo:  Gmail, AOL, Yahoo, Outlook, Apple Mail, Mail.ru u Orange.

Así mismo, cada cliente es probado en muchos dispositivos como iPhone, Nexus o Google Píxel. También, en diferentes navegadores como Chrome, Firefox o Safari.

Últimos tips para un diseño de email responsive

Para acabar te voy a dar unos últimos consejos que permitirán ir perfeccionando el diseño de tus campañas para que éstas sean más efectivas:

• Haz pruebas de test A/B: Realiza pruebas A/B para entender qué diseño o contenido funciona mejor con tu audiencia.
• Analiza las estadísticas de tus envíos: Utiliza métricas como tasas de apertura, clics y conversiones para medir el éxito de la newsletter y hacer mejoras.
• Usa encuestas para obtener feedback: Invita a los usuarios a dar su opinión sobre la newsletter para obtener información valiosa sobre qué se puede mejorar.
• Actualiza y cambia tu diseño de vez en cuando: Mantén tu diseño y contenido actualizados para seguir siendo relevante para tu audiencia. No mandes siempre el mismo diseño, porque tus suscriptores se aburrirán y dejarán de abrir tus correos. Esto no significa que cambies tu diseño radicalmente cada poco tiempo. Que haya elementos en común (logo, colores, estilo de imágenes, ilustraciones e iconos…) en tus correos hará que tengas una identidad propia.

Con toda esta información deberías ser capaz de crear campañas de email totalmente responsive en nuestra plataforma de Acumbamail.