Inicio › Blog

Cómo diseñar un email responsive para móvil

Publicado el 2026-10-09

Si alguna vez has abierto un email de marketing en el móvil y has tenido que hacer zoom para leer el texto o pulsar tres veces un botón diminuto, sabes lo que pasa después: se cierra y se olvida. Varias fuentes de email marketing coinciden en que hoy la mayoría de aperturas ocurren ya desde el teléfono, así que diseñar pensando primero en la pantalla pequeña ya no es opcional. Aquí tienes cómo hacerlo sin complicarte.

Por qué esto importa más de lo que parece

Un email mal diseñado para móvil no solo se lee peor: hace que la gente deje de abrir tus próximos correos. Si además no revisas cómo queda antes de enviar, es fácil que un fallo de maquetación llegue a toda tu lista de golpe. Ya lo mencionamos de pasada en nuestro checklist antes de enviar una campaña: aquí profundizamos en el porqué y el cómo del diseño responsive.

Una sola columna y un ancho pensado para pantalla pequeña

La mayoría de guías de diseño de email coinciden en un formato de referencia: alrededor de 600 píxeles de ancho para escritorio, y que el contenido se reorganice en una sola columna de forma legible en pantallas de unos 320-375 píxeles en móvil. Si tu plantilla usa varias columnas lado a lado (por ejemplo, para mostrar tres productos en fila), compruébala en el teléfono: en muchas plantillas, esas columnas se aplastan una encima de otra y el texto se vuelve minúsculo si no están pensadas para apilarse automáticamente.

La recomendación práctica es diseñar primero pensando en el móvil (mobile first) y comprobar después que también se vea bien en escritorio, en vez de al revés.

Tipografía y botones pensados para el dedo, no para el ratón

En el teléfono no hay cursor que apunte con precisión a un enlace de texto pequeño. Algunas pautas que se repiten en varias guías de diseño de email:

• Tamaño de letra legible sin hacer zoom: evita cuerpos de texto diminutos; cuanto más grande y claro, menos esfuerzo para quien lee.
• Botones de llamada a la acción, no solo enlaces de texto: un botón con área suficiente para pulsarlo con el dedo convierte mejor que un enlace subrayado perdido en un párrafo.
• Un único mensaje principal por email: en pantallas pequeñas, cuantos más botones y enlaces compitan entre ellos, más difícil es decidir qué pulsar.

Si quieres repasar cómo redactar bien ese mensaje principal, lo vemos con más detalle en cómo escribir un CTA que funcione.

Imágenes: refuerzan, pero no deberían ser imprescindibles

Las imágenes ayudan a que un email se vea profesional, pero también tardan en cargar y muchos clientes de correo las bloquean por defecto hasta que el destinatario decide verlas. Dos prácticas sencillas evitan que esto te juegue en contra:

• Añade siempre un texto alternativo (alt text) describiendo lo que muestra la imagen, para que el mensaje se entienda aunque no se cargue.
• No pongas información crítica (como el propio botón de compra) únicamente dentro de una imagen: si se bloquea, el lector no sabrá ni que estaba ahí.

Si ya usas plantillas prediseñadas, por ejemplo las de Canva para tu newsletter, revisa el resultado final en el móvil: una plantilla vistosa en el editor de escritorio no siempre se comporta igual cuando se reorganiza en una pantalla pequeña.

El asunto y el preencabezado también son parte del diseño móvil

En el móvil, la bandeja de entrada recorta el asunto antes que en el escritorio, así que lo más importante del mensaje debe ir al principio. El preencabezado (ese fragmento de texto que se ve junto al asunto) es tu segunda oportunidad para convencer de que abran el correo; si lo dejas vacío, muchos clientes de correo muestran ahí las primeras palabras del email por defecto, que casi nunca son las más atractivas. Ya tratamos cómo escribir el asunto en sí en cómo escribir asuntos de email que se abran; aquí el matiz añadido es recordar que, en móvil, tienes menos caracteres visibles antes de que se corte.

El modo oscuro puede jugarte una mala pasada

Cada vez más personas leen el correo con el modo oscuro activado en el móvil. Si tu logotipo es un archivo con fondo transparente y letras oscuras, puede volverse invisible sobre un fondo negro. No hace falta rediseñarlo todo: basta con comprobar, al previsualizar el email, que el logotipo y los textos con color se siguen viendo con un fondo oscuro de por medio.

Cómo comprobarlo antes de enviar

La forma más fiable de detectar un problema de diseño responsive es simple: envíate el correo a ti mismo y ábrelo en tu propio teléfono antes de programar el envío a toda la lista. Revisa que el texto se lea sin hacer zoom, que los botones se puedan pulsar sin fallar al vecino, y que las imágenes no rompan la maquetación. Esta comprobación ya forma parte de nuestro checklist antes de enviar una campaña de email marketing, justo porque es el paso que más se salta por prisa y el que más se nota cuando falla.

Ejemplo: una newsletter que se arregla en diez minutos

Imagina una consultora que envía su newsletter mensual con una plantilla de tres columnas para mostrar sus últimos artículos. Un suscriptor le escribe diciendo que en el móvil el texto sale minúsculo. Al revisarlo desde su propio teléfono, confirma el problema: cambia la plantilla a una sola columna, agranda el tamaño de letra del cuerpo y convierte el enlace final de “leer más” en un botón visible. El siguiente envío, con la misma lista y el mismo contenido, recibe más clics simplemente porque ya se puede leer sin esfuerzo.

Preguntas frecuentes

¿Las plantillas de las herramientas de email marketing ya son responsive por defecto? La mayoría de editores visuales actuales, como los de Systeme.io y Kit, parten de plantillas pensadas para adaptarse a pantallas pequeñas. Aun así, conviene revisar cada plantilla concreta antes de confiar en que se vea bien sin comprobarlo.

¿Cuántas columnas puedo usar en un email? Cuantas menos, mejor en móvil. Una sola columna es la opción más segura; si usas dos o tres para mostrar productos, comprueba que se apilan de forma legible en pantalla pequeña antes de enviar.

¿Tengo que rediseñar toda mi newsletter desde cero? No siempre. A menudo basta con ajustar el tamaño de letra, convertir enlaces de texto en botones y comprobar las imágenes con alt text. Empieza por enviarte el correo a tu propio móvil para ver qué falla de verdad.

¿El modo oscuro afecta a todos los clientes de correo igual? No, cada cliente (Gmail, Outlook, Apple Mail) gestiona el modo oscuro de forma distinta. Por eso la comprobación práctica más fiable sigue siendo previsualizar el envío en varios dispositivos reales antes de programarlo.

En resumen

Diseñar para móvil no exige herramientas nuevas ni conocimientos de código: exige revisar cada envío desde el punto de vista de quien lo va a leer con el pulgar, no con el ratón. Si todavía estás montando tu newsletter desde cero, repásalo también en nuestro tutorial de cómo hacer una newsletter desde cero, y si quieres asegurarte de que no se te escapa nada más antes de pulsar enviar, vuelve al checklist completo antes de enviar una campaña.

Esta guía forma parte de nuestra guía completa de email marketing para autónomos.

Divulgación: algunas de las herramientas recomendadas tienen enlaces de afiliado en sus reseñas. No influyen en nuestras recomendaciones.