Diseño de correo responsive para pantallas pequeñas

Un diseño de correo responsive funciona cuando una persona puede entender el mensaje y actuar desde una pantalla pequeña. Reducir una composición de escritorio solo resuelve parte del trabajo. El orden de lectura, el texto y la acción principal necesitan la misma atención.

La vista móvil ayuda a detectar problemas pronto. La validación final también debe hacerse sobre un mensaje recibido, después de personalizarlo y de que la aplicación del destinatario interprete el HTML.

Definir primero el orden del mensaje

Escribe qué necesita saber el lector en primer, segundo y tercer lugar. Para una novedad del producto, puede ser qué cambia, por qué le interesa y dónde probarla. Diseña las secciones alrededor de esa secuencia.

Dos columnas de escritorio pueden generar un orden extraño al apilarse. Si todas las descripciones están a la izquierda y todos los botones a la derecha, cada explicación puede quedar lejos de su acción. Agrupa primero los elementos relacionados y decide después cuántas columnas necesitas.

En una invitación, mantén juntos el nombre del evento, la fecha y la inscripción. La biografía de la ponente puede ocupar otra sección. Lee la versión estrecha de principio a fin sin recurrir a la composición ancha para entenderla.

Permitir que el contenido se ajuste

Define un ancho máximo razonable y deja que la estructura se adapte a espacios menores. Un contenedor flexible puede seguir desbordándose por una imagen de ancho fijo, una dirección larga o una tabla que no pueda reducirse.

La referencia CSS de Gmail documenta consultas de medios basadas en la anchura. Es información útil sobre Gmail, pero no demuestra que todas las aplicaciones acepten las mismas reglas. Mantén una presentación básica comprensible cuando una mejora no se aplique.

Las imágenes deben conservar sus proporciones al reducirse. Revisa también el encuadre: una captura puede adaptarse al ancho y, aun así, volverse imposible de entender. A veces conviene sustituirla por una imagen más sencilla en lugar de mostrar todos sus detalles diminutos.

Facilitar la lectura y los toques

Como punto de partida práctico, prueba texto de unos 16 píxeles CSS y botones de alrededor de 44 píxeles de alto. No son requisitos universales para todos los correos. La tipografía, la longitud de línea y el espacio disponible determinan el resultado.

Separa los enlaces para que un dedo pueda elegir el destino correcto. La guía WCAG sobre tamaño de objetivos establece un criterio de 24 píxeles CSS, con excepciones y alternativas de separación. Una medida aislada no demuestra accesibilidad.

Utiliza etiquetas concretas, como «Consultar mi factura», y evita una fila de acciones que compitan entre sí. Reserva espacio para traducciones más largas. Reducir la letra para conservar un botón de una línea puede empeorar la lectura.

Aplicar los cambios a un ejemplo real

Imagina un boletín mensual con una cabecera grande, dos novedades y tres enlaces finales. En el teléfono, la imagen ocupa casi toda la primera pantalla y las novedades quedan en columnas demasiado finas.

Revisa la composición así:

1. Acerca la novedad principal y su acción al comienzo.
2. Apila cada novedad como un conjunto de título, explicación y enlace.
3. Reduce la altura del elemento decorativo sin ocultar su contenido útil.
4. Añade separación entre los enlaces del pie.
5. Introduce nombres largos y etiquetas traducidas reales.

Compara la revisión con el propósito del mensaje. Si quitar una sección no cambia la decisión del lector, eliminarla puede ayudar más que seguir comprimiendo su contenido.

Comprobar el correo que llega al buzón

Envía mediante la misma aplicación y el mismo proceso que utilizarás normalmente. Abre el mensaje con varios anchos pequeños y vuelve a una vista amplia para detectar regresiones. Revisa saltos de línea, desplazamiento horizontal, proporciones y visibilidad de la acción.

Prueba texto ampliado e imágenes bloqueadas cuando el cliente lo permita. Sigue cada enlace importante. El lector debería entender qué hacer incluso cuando falten elementos decorativos.

Weavour ofrece vistas de escritorio y móvil durante la edición; la aplicación anfitriona realiza el envío. Utiliza esas vistas para mejorar la composición y conserva una prueba real antes de publicar la plantilla. Descubre Weavour para integrar la creación visual de correos en tu producto.