Email responsive
Cómo conseguir que tus correos se lean bien en el móvil, la tableta y el ordenador
Abres una newsletter en el móvil y tienes que hacer zoom para leer el texto. Las imágenes se salen de la pantalla y el botón es tan pequeño que pulsas el enlace equivocado. Lo más probable es que cierres el correo en pocos segundos. Eso es justo lo que un email responsive evita.
¿Qué es un email responsive?
Un email responsive, o correo electrónico adaptable, es un email diseñado para ajustarse de forma automática al tamaño de la pantalla en la que se abre. Se ve bien en un ordenador, en una tableta y en un móvil.
Para conseguirlo, el diseño reorganiza sus elementos según el espacio disponible. En pantallas grandes puede mostrar dos o tres columnas. En el móvil, esas columnas se apilan una debajo de otra, el texto mantiene un tamaño legible y los botones crecen para que sea fácil pulsarlos.
El concepto viene del responsive design de las páginas web. Pero el email tiene sus propias reglas, porque cada programa de correo interpreta el código a su manera.
Por qué es imprescindible
Una gran parte de tus suscriptores leerá tus campañas en el móvil. Muchas veces lo harán en momentos breves: en el transporte, en una pausa o mientras esperan. Si el email no se lee bien a la primera, no le darán una segunda oportunidad.
Un diseño adaptable mejora la experiencia de lectura y eso se nota en tus resultados. Aumenta los clics, porque los enlaces y botones son fáciles de usar. Reduce las bajas y las quejas, porque el suscriptor no se frustra. Y refuerza la imagen de tu marca, que parece más cuidada y profesional.
Además, un correo que se lee con comodidad genera más interacción. Esa interacción positiva también favorece tu entregabilidad a medio plazo.
Cómo funciona un email responsive
El email se construye con HTML y estilos CSS. Hay tres enfoques principales para que se adapte:
Diseño fluido. Los anchos se definen en porcentajes en lugar de píxeles. El contenido se estira o se encoge según la pantalla. Es sencillo, aunque ofrece poco control.
Diseño con media queries. Son reglas CSS que aplican estilos distintos según el ancho de la pantalla. Por ejemplo: «si la pantalla mide menos de 600 píxeles, apila las columnas y agranda el texto». Gmail y Apple Mail las interpretan, pero algunas versiones de Outlook para escritorio no.
Diseño híbrido. Combina los dos anteriores para que el correo se vea bien incluso en los programas que ignoran las media queries. Es el método más robusto y el que usan muchas plantillas profesionales.
Claves para diseñar un email responsive
Estas son las buenas prácticas más importantes:
- Usa una sola columna en el móvil: es la estructura más fácil de leer en pantallas estrechas.
- Limita el ancho a unos 600 píxeles: es el estándar que se ve bien en la mayoría de programas de escritorio.
- Cuida el tamaño de letra: al menos 14 píxeles para el texto y algo más para los titulares.
- Haz botones grandes: la guía de diseño de Apple recomienda áreas táctiles de al menos 44 × 44 puntos. Un botón de ese tamaño se pulsa sin errores con el dedo.
- Adapta las imágenes: deben ocupar como máximo el 100 % del ancho disponible y pesar poco para cargar rápido con datos móviles.
- Escribe un buen texto alternativo: el alt text aparece cuando las imágenes están bloqueadas.
- Coloca lo importante arriba: en el móvil, el asunto, el preheader y el primer bloque deben dejar claro el mensaje y el call to action.
Un diseño de email modular facilita mucho este trabajo. Cada bloque está preparado para reorganizarse sin romper el conjunto.
Cómo comprobar que tu email se ve bien
Nunca envíes una campaña sin revisarla antes. Mándate una prueba y ábrela en tu móvil y en tu ordenador, en distintos programas de correo si puedes.
Fíjate en si el texto se lee sin hacer zoom, si las imágenes se ajustan y si los botones se pulsan con facilidad. También conviene revisar cómo se ve en modo oscuro, cada vez más habitual.
Si quieres entender por qué un mismo correo cambia de un programa a otro, te lo explicamos en la entrada sobre email rendering.
Después del envío, analiza tus métricas. Si tu CTR en móvil es mucho más bajo que en escritorio, es una señal de que algo falla en la versión móvil.
Cómo te ayudamos desde Mailrelay
En Mailrelay te lo ponemos fácil para crear emails adaptables sin tocar código. Nuestro editor genera correos responsive de forma automática y puedes partir de una plantilla de email ya preparada para el móvil. También puedes enviarte pruebas antes de lanzar cada campaña.
Todo ello en un plan gratuito de hasta 80.000 correos al mes y 20.000 contactos. Si quieres probarlo, puedes crear tu cuenta de email marketing en Mailrelay hoy mismo.
Preguntas frecuentes sobre el email responsive
¿Qué diferencia hay entre un email responsive y uno mobile friendly? Un email mobile friendly se ve correctamente en el móvil, a menudo porque es sencillo y de una sola columna. Uno responsive va más allá: cambia su estructura según la pantalla.
¿Necesito saber programar para crear un email responsive? No. Los editores de arrastrar y soltar de las herramientas de email marketing generan el código adaptable por ti.
¿Qué ancho debe tener una newsletter? Lo habitual es entre 600 y 640 píxeles en escritorio. En el móvil, el diseño se ajusta al ancho de la pantalla.
En conclusión
Un email responsive garantiza que tu mensaje llegue bien a cada suscriptor, sea cual sea su dispositivo. Es la base para que el resto de tu campaña funcione: el contenido, el diseño y la llamada a la acción.
Usa una estructura sencilla, cuida el tamaño de textos y botones y revisa siempre tus envíos antes de lanzarlos. Así cada correo tendrá las mejores opciones de conseguir clics.