La mayoría de los diseños se siguen dibujando anchos, en un monitor grande, y se aprietan en el móvil al final. Se nota: texto que encoge hasta pedir zoom, botones que el pulgar no acierta, tres columnas machacadas en una. El orden está del revés.
Diseñar primero el móvil le da la vuelta. Empiezas por la pantalla más difícil —pequeña, sujeta con una mano, al sol, con mala conexión— y te obliga a dejar solo lo que importa. Todo lo que sobrevive a esa pantalla funciona también en un portátil. Al revés no pasa: lo que cabe en un portátil a menudo se deshace en el móvil.
Un ejemplo. Una carta de restaurante dibujada ancha: tres columnas de platos, fotos grandes y un mapa al lado. En el móvil se apila en una tira interminable y hay que ampliar con los dedos para leer un precio. Pensada al revés -móvil primero- es una lista de platos que se lee de un vistazo, con el mapa a un toque. Lo esencial, qué hay y cuánto cuesta, manda; lo demás espera a que haya sitio.
Móvil primero no va de teléfonos. Es una forma de decidir qué es esencial: si no se gana su sitio en una pantalla pequeña, seguramente no hacía falta.
Cuidado con el malentendido: móvil primero no es móvil solo. No abandonas el escritorio -decides el orden de prioridades en lo estrecho y, cuando hay espacio de sobra, lo aprovechas: la navegación se despliega, caben dos columnas, respira. Lo que no haces es empezar por ahí.
Móvil primero
Decides lo esencial en lo estrecho; el escritorio solo añade aire. Nada se cae al encoger.
Escritorio primero
Dibujas con espacio de sobra y luego recortas a la fuerza. En el móvil algo siempre se rompe.
Quien mira un móvil está distraído, con una sola mano y con prisa. Ese es el usuario real, no tú tranquilo en tu mesa: aguanta menos texto y menos pasos de los que crees.
En este curso lo recorremos en orden: el pulgar, el tamaño de lo que se toca, los formularios, el texto, la navegación, el peso y cómo se prueba. Empezamos por la mano que sujeta el teléfono.