Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

Consejo rápido: considera los “break points” verticales

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Miguel Velazquez (you can also view the original English article)

He visto esto pasar algunas veces recientemente; usualmente en sitios con navegación fija en el lado izquierdo. Tienen un layout fluido que se estira a lo ancho de la pantalla y se apila en pantallas más chicas, pero siguen fallando en un “break point” del cual poca gente piensa. Hablo de la altura de la ventana.

Por Ejemplo

Dejame darte un ejemplo. Aquí está un layout responsivo; dos columnas que se comportan exactamente como esperarías. Expande y reduce la ventana del navegador y verás de lo que hablo.

A couple of layouts dependant on the viewport width
Un par de layouts que dependen de la anchura de la ventana

Este layout empieza enfocado a dispositivos móviles, con los dos divs apilados uno arriba del otro. Luego se dividen en columnas, con la columna izquierda fija en pantallas de una anchura mínima de 800px.

El contenido principal se desplaza de arriba a abajo, mientras que la primera columna se mantiene fija a la izquierda. Podríamos introducir una navegación en la columna izquierda, quizás un avatar, o algo por estilo.

Pero hay un Problema

Todo aparenta estar bien, pero mira lo que pasa cuando reducimos el navegador verticalmente; la navegación empieza a ocultarse y es inaccesible.

The main content scrolls but I cant click on the lower menu items
El contenido principal se desplaza pero en el menú, ¡no puedo hacer click en los links de más abajo!

No sé de nadie que navegue de esta forma, pero aún así, no podemos asumir que una pantalla ancha significa automáticamente una pantalla alta.

La Solución

Los media queries son capaces de identificar mucho más que sólo lo ancho de la página; también pueden reaccionar a la densidad del pixel pixel-density, orientación orientation, si la pantalla es a color o mono-cromática monochrome, relación de aspecto aspect-ratio, muchas cosas

En este caso podemos apoyarnos directamente en el min-height, agregando una segunda condición a nuestra media query existente:

Ahora nuestro layout de columna fija a la izquierda solo tendrá efecto cuando la pantalla sea más ancha que 800px y (and) por lo menos 500px de alta. Revisa el demo y mira por ti mismo.

Otra Solución

No tenemos que alterar completamente el layout para hacer nuestro menú accesible. En lugar de eso, podríamos agregar una barra de desplazamiento a la columna de navegación cuando la ventana no sea lo suficientemente alta para revelar toda la navegación, dale un vistazo.

vertical-break-point-scroll

Se trata de resolver las cosas en la manera más apropiada

Conclusión

Una ventana delgada realmente restringe lo que está visible en la página web. Mira como Gmail reduce el padding de la tabla si hay menor visibilidad vertical:

Normal spacing
Espacio vertical normal
Shrunken rows if theres less vertical space thanks to a min-height media query
Filas más delgadas si hay menos espacio vertical.

Este ejemplo de Gmail prueba que un punto de interrupción no significa que el layout esté averiado, mejor tómalo como una oportunidad de mejorar las cosas.

De cualquier manera, espero que esto haya reiterado la importancia de no asumir nada en lo que concierne con puntos de interrupción. ¡Déjanos saber en los comentarios si alguna vez usaste media queries con min-height, y por qué las usaste!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
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.