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

> ¿Cómo hago que mi página web se vea bien en el teléfono?

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.

> Fuente: https://magoallegri.com/biblioteca/diseno-mobile-first-con-ia

---

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

[Figura: 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.`