Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)
Recientemente he visto que esto pasa mucho, generalmente en sitios web con navegación fija en el lado izquierdo. Tendrán diseños encantadores y fluidos, que se extienden en pantallas anchas y se apilan en dispositivos más pequeños, pero aún así caerán en un punto de quiebre engañoso en el que pocas personas piensan. Me refiero a la altura de la ventana gráfica.
Por ejemplo
Permíteme darte un ejemplo. Este es un diseño adaptable simple; dos columnas que se comportan exactamente como esperas. Haz que el navegador se maximice y se minimice y verás lo que te quiero decir.
Este primer diseño es para dispositivos móviles, con los dos divs apilados uno encima del otro. Luego, se divide en columnas, con su columna izquierda fija, en pantallas con un ancho mínimo de 800px.
1 |
@media screen and (min-width: 800px) { |
2 |
}
|
El contenido principal se desplaza hacia arriba y hacia abajo, mientras que la primera columna permanece fija a la izquierda. Podemos colocar una navegación en la columna izquierda, tal vez un avatar, ese tipo de cosas.
Hay un problema
Todo parece estar bien, pero mira lo que sucede cuando minimizamos nuestro navegador verticalmente; la navegación se oculta y se vuelve inaccesible.
En realidad, no conozco a nadie que navegue así, pero aún así, no podemos asumir que una pantalla ancha también significa automáticamente una pantalla alta.
La solución
Las consultas de medios son capaces de identificar mucho más que el ancho de página; pueden reaccionar a pixel-density, orientation, si la pantalla es de color o monochrome, el aspect-ratio, un montón de cosas.
En este caso podemos confiar en la min-height directa, añadiendo una segunda condición a nuestra consulta de medios existente:
1 |
@media screen and (min-width: 800px) and (min-height: 500px) { |
2 |
}
|
Ahora, nuestra configuración de la columna izquierda fija solo tendrá el efecto una vez que la pantalla sea más ancha que 800px y al menos 500px de alto. Revisa la demostración y compruébalo tú mismo.
Otra solución
No tenemos que modificar completamente el diseño para que nuestro menú sea de fácil acceso. En su lugar, podríamos agregar una barra de desplazamiento separada a la columna de navegación cuando la ventana gráfica no sea lo suficientemente alta para revelarla toda, echa un vistazo.
1 |
@media screen and (max-height:500px) { |
2 |
.col-first { |
3 |
height: 100%; |
4 |
overflow: scroll; |
5 |
}
|
6 |
}
|
Se trata de resolver las cosas de la manera más adecuada.
Conclusión
Una ventana gráfica superficial puede restringir realmente lo que es visible en una página web. Mira cómo Gmail reduce el relleno de la tabla si hay menos espacio vertical:
Este ejemplo de Gmail demuestra que un punto de interrupción no tiene que significar que un diseño está roto, sino que lo ve como una oportunidad para mejorar las cosas.
En cualquier caso, espero que esto haya reiterado la importancia de no asumir nada en lo que se refiere a los puntos de quiebre. Haznos saber en los comentarios si alguna vez has utilizado consultas de medios min-height, ¡y para qué!
