7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Responsive Web Design

Consejo rápido: Recuerda los puntos de quiebre verticales

Scroll to top
Read Time: 3 mins

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.

A couple of layouts dependant on the viewport widthA couple of layouts dependant on the viewport widthA couple of layouts dependant on the viewport width
Un par de diseños, dependiendo del ancho de la ventana gráfica

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.

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.

The main content scrolls but I cant click on the lower menu itemsThe main content scrolls but I cant click on the lower menu itemsThe main content scrolls but I cant click on the lower menu items
El contenido principal se desplaza, ¡pero no puedo hacer clic en los elementos del menú inferior!

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:

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.

vertical-break-point-scrollvertical-break-point-scrollvertical-break-point-scroll

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:

Normal spacingNormal spacingNormal spacing
Espaciado normal
Shrunken rows if theres less vertical space thanks to a min-height media queryShrunken rows if theres less vertical space thanks to a min-height media queryShrunken rows if theres less vertical space thanks to a min-height media query
Filas reducidas 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é!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.