Responsive
Que una misma web se adapta al tamaño de la pantalla: se lee bien en un móvil pequeño y también en un monitor grande.
✦Apagada: responde bien la pregunta del final para encenderla
También lo verás como: responsive · diseño responsive · diseño adaptable · adaptable · mobile-first · pensada primero para móvil · vista de móvil
Analogía
El agua en un vaso: toma la forma del recipiente. El contenido es el mismo; cambia cómo se coloca.
Qué cambia de una pantalla a otra
- Tres columnas en el ordenador → una en el móvil.
- El menú de arriba → un botón que lo despliega.
- Los textos y botones, lo bastante grandes para un dedo.
Mobile-first: primero el móvil
Es el orden de trabajo: se diseña primero para la pantalla pequeña y después se amplía. Funciona mejor que al revés, porque en poco espacio se decide qué es de verdad importante.
Y no es una moda: la mayoría de las visitas a webs de negocios locales llegan desde un móvil. La carta de un restaurante, casi todas.
Cómo se comprueba
En las DevTools, Ctrl + Shift + M muestra la página como en un móvil. La medida de referencia de este roadmap: 360 px de ancho. Dos señales de fallo:
- aparece desplazamiento horizontal (hay que mover la página de lado),
- hay que hacer zoom para leer.
Para qué sirve / cuándo aparece
"Que se vea bien en el móvil" no es un criterio. "A 360 px no hay desplazamiento horizontal", sí. Se estudia a fondo en la Fase 3.