Diseñar para móvil no es lo mismo que adaptar un diseño de escritorio a una pantalla más pequeña. La metodología Mobile Always propone un cambio de mentalidad: en lugar de pensar primero en escritorio y luego reducir, se trata de validar cada decisión de diseño en un contexto móvil real, especialmente en pantallas de 360 px de ancho. Esto no significa empezar el diseño visual en móvil, sino comprobar durante todo el proceso cómo funcionará cada elemento en una pantalla pequeña, para que la versión móvil no termine siendo un parche de escritorio.

Para aplicar Mobile Always en proyectos WordPress, se han definido once pilares prácticos que cubren desde la jerarquía del contenido hasta la navegación. A continuación, se explican cada uno de ellos y cómo implementarlos en un sitio real.

Jerarquía definida desde los wireframes

El primer pilar establece que la jerarquía del contenido debe planificarse en la fase de wireframes, no después. En una pantalla de 360 px no hay espacio para mostrar todo al mismo tiempo, por lo que es necesario clasificar el contenido en tres niveles: crítico, importante y secundario.

  • Crítico: lo que el usuario necesita ver nada más cargar la página (título, propuesta de valor, llamada a la acción principal).
  • Importante: información complementaria pero relevante (beneficios, testimonios, navegación secundaria).
  • Secundario: contenido que puede ocultarse bajo acordeones, desplazamiento o enlaces internos (detalles legales, créditos, enlaces de pie de página).

Al definir esta jerarquía desde el wireframe, la reorganización para móvil se vuelve natural y no obliga a rediseñar todo después.

Densidad de información

El segundo pilar se enfoca en controlar la cantidad de elementos que se muestran a la vez. En escritorio se pueden presentar bloques con mucho texto, varias columnas y llamadas a la acción múltiples. En móvil, esa misma densidad produce saturación visual y abandono.

Cómo aplicarlo en WordPress:

  • Reducir el número de bloques por sección en la vista móvil mediante el editor de bloques o CSS (por ejemplo, ocultando ciertos elementos en pantallas pequeñas con display: none).
  • Limitar los párrafos a uno o dos por bloque.
  • Agrupar enlaces y botones para que no aparezcan más de dos por sección.

Uso de uno o dos bloques según la necesidad

El tercer pilar propone evaluar si una sección necesita uno o dos bloques de contenido. En móvil, la lectura es más lineal y el usuario recorre la página de arriba abajo. Cada bloque debe tener una función clara y no solaparse con otros.

Ejemplo práctico:
Si en escritorio se tienen tres columnas con iconos, en móvil se recomienda convertirlas en una sola columna apilada, pero agrupando la información en un máximo de dos bloques visuales: un bloque con el icono y título, y otro bloque con la descripción y enlace. Esto simplifica la lectura y evita que el usuario tenga que leer tres piezas separadas.

Tipografía fluida

La tipografía fluida es el cuarto pilar y consiste en hacer que los tamaños de fuente se adapten al ancho de pantalla sin depender de saltos fijos (breakpoints). En lugar de definir tamaños fijos para móvil, tableta y escritorio, se usan funciones CSS como clamp() para que el texto varíe de forma continua.

Implementación en WordPress:

  • En el personalizador o en el archivo style.css del tema hijo, se puede asignar a los títulos y párrafos valores como:
    font-size: clamp(1.125rem, 2vw + 1rem, 2.5rem);
  • Esto asegura que en 360 px el texto sea legible (mínimo 18 px para cuerpo) y en pantallas grandes crezca proporcionalmente.

Espaciado fluido

El quinto pilar es el espaciado entre elementos. No basta con reducir el padding y margin de forma arbitraria; se debe calcular con unidades relativas (vw, % o clamp()) para que los márgenes blancos mantengan una proporción armoniosa en cualquier tamaño.

Recomendación:

  • Usar padding y margin en unidades relativas al viewport (2vw o clamp(1rem, 3vw, 3rem)).
  • En móvil (360 px), un espaciado de 16 px entre bloques suele ser adecuado; pero ese mismo valor en una pantalla de 1920 px se vería muy pequeño. La fluidez evita tener que definir un espaciado para cada breakpoint.

Interacción táctil

El sexto pilar recuerda que en móvil se interactúa con el dedo, no con el ratón. Las áreas clicables deben tener un tamaño mínimo de 48 px (recomendación de Google) y estar separadas entre sí para evitar toques accidentales.

Acciones concretas en WordPress:

  • En los botones, establecer un min-height: 48px y min-width: 48px.
  • En menús desplegables, asegurar que los ítems tengan suficiente altura (al menos 44 px).
  • En enlaces dentro de texto, aumentar el área de toque añadiendo padding alrededor del a.

Gestión del scroll

El séptimo pilar se centra en cómo el usuario recorre la página. En móvil, el scroll es vertical casi exclusivo, por lo que:

  • Evitar desplazamientos horizontales ocultos.
  • No colocar elementos que requieran scroll dentro de scroll (como carruseles complejos dentro de una sección que ya se desplaza).
  • Priorizar el contenido que aparece en los primeros 600 px (el “above the fold” móvil), pero sin forzar que todo esté visible al inicio: el usuario está dispuesto a hacer scroll si el contenido es relevante.

Herramienta:
Usar el inspector de Chrome en modo dispositivo (360 px de ancho) para verificar que no haya contenido cortado ni scroll innecesario.

Alternativas al hover

El octavo pilar aborda la falta de hover en pantallas táctiles. Efectos como cambio de color al pasar el ratón, tooltips o menús desplegables que se activan con hover no funcionan en móvil.

Soluciones para WordPress:

  • Convertir los tooltips en texto visible o en elementos que se muestren al tocar (con un :focus o un toque).
  • Reemplazar menús hover por menús de tipo acordeón o desplegables que requieran un clic/tap.
  • En tarjetas de producto, mostrar la información extra directamente debajo del título en lugar de ocultarla en un hover.

Comportamiento de imágenes

El noveno pilar exige que las imágenes se carguen optimizadas y se adapten al ancho real disponible, sin perder calidad ni ralentizar la página.

Prácticas recomendadas en WordPress:

  • Usar el formato WebP y generar tamaños intermedios (por ejemplo, 360 px, 720 px) con el plugin de optimización adecuado.
  • Aplicar srcset y sizes automáticos que WordPress ya genera al insertar imágenes desde la mediateca.
  • Establecer una altura máxima en CSS: max-height: 60vh para que las imágenes no ocupen toda la pantalla en móvil.
  • Añadir loading="lazy" para diferir la carga de imágenes que no están visibles inicialmente.

Formularios móviles

El décimo pilar se dedica a diseñar formularios pensando en la escritura táctil. En móvil, rellenar campos es tedioso; por ello:

  • Reducir el número de campos al mínimo imprescindible.
  • Usar el tipo de input adecuado (email, tel, number, url) para que el teclado virtual muestre la configuración correcta.
  • Aumentar el tamaño de los campos (altura mínima 48 px, padding interior 12 px) y separarlos con al menos 12 px.
  • Colocar el label sobre el campo (y no a un lado) para que quede visible mientras se escribe.
  • Validar en tiempo real y mostrar mensajes de error claros, sin que el formulario desaparezca o se envíe antes de corregir.

El undécimo pilar critica la dependencia del menú hamburguesa como única solución para la navegación móvil. Propone explorar alternativas que mejoren la accesibilidad y la velocidad de acceso a las secciones principales.

Opciones viables en WordPress:

  • Menú de navegación sticky con iconos y textos cortos (hasta 5 ítems) en la parte inferior de la pantalla.
  • Navegación por pestañas horizontales (tab bar) para las categorías principales.
  • Menú desplegable con cabecera expandible sin icono hamburguesa (por ejemplo, un botón con el nombre de la sección actual).
  • Breadcrumbs siempre visibles para que el usuario sepa dónde está.

La elección depende del tipo de sitio, pero el principio es no relegar la navegación a un icono que muchos usuarios ignoran. Se debe garantizar que las opciones clave estén visibles al tocar.

Conclusión

La metodología Mobile Always propone once pilares que cubren desde la planificación inicial hasta los detalles de interacción. Aplicarlos en WordPress no requiere un tema específico ni un constructor visual; se basa en decisiones de diseño y en pequeñas adaptaciones de CSS y configuración. El objetivo no es renunciar al escritorio, sino impedir que las decisiones tomadas en pantallas grandes sean imposibles de trasladar correctamente a una pantalla de 360 px. Cuando cada pilar se verifica durante el proceso de desarrollo, la versión móvil deja de ser un parche y se convierte en una experiencia diseñada de forma consciente.

Preguntas frecuentes

1. ¿Mobile Always obliga a diseñar primero en móvil?
No. Mobile Always no exige comenzar el diseño visual en una pantalla pequeña. Permite diseñar en escritorio, pero con la condición de validar cada decisión en un contexto de 360 px para evitar que la versión móvil resulte perjudicada.

2. ¿Los once pilares son independientes o deben aplicarse todos?
Son complementarios y se refuerzan entre sí. Por ejemplo, una buena jerarquía facilita la densidad de información, y la tipografía fluida funciona mejor con espaciado fluido. Para obtener una experiencia móvil coherente, se recomienda aplicar todos los pilares.

3. ¿Es compatible con cualquier tema de WordPress?
Sí, la mayoría de los pilares se implementan mediante ajustes de CSS, tamaño de imágenes, tipos de input y personalización de menús. No depende de un tema concreto, aunque algunos temas ya incorporan buenas prácticas de tipografía fluida y espaciado fluido.

4. ¿Qué tamaño de pantalla se usa como referencia para móvil?
Se toma como referencia un ancho de 360 px, que representa la mayoría de teléfonos modernos. Es el tamaño típico del iPhone SE y muchos dispositivos Android.