Correo adaptable: por qué «adaptado al móvil» y «móvil primero» no son lo mismo

Diseño adaptable y móvil primero no son sinónimos. En el primero se dibuja el diseño para escritorio y se vigila que no se rompa en el teléfono. En el segundo se diseña primero el teléfono y el escritorio resulta una ampliación. La diferencia se ve en el resultado: los ocho parámetros de abajo se fijan de forma distinta según el camino elegido.

Dos estrategias distintas

El motivo para elegir es simple: la mayoría de los correos se abre en el teléfono, y el cliente que encabeza las aperturas es móvil.

De ahí algo que muchos pasan por alto: si el diseño se crea a 600 píxeles en pantalla grande y luego se comprime, las decisiones en el teléfono no las toma el diseñador sino el motor del cliente de correo. El enfoque móvil primero invierte el orden: primero se decide cómo se ve en pantalla estrecha y después se añade la versión ancha.

En la práctica esto cambia tres cosas: la jerarquía, el tamaño de los elementos y la cantidad de texto. Un teléfono no tiene columna lateral, así que lo principal va arriba. Los botones se dimensionan para el pulgar desde el inicio en lugar de encogerse desde escritorio. Y el texto se acorta: quinientas palabras en el teléfono pesan.

Ocho parámetros que lo deciden todo

Estos valores están asentados por la práctica y apenas cambian entre proyectos. Funcionan bien como lista de comprobación.

Sobre los botones en concreto. Apple recomienda un mínimo de 44 por 44 píxeles; Google dice 48. Conviene tomar la cifra mayor: el margen nunca estorba, mientras que un botón pequeño en el teléfono se falla con el pulgar y molesta.

La trampa del tamaño de fuente

Aquí hay una trampa sobre la que casi nadie escribe. El problema no es que el texto pequeño se vea mal.

El tamaño mínimo de fuente que muestra un iPhone es de 13 píxeles. Todo lo inferior se amplía a la fuerza hasta ese valor. El problema es que solo se amplía la fuente mientras el contenedor sigue igual: el texto deja de caber, las líneas se cortan donde no toca y la maquetación se descoloca.

Así que un pie de foto de 10 píxeles rompe el diseño no porque no se vea, sino porque el iPhone lo agranda sin avisar. Conclusión práctica: no bajes de 14 píxeles ni siquiera en textos secundarios.

El código: apilar columnas

El apilado de columnas se hace con una media query. Da ancho completo a los elementos en pantalla estrecha y a la vez sube el tamaño de fuente y la altura del botón.

Fíjate en la clase para ocultar. En pantalla estrecha conviene eliminar elementos que no caben: una navegación larga en la cabecera, imágenes decorativas, enlaces secundarios del pie. Eliminarlos, no encogerlos.

El problema de Outlook

Las media queries no funcionan en todas partes, y el gran ausente es el Outlook clásico para Windows. Usa el motor de un procesador de textos e ignora las media queries, así que el correo se queda tal como se maquetó.

Hay dos soluciones. La primera, maquetar el correo a una sola columna desde el inicio: no hay nada que apilar y el asunto queda cerrado. La segunda, el enfoque híbrido, donde el ancho de las columnas se define con porcentajes y ancho máximo a la vez, y la alineación con atributos de tabla. Así las columnas se reorganizan incluso donde las media queries no corren.

El método híbrido es más robusto pero más difícil de montar. Para la mayoría de las campañas basta una sola columna más un par de media queries.

Qué revisar en el teléfono

• abre el correo en el teléfono y no en una ventana de navegador estrechada: no es lo mismo
• comprueba si el botón principal cabe en la primera pantalla sin desplazarse
• pulsa el botón con el pulgar y no con el ratón: ¿aciertas a la primera?
• lee el texto en la calle con luz fuerte: así se prueba el contraste
• desactiva la carga de imágenes y confirma que el mensaje se mantiene
• revisa el correo en modo oscuro, activado en buena parte de los usuarios

Lo de la luz fuerte no es broma. Un texto gris claro que se lee perfectamente en un monitor bajo techo desaparece en la calle. El umbral de contraste de 4,5 a 1 existe justo para esto.

Cómo funciona en Mailvex

En Mailvex los valores móviles se fijan aparte de los de escritorio: cada bloque puede tener sus propios márgenes, tamaño de fuente y alineación para pantalla estrecha. El apilado de columnas ocurre solo y las media queries se añaden al compilar.

La vista previa alterna entre móvil y escritorio dentro del editor, y el envío de prueba a tu dirección es un clic. Eso cubre la mayoría de las comprobaciones previas al envío.

Preguntas frecuentes

¿Cuál es el ancho correcto de un correo?

600 píxeles es el estándar seguro. Cabe en el panel de vista previa de los clientes de correo y se reduce bien en el teléfono. Por encima de 640 píxeles empieza a aparecer desplazamiento horizontal en algunos clientes.

¿Hay que usar media queries obligatoriamente?

No si el correo es de una sola columna desde el principio: no hay nada que apilar. Las media queries sirven para diseños de varias columnas, y aun así no funcionan en todas partes: el Outlook clásico las ignora.

¿Por qué no se puede poner texto pequeño en los pies?

Un iPhone amplía a la fuerza cualquier fuente menor de 13 píxeles hasta ese tamaño. El contenedor no cambia, así que el texto deja de caber y la maquetación se rompe. Mantén un mínimo de 14 píxeles incluso en elementos secundarios.