Un diseño que se ve en una pantalla pequeña no debe parecer una versión reducida de un diseño para pantallas grandes. Del mismo modo, un diseño que se ve en una pantalla grande no debería parecer una versión ampliada de un diseño para pantallas pequeñas. 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 cada factor de forma.
Esto significa que algunos elementos de la interfaz pueden verse muy diferentes según el contexto en el que se visualicen. Es posible que debas aplicar CSS muy diferentes a la misma base de código HTML para aprovechar al máximo los diferentes tamaños de pantalla. ¡Eso puede ser un gran desafío de diseño!
Estos son algunos de los desafíos habituales que puedes enfrentar.
Navegación
Mostrar una lista de vínculos de navegación es bastante sencillo en una pantalla grande. Hay suficiente espacio para incluir esos vínculos.
En una pantalla pequeña, el espacio es valioso. Cuando diseñas 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 deben seguir dos pasos para llegar a cualquier lugar: abrir el menú y, luego, elegir una opción. Hasta que se abre el menú, el usuario se pregunta "¿a dónde puedo ir?".
Intenta encontrar una estrategia que evite ocultar la navegación. Si tienes una cantidad relativamente pequeña de elementos, puedes aplicar un diseño a la navegación para que se vea bien en pantallas pequeñas.
Ese patrón no se adaptará si tu navegación tiene muchos vínculos. La navegación se verá desordenada si los vínculos se extienden a dos o tres líneas en una pantalla pequeña.
Una posible solución es mantener los vínculos en una sola línea, pero truncar la lista en el borde de la pantalla. Los usuarios pueden deslizar el dedo horizontalmente para revelar los vínculos que no se ven 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 los usuarios podrían perderse los vínculos que no son 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 y de indicar 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 la navegación de forma predeterminada y proporcionar un mecanismo de activación para que los usuarios muestren y oculten el contenido. Esto se llama divulgación progresiva.
Asegúrate de que el botón que activa o desactiva la visualización de la navegación esté etiquetado. No confíes en que se entenderá un ícono.
Un ícono sin etiqueta es una navegación de "carne misteriosa": los usuarios no sabrán qué hay allí hasta que lo prueben. Proporciona una etiqueta de texto para que los usuarios sepan qué mostrará el botón.
Carrusel
Lo que se aplica a la navegación también se aplica a otro contenido: intenta no ocultar nada. Un carrusel es un método común para ocultar contenido. Puede verse bastante ordenado, pero es muy probable que los usuarios nunca descubran el contenido oculto. Los carruseles son mejores para resolver problemas de organización, como qué contenido debe aparecer en la página principal, que para servir a los usuarios.
Dicho esto, cuando el espacio es limitado, 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 los 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 forma fluida. Gracias a scroll-snap-type: inline mandatory, los elementos se ajustan en su lugar.
Cuando la pantalla es lo suficientemente grande (más ancha 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));
}
}
Es fundamental que un elemento en la vista de carrusel no ocupe todo el ancho. Si lo hiciera, no habría ninguna indicación de que hay más contenido disponible más allá del borde de la ventana gráfica.
Los carruseles son otro ejemplo del patrón de desbordamiento en acción. Si tienes muchos elementos que las personas pueden explorar, puedes seguir usando el patrón de desbordamiento incluso en pantallas grandes, como las de las TVs. Este deslizador de medios usa varios carruseles para administrar una gran cantidad de opciones.
Una vez más, las propiedades scroll-snap garantizan que la interacción se sienta fluida. Además, observa que las imágenes del carrusel tienen aplicada la opción 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 desliza el dedo hasta ese elemento, la imagen no se descargará, lo que ahorra ancho de banda.
Con la incorporación de JavaScript, puedes agregar controles interactivos a un carrusel. Incluso puedes hacer que se desplace automáticamente por los elementos. Sin embargo, piénsalo bien antes de hacerlo. La reproducción automática podría funcionar si el carrusel es el único contenido de la página, pero un carrusel con reproducción automática es muy molesto si alguien intenta interactuar con otro contenido (como leer texto, por ejemplo). Puedes leer más sobre las prácticas recomendadas para los carruseles.
Tablas de datos
El elemento table es perfecto para estructurar datos tabulares, es decir, filas y columnas de información relacionada. Sin embargo, si la tabla se agranda demasiado, podría dañar el diseño de la pantalla pequeña.
Puedes aplicar el patrón de desbordamiento a las tablas. En este ejemplo, la tabla se une 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 solución para pantallas pequeñas, pero asegúrate de que quede claro que se puede acceder al contenido fuera de la pantalla. Considera colocar una sombra o un gradiente sobre el borde en el que se trunca el contenido.
La divulgación progresiva es una forma útil de ahorrar espacio, pero ten cuidado al usarla para contenido muy importante. Es más adecuada para las acciones secundarias. Asegúrate de que el elemento de la interfaz que activa la divulgación esté claramente etiquetado. No te bases solo en la iconografía.
Primero, diseña para pantallas más pequeñas. Es más fácil adaptar los diseños de pantallas pequeñas 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 para pantallas pequeñas se sienta como una idea secundaria.
Para obtener más patrones de diseño y elementos de la 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 determinar las dimensiones del dispositivo. Pero las funciones de medios, como min-width y min-height, son solo el comienzo. A continuación, descubrirás muchas otras funciones multimedia.