El diseño responsive resolvió el problema del layout. Las media queries y las cuadrículas fluidas aseguran que el contenido se redistribuya entre tamaños de pantalla sin desplazamiento horizontal ni superposición de elementos. Pero la adaptación del layout es la experiencia móvil mínima viable, no el objetivo. El verdadero diseño mobile-first requiere repensar cada aspecto de la experiencia de usuario para las limitaciones y capacidades de los dispositivos móviles.
La arquitectura de la información debe ser rediseñada, no simplemente redistribuida. En escritorio, los usuarios pueden escanear una página con docenas de elementos visibles y encontrar lo que necesitan mediante reconocimiento espacial. En móvil, la ventana gráfica limita el contenido visible a un puñado de elementos a la vez. Esto exige un enfoque fundamentalmente diferente de la jerarquía del contenido. Diseñamos primero la arquitectura de información móvil, usando la divulgación progresiva para mostrar el contenido y las acciones más críticas mientras mantenemos la información secundaria accesible pero sin competir por la atención. El layout de escritorio luego expande esta jerarquía en lugar de intentar comprimir un layout de escritorio en una ventana gráfica móvil.
Los patrones de interacción difieren profundamente entre las interfaces táctiles y las de puntero. Los objetivos táctiles necesitan un mínimo de 44 píxeles, pero un gran diseño móvil va más allá. Los gestos de deslizamiento, pull-to-refresh y la navegación con bottom-sheet aprovechan la ergonomía natural del uso del teléfono con una mano. Colocamos las acciones principales en la zona del pulgar, el arco de la parte inferior de la pantalla que los usuarios pueden alcanzar sin reposicionar su agarre. Los patrones de navegación como las pestañas inferiores y los botones de acción flotantes mantienen los controles críticos al alcance fácil en lugar de escondidos detrás de un menú hamburguesa en la parte superior de la pantalla.
El rendimiento es una decisión de diseño, no solo una preocupación de ingeniería. Los usuarios móviles operan frecuentemente en redes limitadas y procesadores menos potentes. Cada decisión de diseño tiene una implicación de rendimiento. Imágenes hero, bibliotecas de animación, fuentes web y scripts de terceros compiten por el mismo ancho de banda y potencia de procesamiento limitados. Establecemos presupuestos de rendimiento en la etapa de diseño: un peso máximo de página, un objetivo de Largest Contentful Paint y un umbral de capacidad de respuesta de interacción. Los diseñadores crean entonces dentro de estas restricciones en lugar de entregar diseños que ingeniería debe luego comprometer para cumplir con los objetivos de rendimiento.