{"id":26361,"date":"2023-09-21T13:56:11","date_gmt":"2023-09-21T11:56:11","guid":{"rendered":"https:\/\/acumbamail.com\/blog\/?p=26361"},"modified":"2023-09-21T13:56:12","modified_gmt":"2023-09-21T11:56:12","slug":"diseno-responsive-email-marketing","status":"publish","type":"post","link":"https:\/\/acumbamail.com\/blog\/diseno-responsive-email-marketing\/","title":{"rendered":"Gu\u00eda para un responsive perfecto en tus campa\u00f1as de email marketing"},"content":{"rendered":"\n

Hoy vamos a ver c\u00f3mo asegurar<\/strong> que el dise\u00f1o de tu plantilla<\/strong> de newsletter sea 100% responsive<\/strong> con esta gu\u00eda completa para crear campa\u00f1as de email responsive.<\/p>\n\n\n\n

En el editor de Acumbamail tienes varias herramientas<\/strong> que te van a ayudar a ajustar la adaptabilidad de tus dise\u00f1os al m\u00e1ximo. Tambi\u00e9n cuentas con la opci\u00f3n de visualizarlo en diferentes dispositivos<\/strong>, para detectar cualquier fallo que pueda afectar al responsive.<\/p>\n\n\n\n\n\n

\u00bfQu\u00e9 es el dise\u00f1o responsive?\u00a0<\/strong><\/h2>\n\n\n\n

El dise\u00f1o responsive asegura que los contenidos online se muestren de manera \u00f3ptima en diferentes dispositivos<\/strong>, incluyendo smartphones<\/strong>, ordenadores<\/strong> y tablets<\/strong>. La idea es que el contenido y la estructura se adapten<\/strong> al tama\u00f1o<\/strong> de la pantalla y a las capacidades<\/strong> del dispositivo, sin necesidad de recurrir a dise\u00f1os distintos para cada uno de ellos.<\/p>\n\n\n\n

Esta metodolog\u00eda ha ganado relevancia recientemente debido al aumento de usuarios que navegan por Internet utilizando dispositivos distintos a los ordenadores tradicionales<\/strong>. Por ello, se ha vuelto m\u00e1s imperativo que nunca adaptar<\/strong> estos contenidos a las diferentes plataformas desde las cuales se accede.<\/p>\n\n\n\n

Beneficios del dise\u00f1o responsiv<\/strong>e<\/h2>\n\n\n\n

Entre las principales ventajas que ofrece el dise\u00f1o responsive se encuentran:<\/p>\n\n\n\n

– Mejor experiencia de usuario<\/strong>: Facilita el acceso y la navegaci\u00f3n en la p\u00e1gina, proporcionando una experiencia m\u00e1s agradable para los visitantes.<\/p>\n\n\n\n

– Optimizaci\u00f3n del tiempo de carga:<\/strong> En lugar de tener m\u00faltiples archivos duplicados con diferentes dimensiones para cada dispositivo, un dise\u00f1o responsive permite que el mismo archivo se adapte a diferentes tama\u00f1os de pantalla, eliminando redundancias que consumen recursos y ralentizan la carga.<\/p>\n\n\n\n

– Potenciaci\u00f3n del SEO:<\/strong> La adaptabilidad del sitio web a m\u00faltiples dispositivos es favorablemente reconocida por los principales motores de b\u00fasqueda, lo que mejora el posicionamiento en los resultados org\u00e1nicos.<\/p>\n\n\n\n

– Eficacia en SEM:<\/strong> Las campa\u00f1as de Marketing en Motores de B\u00fasqueda (SEM), especialmente en redes sociales, obtendr\u00e1n un rendimiento mejorado al mostrar contenido adaptado a cada dispositivo, aumentando as\u00ed las oportunidades de generar clientes potenciales.<\/p>\n\n\n\n

–Facilita la gesti\u00f3n:<\/strong> Al tener un \u00fanico dise\u00f1o que se adapta a todos los dispositivos, la actualizaci\u00f3n y mantenimiento del sitio se simplifica.<\/p>\n\n\n\n

Desventajas del dise\u00f1o responsiv<\/strong>e<\/h2>\n\n\n\n

No obstante, tambi\u00e9n plantea algunos retos:<\/p>\n\n\n\n

– Coste de desarrollo elevado:<\/strong> Implementar un dise\u00f1o responsive requiere m\u00e1s tiempo y esfuerzo, lo que podr\u00eda incrementar los costes.<\/p>\n\n\n\n

– Complejidad en la administraci\u00f3n: <\/strong>Aunque un \u00fanico dise\u00f1o puede simplificar la gesti\u00f3n, tambi\u00e9n puede complicarla en casos donde ciertos elementos no se adapten bien a todas las pantallas.<\/p>\n\n\n\n

– Rendimiento en dispositivos antiguos:<\/strong> Los dispositivos m\u00e1s antiguos pueden tener problemas para cargar o visualizar correctamente sitios con dise\u00f1o responsive debido a sus limitaciones de hardware o software.<\/p>\n\n\n\n

Pese a estos desaf\u00edos, las ventajas superan<\/strong>, tanto cualitativamente como cuantitativamente, las desventajas<\/strong>. Por lo tanto, optar por un dise\u00f1o responsive deber\u00eda ser una prioridad<\/strong>, ya sea para un sitio web o para una newsletter.<\/p>\n\n\n\n

Factores a tener en cuenta para una buena adaptabilidad<\/strong><\/h2>\n\n\n\n

Nuestra recomendaci\u00f3n es que primero finalices el dise\u00f1o<\/strong> y luego pases a adaptarlo. Esta opci\u00f3n es mucho mejor que intentar ir haciendo la adaptabilidad a la par que el propio dise\u00f1o. Te va a costar menos esfuerzo y tiempo<\/strong> primero terminar el dise\u00f1o y despu\u00e9s asegurar la adaptabilidad.<\/p>\n\n\n\n

Esto no<\/strong> quiere decir que te olvides por completo del responsive<\/strong>. Dise\u00f1a teniendo en mente que tus receptores puedan visualizar el correo desde un dispositivo m\u00f3vil:<\/p>\n\n\n\n

– Botones y enlaces t\u00e1ctiles:<\/strong> Aseg\u00farate de que los botones y enlaces sean lo suficientemente grandes para facilitar su uso en dispositivos t\u00e1ctiles.<\/p>\n\n\n\n

– Priorizaci\u00f3n del contenido:<\/strong> Decide qu\u00e9 informaci\u00f3n es m\u00e1s importante y col\u00f3cala de manera prominente. En dispositivos m\u00f3viles, el espacio es limitado.<\/p>\n\n\n\n

– CTA<\/a> (Llamadas a la acci\u00f3n):<\/strong> Coloca los botones o enlaces de llamada a la acci\u00f3n de manera estrat\u00e9gica y aseg\u00farate de que sean f\u00e1cilmente visibles y clicables.<\/p>\n\n\n\n

– Minimalismo<\/strong>: Limita el uso de multimedia como v\u00eddeos o animaciones, y no uses estructuras complejas, ya que pueden no mostrarse correctamente. Cuanto m\u00e1s complejo el dise\u00f1o, peor va a ser la adaptabilidad<\/strong>, y tendr\u00e1s que hacer un dise\u00f1o diferente para que la versi\u00f3n m\u00f3vil sea funcional.<\/p>\n\n\n\n

– C\u00f3digo:<\/strong> Si vas a inyectar HTML propio en tu plantilla que sea lo m\u00e1s limpio y sencillo posible para asegurar la compatibilidad con diversos clientes de correo electr\u00f3nico.<\/p>\n\n\n\n

– Vistas previas y pruebas: <\/strong>Utiliza herramientas y emuladores para probar c\u00f3mo se ver\u00e1 y funcionar\u00e1 tu dise\u00f1o en diferentes dispositivos y navegadores.<\/p>\n\n\n\n

C\u00f3mo asegurar que tu campa\u00f1a de Acumbamail sea responsive<\/strong><\/h2>\n\n\n\n

En el editor de plantillas de Acumbamail <\/strong>tenemos varias opciones que nos facilitan el poder hacer una buena adaptabilidad <\/strong>de la plantilla.<\/p>\n\n\n\n

Configuraci\u00f3n especifica de m\u00f3vil<\/h3>\n\n\n\n

El primer paso que podemos dar es configurar las propiedades espec\u00edficas de m\u00f3vil <\/strong>de los contenidos.<\/p>\n\n\n\n

Dependiendo del contenido encontrar\u00e1s m\u00e1s opciones o menos, una que siempre estar\u00e1 disponible es la de relleno<\/strong>. En otros podr\u00e1s tambi\u00e9n editar independientemente el tama\u00f1o de la fuente, alineaci\u00f3n y ancho.<\/strong><\/p>\n\n\n\n

Para poder acceder a esta configuraci\u00f3n primero debes activar la vista m\u00f3vil<\/strong>, haciendo clic sobre el bot\u00f3n del m\u00f3vil en la parte superior izquierda<\/strong>.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Cuando lo hagas ver\u00e1s una previsualizaci\u00f3n de la plantilla para m\u00f3vil. Ahora solo debes hacer clic en el contenido que quieras editar. <\/p>\n\n\n

\n
\"dise\u00f1o<\/figure>\n<\/div>\n\n\n

Dentro de las propiedades podr\u00e1s ver una etiqueta con la palabra \u201cm\u00f3vil<\/strong>\u201d al lado de alguna de las opciones. <\/p>\n\n\n

\n
\"\"
La etiqueta “M\u00f3vil” nos indica que los cambios que hagamos se aplicar\u00e1n solo en la versi\u00f3n m\u00f3vil del dise\u00f1o<\/figcaption><\/figure>\n<\/div>\n\n\n

Esto significa que al editar esta propiedad lo estar\u00e1s haciendo exclusivamente en la versi\u00f3n m\u00f3vil<\/strong>, y no afectar\u00e1 a la versi\u00f3n de escritorio<\/strong>. <\/p>\n\n\n\n

Por ejemplo si en un \u201cT\u00edtulo\u201d quiero que el tama\u00f1o de la fuente sea menor en la versi\u00f3n m\u00f3vil que en la de escritorio, puedo ir a la vista en m\u00f3vil y editar este campo en las propiedades para ajustarlo al tama\u00f1o que quiero, mientras tanto en la versi\u00f3n de escritorio se mantendr\u00e1 el tama\u00f1o de la fuente original<\/strong>.<\/p>\n\n\n\n

Si no ves la etiqueta \u201cM\u00f3vil\u201d <\/strong>al lado del campo entonces los cambios que hagamos S\u00cd se aplicar\u00e1n a la versi\u00f3n de escritorio.<\/strong><\/p>\n\n\n

\n
\"\"
Como no vemos la etiqueta de “M\u00f3vil” al cambiar el color del texto tambi\u00e9n se cambiar\u00e1 en la versi\u00f3n de escritorio<\/figcaption><\/figure>\n<\/div>\n\n\n

Duplicar contenido<\/h3>\n\n\n\n

Si con estas opciones no llegamos a un buen resultado, no nos queda m\u00e1s remedio que duplicar<\/strong> el contenido que est\u00e9 causando problemas y configurar cada uno de manera que se visualice correctamente en cada dispositivo.<\/p>\n\n\n\n

Para hacer esto hay que usar la opci\u00f3n \u201cocultar en<\/strong>\u201d, que encontraremos al final de todas las propiedades de contenidos.<\/strong><\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Como hemos dicho duplicamos<\/strong> el contenido, ahora tenemos 2 contenidos exactamente iguales<\/strong>. En uno de ellos activamos la opci\u00f3n ocultar en escritorio <\/strong>y en el otro la de ocultar en m\u00f3vil.<\/strong> <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

Ahora procedemos a hacer los cambios<\/strong> necesarios en cada uno de los contenidos, no te olvides de utilizar las vistas de escritorio y m\u00f3vil<\/strong>.<\/p>\n\n\n\n

Al ocultar elementos aparecer\u00e1 la opci\u00f3n de \u201cVisibilidad<\/strong>\u201d, un bot\u00f3n con un ojo al lado<\/strong> de los botones de vista de escritorio y m\u00f3vil.<\/strong><\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

Si el bot\u00f3n tiene el icono del ojo y fondo morado <\/strong>entonces la Visibilidad<\/strong> est\u00e1 activada<\/strong>. Si por el contrario el icono del ojo est\u00e1 tachado y tiene fondo blanco<\/strong> est\u00e1 desactivada<\/strong>. <\/p>\n\n\n\n

\u00bfQu\u00e9 significa que la visibilidad est\u00e9 activada o desactivada? Cuando la visibilidad<\/strong> est\u00e1 desactivada<\/strong> solo veremos los contenidos que se ven en versi\u00f3n que estemos viendo<\/strong> (escritorio o m\u00f3vil). Por ejemplo, en el caso de que hayamos ocultado una imagen en la versi\u00f3n m\u00f3vil, si vamos a la vista previa de m\u00f3vil y tenemos la Visibilidad desactivada no veremos esa imagen por ning\u00fan lado. Pero si activamos la Visibilidad podremos ver la imagen que hemos ocultado. <\/p>\n\n\n\n

Por lo tanto, si tienes la visibilidad activada podr\u00e1s ver los contenidos duplicados en tu plantilla<\/strong>. Para evitar confusiones, los contenidos<\/strong> que est\u00e9n ocultos<\/strong> aparecer\u00e1n difuminados<\/strong> y con menos opacidad<\/strong>, as\u00ed podr\u00e1s distinguirlos f\u00e1cilmente.<\/p>\n\n\n

\n
\"\"
Aqu\u00ed tenemos la visiblidad activada, por lo que vemos el contenido ocultado tambi\u00e9n<\/figcaption><\/figure>\n<\/div>\n\n
\n
\"\"
Con la visibilidad desactivada, no vemos el contenido oculto, solo el contenido que se mostrar\u00e1 de la versi\u00f3n que tengamos activada la vista.<\/figcaption><\/figure>\n<\/div>\n\n\n

Teniendo la visibilidad activada<\/strong>, tambi\u00e9n podr\u00e1s distinguir en qu\u00e9 dispositivo est\u00e1 oculto el contenido al pasar el cursor sobre \u00e9l. Aparecer\u00e1 un peque\u00f1o icono del dispositivo<\/strong> (m\u00f3vil o escritorio) tachado<\/strong> en la parte suprior.<\/p>\n\n\n

\n
\"\"
Vista M\u00f3vil con visibilidad activada. Esta imagen est\u00e1 ocultada en la versi\u00f3n m\u00f3vil, ya que aparece difuminada y con una menor opacidad y adem\u00e1s vemos el icono del m\u00f3vil tachado.<\/figcaption><\/figure>\n<\/div>\n\n\n

Nuestra recomendaci\u00f3n es que mientras est\u00e9s adaptando tu dise\u00f1o mantengas la visibilidad activada<\/strong> y la desactives para ver c\u00f3mo va a quedar el resultado final.<\/p>\n\n\n\n

Esta opci\u00f3n de ocultar en escritorio o m\u00f3vil tambi\u00e9n est\u00e1 disponible en las propiedades de las filas, por lo que podr\u00e1s ocultar filas enteras<\/strong>.<\/p>\n\n\n\n

Configuraciones responsive en filas<\/h3>\n\n\n\n

Y hablando de filas, hay un par de opciones responsive especiales en la configuraci\u00f3n de filas<\/strong>:<\/p>\n\n\n\n

No apilar (columnas) en m\u00f3vil<\/h3>\n\n\n\n

Si ya has usado el editor de Acumbamail (y si no te lo cuento), sabr\u00e1s que la estructura b\u00e1sica de la plantilla son las filas<\/strong>. Dentro de \u00e9stas tenemos las columnas<\/strong>. El n\u00famero de columnas por fila var\u00eda desde 1 hasta 6<\/strong>. Adem\u00e1s puedes variar el espacio<\/strong> que ocupa cada columna dentro de la fila<\/strong>, haciendo que unas ocupen m\u00e1s espacio que otras. <\/p>\n\n\n

\n
\"\"
Ejemplos de filas<\/figcaption><\/figure>\n<\/div>\n\n
\n
\"\"
Una fila con dos columnas en la que la columa de la izquierda ocupa m\u00e1s espacio que la de la derecha<\/figcaption><\/figure>\n<\/div>\n\n\n

El n\u00famero de columnas<\/strong> va a tener un impacto directo en la adaptabilidad de tu dise\u00f1o<\/strong>, b\u00e1sicamente cuantas m\u00e1s columnas<\/strong> tenga la fila peor<\/strong>. Por eso mismo las columnas se apilan de manera autom\u00e1tica<\/strong> en la versi\u00f3n m\u00f3vil. <\/p>\n\n\n

\n
\"\"
Opci\u00f3n “No apilar en el m\u00f3vil” activada
(aparece as\u00ed de forma automatica)<\/figcaption><\/figure>\n<\/div>\n\n\n

\u00bfQue qu\u00e9 es eso de que se apilan<\/strong>? Muy f\u00e1cil, que en vez de aparecer en una l\u00ednea horizontal, aparecen en l\u00ednea vertical, una detr\u00e1s de otra.<\/strong><\/p>\n\n\n\n

Presta atenci\u00f3n al siguiente ejemplo:<\/p>\n\n\n

\n
\"\"
Columnas sin apilar en la versi\u00f3n m\u00f3vil<\/figcaption><\/figure>\n<\/div>\n\n
\n
\"dise\u00f1o
Columas apiladas en versi\u00f3n movil<\/figcaption><\/figure>\n<\/div>\n\n\n

\u00bfCu\u00e1l de las dos opciones te parece que ofrece una mejor experiencia de usuario<\/strong>?<\/p>\n\n\n\n

Si no lo sabes ya te lo digo yo, la segunda<\/strong>.<\/p>\n\n\n\n

Invertir el orden (de las columnas) en m\u00f3vil<\/h3>\n\n\n
\n
\"\"
Opci\u00f3n “Invertir el orden en m\u00f3vil”, viene desactivada de serie<\/figcaption><\/figure>\n<\/div>\n\n\n

Otra opci\u00f3n relacionada con las columnas, pero esta vez con su orden<\/strong>. El orden en el que aparecen las columnas es: primero la columna 1<\/strong> (la de la izquierda) y despu\u00e9s el resto en secuencia<\/strong>.<\/p>\n\n\n\n

Pero este orden a veces no es el ideal<\/strong>, sobre todo al hacer dise\u00f1os combinando filas y jugando con qu\u00e9 contenido ponemos en cada una. Para que sea m\u00e1s sencillo te lo voy a explicar con ejemplos en im\u00e1genes.<\/p>\n\n\n\n

En este dise\u00f1o tenemos 2 filas<\/strong>, cada una con dos columnas<\/strong>, mostrando diferentes productos. Para hacer el dise\u00f1o un poco m\u00e1s interesante hemos cambiado la posici\u00f3n de las im\u00e1genes principales<\/strong>. En la primera fila la imagen est\u00e1 en la columna de la izquierda (columna n\u00ba1) y en la segunda fila la imagen est\u00e1 en la columna de la derecha (columna n\u00ba2). <\/p>\n\n\n

\n
\"dise\u00f1o<\/figure>\n<\/div>\n\n\n

En la versi\u00f3n escritorio no vamos a tener problemas. Pero el orden en el que se ver\u00e1n las columnas al apilarse en la versi\u00f3n m\u00f3vil no es el mejor, ya que se ver\u00eda as\u00ed:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Si queremos que primero salgan las im\u00e1genes principales y despu\u00e9s la informaci\u00f3n y el bot\u00f3n que nos lleve a la p\u00e1gina de producto deberemos invertir el orden de las columnas de la segunda fila <\/strong>en la versi\u00f3n m\u00f3vil. Al activar esta opci\u00f3n nos ahorramos el tener que duplicar la fila e invertir el orden de las columnas en la versi\u00f3n m\u00f3vil. Con la opci\u00f3n activada este es el resultado:<\/p>\n\n\n

\n
\"dise\u00f1o
Resultado de invertir la segunda fila<\/figcaption><\/figure>\n<\/div>\n\n\n

Como ves, el orden tiene mucho m\u00e1s sentido as\u00ed\u00a0<\/p>\n\n\n\n

Probar en dispositivos<\/h3>\n\n\n\n

Cuando env\u00edas una campa\u00f1a de email marketing, tus suscriptores pueden abrir los correos electr\u00f3nicos desde una gran variedad de dispositivos y clientes de correo<\/strong>. El hecho de enviarte una prueba a una direcci\u00f3n tuya no significa que la visualizaci\u00f3n<\/strong> vaya a ser igualmente adecuada<\/strong> para todos<\/strong> los usuarios<\/strong>.<\/p>\n\n\n\n

Dependiendo del dispositivo<\/strong> (desktop, tablet, mobile) y de la peculiaridad<\/strong> de cada uno de ellos (tama\u00f1o de pantalla, resoluci\u00f3n, etc.), la visualizaci\u00f3n puede ser diferente<\/strong>. <\/p>\n\n\n\n

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

Por ello desde Acumbamail tenemos disponible una herrmienta de pago (con lo que te costar\u00e1 la prueba, se le paga un caf\u00e9 a la dise\u00f1adora, lo cual permite que pueda seguir escribiendo art\u00edculos tan \u00fatiles como este) que te perimite probar tu dise\u00f1o<\/strong> y as\u00ed visualizar tu campa\u00f1a en la mayor\u00eda de dispositivos y navegadores del mercado.<\/strong><\/p>\n\n\n\n

En el paso 4 (Dise\u00f1o) <\/strong>y el paso 5 (Env\u00edo)<\/strong> de tu campa\u00f1a,<\/a> podr\u00e1s enviar una prueba que se abrir\u00e1 en los diferentes dispositivos y clientes.<\/p>\n\n\n

\n
\"\"
Probar en dispositivos en el paso 4 (Dise\u00f1o) de tu campa\u00f1a, bot\u00f3n blanco en la parte superior derecha<\/figcaption><\/figure>\n<\/div>\n\n
\n
\"\"
Probar en dispositivos en el paso 5 (Env\u00edo) de tu campa\u00f1a<\/figcaption><\/figure>\n<\/div>\n\n\n

Se realizar\u00e1 una captura de pantalla en cada uno de ellos. Podr\u00e1s comprobar que tus suscriptores ver\u00e1n tus correos de manera correcta, o solventar cualquier posible error antes de enviar la campa\u00f1a.<\/p>\n\n\n

\n
\"dise\u00f1o<\/figure>\n<\/div>\n\n\n

En esta previsualizaci\u00f3n se incluye una gran variedad de clientes de correo:  Gmail, AOL, Yahoo, Outlook, Apple Mail, Mail.ru u Orange.<\/strong><\/p>\n\n\n\n


As\u00ed mismo, cada cliente es probado en muchos dispositivos como iPhone, Nexus o Google P\u00edxel<\/strong>. Tambi\u00e9n, en diferentes navegadores como Chrome, Firefox o Safari.<\/strong><\/p>\n\n\n\n

\u00daltimos tips para un dise\u00f1o de email responsive<\/h2>\n\n\n\n

Para acabar te voy a dar unos \u00faltimos consejos<\/strong> que permitir\u00e1n ir perfeccionando<\/strong> el dise\u00f1o<\/strong> de tus campa\u00f1as para que \u00e9stas sean m\u00e1s efectivas<\/strong>:<\/p>\n\n\n\n