Email apto para móviles, adaptativo o con diseño híbrido: veamos las diferencias

03 septiembre 2020Tiempo de lectura: 6 min.

El Email Marketing supo adaptarse a muchos cambios; uno sobre todos: la llegada de los móviles. Para responder a nuevas necesidades de diseño, se han desarrollado métodos diferentes; y algunos siguen siendo utilizados. Veamos los pros y los contras de los principales.

Diseñar un email nunca es tarea simple: además de los aspectos gráficos y de una plantilla adecuada, debes asegurarte de que la experiencia de usuario sea fluida y satisfactoria. Son muchas las buenas ideas que tienes que tener en cuenta a nivel de diseño de UX, y entre ellas la de lograr que tus email sean perfectamente legibles en cualquier dispositivo, y en particular desde el  móvil

Repasemos un par de cifras para hacernos a la idea de la dimensión del fenómeno: el 75% de los usuarios afirma que lo más frecuente es leer los email en un smartphone; los dispositivos móviles representan el 41,9 % de los email abiertos durante el primer trimestre de 2019 (fuente EmailMonday). 

No es lo mismo diseño adaptativo (responsive) que diseño apto para móviles (mobile-friendly) 

Los varios términos asociados al diseño optimizado para móvil a menudo dan lugar a confusión : ¿tus email deben ser aptos para móvil o adaptativos? ¿Cuáles son las diferencias? Vamos a analizar cada término para descubrir su significado exacto y cuándo utilizarlos.

¿Qué significa email apto para móviles? 

El método «Apto para móviles», conocido también mobile-friendly,  mobile-first, escalable o mobile-aware, garantiza email perfectamente legible en todos los dispositivos, creando una versión reducida del mensaje de escritorio. 

Estos email se basan en un esquema de diseño de una sola columna, textos con caracteres grandes y llamados a la acción de gran tamaño. Estas soluciones garantizan que los email sean legibles incluso si se redimensionan para adapptarse al ancho de pantalla de los dispositivos móviles.

La ventaja de los email aptos para móviles es que te permiten tener un diseño optimizado para dispositivos móviles rápidamente, porque requieren poco código.

Son los email más faciles de crear, pero tienen algunos inconvenientes: 

  • sus opciones de diseño son limitadas 
  • no están técnicamente optimizados para dispositivos móviles
  • se limitan a hacer legibles en móviles los email concebidos para escritorio.

¿Qué es el diseño adaptativo?

Los email responsive o “adaptativos” son mensajes de correo electrónico que se adaptan a las medidas de las pantallas en que el usuario los lee. 

Un email para escritorio puede tener un ancho entre 600 y 800 píxeles, o más; estas medidas, si se mantuvieran en las pequeñas pantallas de los smartphone o tabletas, obligarían al usuario a desplazar continuamente el texto a derecha e izquierda para ver todo el contenido del email. Eso es precisamente lo que ocurre con los email  “no adaptativos”, modelo que, por fortuna, ha quedado casi completamente en desuso.

Por contra, en los email adaptativos, el contenido se readapta automáticamente para favorecer la lectura en pantallas más pequeñas (en móviles, el ancho es de 320px en vertical y 480px en horizontal). En la práctica, con un diseño adaptativo:

  • se pasa de una estructura de varias columnas a una sola columna, con los distintos elementos apilados uno bajo el otro, y no en disposición lateral como en la vista de escritorio.
  • las imágenes se reducen
  • los textos aumentan de tamaño
  • el tamaño de los llamados a la acción cambia, se hacen más grandes, bien visibles, de modo que resulte fácil hacer clic sobre ellos con el pulgar,  el modo de interacción más común en los smartphone.

Los email adaptativos para móvil no tienen una estructura fija, sino modular, lo cual permite que toda la estructura adapte su ancho al espacio a disposición. Esta “elasticidad” del diseño adaptativo depende del suo de media queries CSS, que modifican el email conforme a reglas específicas o juegos de estilos que se aplican en función de la pantalla detectada.

Históricamente, una de las mayores desventajas del email adaptativo era que Gmail no admitía este método, pero tras una actualización de finales de 2016, ahora también Gmail ha pasado a admitir los módulos media query.

Las ventajas de los email adaptativos son: 

  • son legibles en cualquier dispositivo 
  • la experiencia de usuario mejora
  • en la visualización desde móvil, algunos elementos pueden ocultarse, si así se configura en el editor
  • hay una amplia disponibilidad de plantillas adaptativas para email.

Con estas pequeñas muestras de atención hacia los suscriptores de tus newsletter, aumentas las posibilidades de interacción, incentivas la fidelidad de las personas a tu boletín de noticias y mejoras el reconocimiento de la marca.

Entre las desventajas del diseño adaptativo: 

  • el proceso de desarrollo requiere más tiempo que otras soluciones
  • no funcionan en todos los dispositivos.

¿Qué son los email con diseño híbrido?

El email híbrido permite ajustar el email en función del ancho del dispositivo en que se lee. La principal diferencia con respecto al método adaptativo es que no se basa en media queries o puntos de interrupción específicos para modificar el esquema del mensaje de correo electrónico. Los e´-mail híbridos funcionan en cualquier cliente de correo, universalmente,, gracias al uso de una combinación de anchuras basada en porcentajes, anchos máximos y soluciones alternativas inteligentes para los clientes Outlook. 

El único aspecto negativo de este estilo de desarrollo es que con esquemas complejos, el proceso se complica.

Modelos de email para móvil: ¿qué método deberías usar?

Como habrás visto, cada solución tiene sus pros y sus contras La elección debería depender de tus recursos de desarrollo, de tu base de datos y de lo que tus contactos requieran. Sin embargo, tienes que tener en cuenta que el  diseño adaptativo es el modelo más eficaz y completo, con el que puedes tener la seguridad de que la visualización de tus email será siempre perfecta desde cualquier dispositivo. 

Analiza tu base de datos: ¿en qué dispositivo lee tus correos  la mayor parte de tus contactos? Actúa en función de este dato y utiliza herramientas que te permitan obtener una vista previa de tus email. Por ejemplo, con eleditor BEE de MailUp puede verificar en tiempo real el rendimiento de tus email antes de enviarlos a tus contactos.

Cualquiera que sea tu elección, ten siempre presente que el correo electrónico desde móvil representa entre el 26 y el 78% de los mensajes abiertos, según el público al que te dirijas, el producto y el tipo de email que envíes (datos: EmailMonday). 

Un último apunte importante:  para dar a los email un diseño adaptativo no es necesario saber HTML o diseño. Lo único que se necesita es un editor que permita crear mensajes de email de diseño modular, optimizado automáticamente para móviles.

Este artículo ha sido escrito por

Valentina Pacitti

Valentina Pacitti

Redactora

Redactora y traductora desde 2012, encargada del blog de Semrush desde 2015. Las palabras son mi medio de comunicación, leo y escribo mucho. Me encanta conocer bien las palabras, así puedo elegir las más adecuadas para contar cada historia. Simple, clara y firme: esta es la escritura que prefiero. Estoy más desconectada que online, pero puedes contactarme a través de mi perfil personal en cada red social, para compartir ideas y proyectos.

Artículos relacionados