Un diseño visto en una pantalla pequeña no debe verse como una versión reducida de un diseño de pantalla grande. Del mismo modo, un diseño visto en una pantalla grande no debe parecer una versión ampliada de un diseño de pantalla pequeña. En cambio, el diseño debe ser lo suficientemente flexible como para adaptarse a todos los tamaños de pantalla. Un diseño responsivo exitoso aprovecha al máximo todos los factores de forma.
Esto significa que es posible que algunos elementos de la interfaz deban verse muy diferentes según el contexto en el que se vean. Es posible que debas aplicar CSS muy diferentes a la misma base de código HTML para aprovechar al máximo los distintos tamaños de pantalla. Eso puede ser todo un desafío de diseño.
Estos son algunos desafíos comunes que podrías enfrentar.
Navigation
Mostrar una lista de vínculos de navegación es bastante sencillo en una pantalla grande. Hay mucho espacio para alojar esos vínculos.
En una pantalla pequeña, el espacio es premium. Cuando estás diseñando para esta situación, es tentador ocultar la navegación detrás de un botón. El problema con esta solución es que los usuarios tienen que seguir dos pasos para llegar a cualquier lugar: abrir el menú y, luego, elegir una opción. Hasta que se abra el menú, el usuario se pregunta: “¿Adónde puedo ir?”.
Intenta encontrar una estrategia que evite ocultar la navegación. Si tienes una cantidad relativamente pequeña de elementos, puedes diseñar la navegación para que se vea bien en pantallas pequeñas.
Ese patrón no se ajustará si la navegación tiene muchos vínculos. La navegación se verá desordenada si los enlaces se envuelven en dos o tres líneas en una pantalla pequeña.
Una solución posible es mantener los vínculos en una línea, pero truncar la lista en el borde de la pantalla. Los usuarios pueden deslizar el dedo horizontalmente para ver los vínculos que no son visibles de inmediato. Este es el patrón de desbordamiento.
La ventaja de esta técnica es que se adapta a cualquier ancho de dispositivo y a cualquier cantidad de vínculos. La desventaja es que es posible que los usuarios pasen por alto vínculos que no están visibles inicialmente. Si usas esta técnica para la navegación principal, asegúrate de que los primeros vínculos sean los más importantes e indican visualmente que hay más elementos en la lista. En el ejemplo anterior, se usa un gradiente para este indicador.
Como último recurso, puedes optar por ocultar tu navegación de forma predeterminada y proporcionar un mecanismo de activación para que los usuarios muestren y oculten el contenido. Esto se denomina divulgación progresiva.
Asegúrate de que esté etiquetado el botón que activa o desactiva la visualización de la navegación. No dependas de un ícono para que se entienda.
Un icono sin etiqueta es la navegación de "carne misteriosa": los usuarios no sabrán qué hay hasta que lo muerden. Proporciona una etiqueta de texto para que los usuarios sepan lo que revelará el botón.
Carrusel
Lo que es cierto sobre la navegación también lo es para otro contenido: intenta no ocultar nada de todos modos. Un carrusel es un método común para ocultar contenido. Puede parecer bastante ingenioso, pero es muy probable que los usuarios nunca descubran el contenido oculto. Los carruseles son mejores para resolver problemas organizacionales, como qué contenido debe mostrar en la página de inicio, que para servir a los usuarios.
Dicho esto, cuando el espacio es escaso, los carruseles pueden evitar que una página se vuelva demasiado larga y desordenada. Podrías emplear un enfoque híbrido: mostrar contenido en un carrusel para pantallas pequeñas, pero mostrar el mismo contenido en una cuadrícula para pantallas más grandes.
Para pantallas angostas, muestra elementos en una fila con flexbox. La fila de elementos se extenderá más allá del borde de la pantalla. Usa overflow-x: auto para permitir el deslizamiento horizontal.
@media (max-width: 50em) {
.cards {
display: flex;
flex-direction: row;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.cards .card {
flex-shrink: 0;
flex-basis: 15em;
scroll-snap-align: start;
}
}
Las propiedades scroll-snap garantizan que los elementos se puedan deslizar de una manera que se sienta fluida. Gracias a scroll-snap-type: inline mandatory, los elementos se encajan en su lugar.
Cuando la pantalla sea lo suficientemente grande (más ancha en este caso que 50em en este caso), cambia a la cuadrícula y muestra los elementos en filas y columnas, sin ocultar nada.
@media (min-width: 50em) {
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}
}
Cabe destacar que un elemento de la vista del carrusel no ocupa todo el ancho. Si así fuera, no habría indicios de que haya más contenido disponible más allá del borde del viewport.
Los carruseles son otro ejemplo del patrón de desbordamiento en acción. Si tienes muchos elementos que las personas pueden explorar, podrías seguir usando el patrón de desbordamiento incluso en pantallas grandes, como televisores. Este desplazamiento de contenido multimedia usa varios carruseles para administrar una cantidad significativa de opciones.
Una vez más, las propiedades scroll-snap garantizan que la interacción se sienta fluida. Además, observa que a las imágenes del carrusel se les aplicó loading="lazy". En este caso, las imágenes no están en la mitad inferior de la página, sino más allá del borde, pero se aplica el mismo principio: si el usuario nunca se desliza hasta ese elemento, la imagen no se descargará, lo que ahorrará en ancho de banda.
Con la incorporación de JavaScript, puedes agregar controles interactivos a un carrusel. Incluso puedes hacer que recorra los elementos automáticamente. Pero piensa mucho antes de hacer eso: la reproducción automática podría funcionar si el carrusel es el único contenido de la página, pero uno de reproducción automática es muy molesto si alguien intenta interactuar con otro contenido (como leer texto, por ejemplo). Puedes consultar más prácticas recomendadas para los carruseles.
Tablas de datos
El elemento table es perfecto para estructurar datos tabulares: filas y columnas de información relacionada. Pero si la tabla se hace demasiado grande, podría dañar el diseño de pantalla pequeña.
Puedes aplicar el patrón de desbordamiento a las tablas. En este ejemplo, la tabla está unida en un div con una clase de table-container.
.table-container {
max-inline-size: 100%;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.table-container th,
.table-container td {
scroll-snap-align: start;
padding: var(--metric-box-spacing);
}
Lineamientos
El patrón de desbordamiento es una buena opción para las pantallas pequeñas, pero asegúrate de que esté claro que se puede acceder al contenido fuera de la pantalla. Considera colocar una sombra o un gradiente sobre el borde donde se trunca el contenido.
La divulgación progresiva es una forma útil de ahorrar espacio, pero ten cuidado cuando la uses para contenido muy importante. Es más adecuado para las acciones secundarias. Asegúrate de que el elemento de la interfaz que active la divulgación esté claramente etiquetado; no te bases en la iconografía sola.
Primero, diseña para pantallas más pequeñas. Es más fácil adaptar los diseños de pantalla pequeña a pantallas más grandes que al revés. Si primero diseñas para una pantalla grande, existe el riesgo de que el diseño de esa pantalla se sienta como algo secundario.
Para ver más patrones de diseño y elementos de IU, explora la sección Patrones de web.dev.
Cuando adaptas elementos de la interfaz a diferentes tamaños de pantalla, las consultas de medios son muy útiles para averiguar las dimensiones del dispositivo. Sin embargo, las funciones multimedia, como min-width y min-height, son solo el comienzo. A continuación, descubrirás muchas otras funciones multimedia.