Mago Allegri

Diseño mobile first: probá tu web en el teléfono

Por Juan Martín «Mago» Allegri · Actualizado:

Achicá el navegador hasta el ancho de un teléfono y recorré la página: lo que se rompe en angosto se rompe en el teléfono (titulares cortados, botones chicos). Pasale la lista a Claude y pedile que arregle mobile sin tocar la versión grande. La regla: la acción principal se hace con un pulgar.

Dato incómodo: la mayoría de la gente que abra tu página nunca la va a ver en una computadora. La va a ver en un teléfono, probablemente caminando, con el pulgar listo para seguir de largo. Si en esa pantalla no funciona, no funciona.

Probala en angosto (sin teléfono todavía)

Tu página vive en tu compu, así que la prueba mobile se hace achicando el navegador:

  1. Abrí tu index.html en el navegador.
  2. Agarrá el borde de la ventana y angostala hasta que tenga el ancho de un teléfono (bien finita).
  3. Recorré la página entera así, de arriba a abajo.

Lo que se rompe en angosto, se rompe en el teléfono. Buscá los clásicos:

  • Titular gigante que queda cortado o en una palabra por línea.
  • Textos que se van del borde o quedan microscópicos.
  • Botón que no se puede tocar con un pulgar (muy chico o muy pegado a otra cosa).
  • Secciones que en columna quedan kilométricas.

Arreglalo con palabras

Mismo loop de siempre. Decile lo que viste, con la pantalla angosta de testigo:

Probé la página en ancho de teléfono y encontré esto:
- [QUÉ SE ROMPE, P. EJ. "el titular queda cortado"]
- [QUÉ MÁS, P. EJ. "el botón queda muy chico para tocarlo con el dedo"]

Arreglá la versión mobile sin tocar cómo se ve en pantalla grande.
El botón principal tiene que poder tocarse cómodo con el pulgar.

Refrescá, recorré de nuevo en angosto, repetí hasta que la versión finita se sienta tan cuidada como la ancha. Los arreglos mobile van juntos, no de a uno.

La regla del pulgar

Mobile primero: probala angosta y que la acción principal se toque cómoda con el pulgar

En mobile hay una sola pregunta que importa: ¿la acción principal se puede hacer con un pulgar, sin zoom y sin puntería? Si el botón es cómodo de tocar, el resto se perdona. Si no, nada se perdona.

Si algo sale mal

  • Arregló mobile y rompió la versión grande. La versión de escritorio se rompió: [QUÉ]. Las dos versiones tienen que convivir; usá estilos responsive, no reemplaces una por otra.
  • En angosto aparece scroll horizontal. Hay scroll horizontal en mobile. Encontrá qué elemento se pasa del ancho y arreglalo.
  • Quedó bien finita pero fea en tablet. Revisá los anchos intermedios, tipo tablet: que se vea bien en cualquier ancho, no solo en finito y en grande.