Diseño adaptable: la página en el móvil

Una página adaptable reorganiza su contenido para diferentes espacios. No necesita adivinar el modelo exacto de teléfono de cada visitante.

Probar el contenido

Reduce el ancho de la ventana de manera gradual. Observa dónde se amontonan los enlaces o aparecen líneas difíciles de leer.

Esas situaciones indican qué parte de la distribución necesita revisión.

Cambiar la estructura visual

Una fila puede convertirse en columna y una imagen puede ocupar todo el ancho disponible. El orden del documento debe seguir siendo lógico.

Flexbox, Grid y las media queries permiten resolver distintas partes de esa adaptación.

Completar una tarea

Abre el menú, recorre enlaces y utiliza los controles con teclado. Un diseño adaptable debe funcionar, además de caber en la pantalla.

Comprueba las imágenes y los textos largos. El ejemplo inicial no representa todas las situaciones del contenido.

Seguir aprendiendo

Relaciona esta lectura con los demás recursos de Zunvex y prueba las ideas en un proyecto pequeño. Las imágenes, cuando aparecen, son ilustrativas.