Cuando se trabaja en un sitio web, no es muy correcto hacer ciertas suposiciones sin depender de datos reales. Por tanto, es muy importante asumir la responsabilidad de comprobar los sitios en las ventanas del navegador de diferentes anchos y alturas.
¿Por qué consultar páginas en ventanas de navegador de diferentes alturas?
Buena pregunta. Antes de pasar a los ejemplos y escenarios para el uso de estos controles, me gustaría hablar sobre los problemas que ocurren con los sitios que no están adaptados para trabajar en puntos de vista de diferentes alturas. Esto le ayudará a comprender mejor lo que sucederá a continuación.
Hacer suposiciones incorrectas sobre cómo se utilizará un sitio web es uno de los factores más importantes que afectan negativamente el trabajo de un diseñador web. Por ejemplo, sería incorrecto esperar que el sitio se use expandiendo el navegador a pantalla completa. En cambio, debes contar con lo peor.
Supuestos y realidad Lo
anterior es una ilustración de mis palabras. En realidad, no todos los usuarios trabajan con navegadores como sugiere el diseñador. Yo mismo me he encontrado con sitios que se ven mal en las ventanas del navegador con una altura reducida.
Herramientas para desarrolladores de navegadores
Cambiar el tamaño del navegador verticalmente no es la única forma de afectar la altura de la ventana gráfica. Entonces, por ejemplo, cuando se abre la barra de herramientas del desarrollador, también elimina parte del espacio vertical.
La barra de herramientas del desarrollador ocupa parte de la ventana del navegador.
Abrir las herramientas del desarrollador puede romper el diseño de su sitio o arrojar luz sobre problemas que nadie esperaba que aparecieran. El área resaltada de la imagen representa la altura actual de la ventana gráfica. Si abre las herramientas de desarrollo mientras visualiza el sitio en una pantalla de computadora portátil pequeña, solo se verá una pequeña área de la página.
Pensemos en una pregunta importante: "¿Es posible mejorar la experiencia del usuario del sitio mientras lo visualiza en una pequeña ventana del navegador?" Puedo dar una respuesta positiva a esta pregunta. Supongo que la teoría es suficiente para nosotros. Aprendamos un enfoque "vertical" para diseñar páginas.
CSS "vertical"
Algunos diseñadores y desarrolladores se centran en la apariencia de la página, que acepta en ventanas de diferentes anchos. Al mismo tiempo, eclipsan el estudio del comportamiento de las páginas en ventanas de diferentes alturas. Y esto es muy importante. Por ejemplo, alguien está trabajando en el diseño de una página y se le han dado instrucciones sobre cómo debe verse un componente en ventanas de navegador de diferentes anchos. ¿Qué pasa con las ventanas de diferentes alturas?
En un teléfono grande, los elementos de navegación llenan el espacio vertical disponible. En un teléfono mediano, el tamaño de fuente y el espaciado se reducen. En un teléfono pequeño, no hay suficiente espacio vertical para mostrar todos los elementos. Por tanto, se colocan en 2 columnas.
Esta figura muestra un menú de navegación que ajusta su apariencia a la altura de la ventana gráfica. El objetivo del diseñador es que el menú llene todo el espacio disponible para él. En pantallas más pequeñas, el tamaño de fuente y el espacio entre los elementos del menú disminuye. Si la pantalla del teléfono es muy pequeña (por ejemplo, como el iPhone 5), los elementos se muestran en dos columnas. Estos escenarios de uso del sitio a menudo se pasan por alto. Como resultado, los sitios no se adaptan en absoluto para trabajar en pantallas de diferentes alturas o solo las optimizan cuando algún visitante del sitio informa de un problema.
CSS puede ayudarnos a ajustar el sitio a diferentes alturas de ventana gráfica. Es decir, estamos hablando de dos técnicas principales:
- Consultas de medios basadas en la altura de la ventana gráfica.
- La unidad de medida relacionada con la ventana gráfica.
Consultas de medios que tienen en cuenta la altura de la ventana gráfica
Como probablemente ya sepa, puede usar consultas de medios en CSS que tengan en cuenta el ancho de la ventana gráfica:
@media (min-width: 700px) {
.element {
/* do something.. */
}
}
Pero las consultas de medios que tienen en cuenta la altura de las ventanas del navegador son mucho menos comunes:
@media (min-height: 500px) {
.element {
/* do something.. */
}
}
/* */
@media (orientation: landscape) {
.element {
/* do something.. */
}
}
Unidades de medida relacionadas con la ventana gráfica
El uso de unidades de medida relacionadas con el tamaño de la ventana gráfica puede ayudar a mejorar la experiencia del usuario en los sitios. Por ejemplo, teniendo en cuenta la altura de la ventana gráfica, puede ajustar la distancia vertical entre elementos.
.hero__title {
margin-bottom: calc(10px + 5vh);
}
Cuanto más alta sea la ventana del navegador, mayor será la distancia entre los elementos.
Todo esto puede parecer una cosita agradable que en realidad no afecta nada, pero solo hasta que miras una página similar en un monitor grande, como una pantalla iMac de 27 pulgadas. Entonces resulta que la altura de la ventana gráfica es demasiado alta. Pero afortunadamente tenemos una forma de limitar el tamaño
margin-bottom. Esto se puede hacer, por ejemplo, de las siguientes formas:
- Uso de consultas de medios.
- Utilizando funciones de comparación CSS.
El primer método (consulta de medios) ciertamente tiene un mejor soporte de navegador. Su esencia es limitar el valor máximo
margin-bottomen los casos en que la página se muestra en pantallas muy grandes.
@media (min-width: 2200px) {
.hero__title {
margin-bottom: 40px;
}
}
La segunda forma es utilizar una función CSS
clamp(). Al elegir los valores pasados a esta función, en este caso, establecemos el tamaño mínimo de sangría igual a 10px, el máximo - 50px, y los valores entre estos dos dependen del tamaño de la ventana del navegador.
.hero__title {
margin-bottom: clamp(10px, 5vh, 40px);
}
Si está interesado en este tema, eche un vistazo a mis artículos sobre unidades de medida según el tamaño de la ventana gráfica de la página y las funciones CSS .
A continuación, hablaremos de las diferentes formas en que puede utilizar las consultas de medios "verticales".
Ejemplos y escenarios
▍Elementos de la página que se superponen al cambiar la altura de la ventana del navegador
Este ejemplo muestra una página que tiene un título y una ilustración en la sección superior. La altura de esta parte de la página es
100vhigual al 100% de la altura de la ventana gráfica.
La parte superior de la página con una altura de 100vh
Todo se ve muy bien, pero solo hasta que la altura de la ventana del navegador disminuya. La parte superior de la página no es lo suficientemente alta para acomodar la ilustración y el texto. Como resultado, los elementos en la parte superior de la página se superpondrán al contenido de otras secciones de la página.
Disminuir la altura de la ventana del navegador rompe el diseño.
Observe cómo las imágenes se superponen con la sección de la página debajo de la parte superior de la página. Esto sucede debido al hecho de que no tienen suficiente espacio. Echemos un vistazo al código de este ejemplo.
Aquí está el marcado:
<div class="hero">
<div class="hero__wrapper">
<div class="hero__content"><!-- content --></div>
<img class="hero__thumb" src="figure.png" alt="" />
</div>
</div>
Estos son los estilos:
.hero {
height: 100vh;
}
.hero__thumb {
flex: 0 0 550px;
width: 550px;
}
Consideremos varias opciones para resolver tales problemas:
- Puede darle a la imagen dimensiones fijas (propiedades
widthyheight), no solo su ancho (width). La falta de propiedadheightes una de las razones de nuestro problema. - Puede aplicar la propiedad a la sección superior de la página
height: 100vhsolo si la altura de la ventana gráfica es mayor700px(por supuesto, los valores específicos utilizados en la consulta de medios dependerán de cada situación).
Puede combinar ambos enfoques y obtener una solución más confiable para tales problemas:
.hero__thumb {
width: 400px;
height: 300px;
object-fit: contain; /* */
}
@media (min-height: 700px) {
.hero {
height: 100vh;
}
}
Así que decidimos que las consultas de medios "verticales" son un mecanismo estable y útil. Pero usar un valor
100vhes un negocio arriesgado, porque incluso si puede limitar el tamaño de la imagen, puede suceder que el tamaño del texto no se pueda limitar. Por ejemplo, si el texto de la parte superior de la página resulta ser más largo, entonces nos enfrentaremos a una nueva variante del problema que ya conocemos.
El texto se superpone a una sección del sitio donde no debería estar.
Para solucionar este problema, puedes
heightusar una propiedad enlugar de unapropiedadmin-height. Con este enfoque, si el contenido de una sección es más grande de lo que puede contener, su tamaño aumentará y su contenido no cubrirá la siguiente sección.
@media (min-height: 700px) {
.hero {
min-height: 100vh;
}
}
▍Título de página fijo
No hay nada de malo en que el título de la página permanezca en un lugar cuando se desplaza. Pero debe asegurarse de que este título tenga una posición fija solo si hay suficiente espacio vertical en la pantalla.
Título de página fijo
Esto muestra el sitio que se está viendo en modo horizontal. Tenga en cuenta que el título ocupa demasiado espacio vertical. ¿Es importante para el usuario? En la mayoría de los casos, no. Pero puede mejorar la experiencia del usuario al trabajar con el sitio recurriendo a la siguiente consulta de medios:
@media (min-height: 700px) {
.site-header {
/* position: fixed position: sticky */
}
}
Con este enfoque en modo horizontal, el título no se arreglará.
▍ Ocultar elementos que son menos importantes que otros
Noté esto en el menú de navegación de Twitter. Es decir, estamos hablando de una combinación de consultas de medios "verticales" y el patrón Prioridad + .
Los elementos seleccionados se ocultarán si se quedan sin espacio.
Cuando cambia la altura de la ventana gráfica, los elementos menos importantes (elementos del menú
BookmarksyLists) se convierten en subelementosMore. Este es un buen ejemplo del uso de consultas de medios "verticales".
.nav__item--secondary {
display: none;
}
@media (min-height: 700px) {
.nav__item--secondary {
display: block;
}
}
Y aquí está mi tweet, que analiza la aplicación de este enfoque en Twitter.
▍ Navegación y cambio de altura de la ventana gráfica
El siguiente ejemplo está relacionado con el anterior. Hay una barra de navegación vertical (barra lateral, barra lateral). Si la altura de la ventana gráfica es baja, puede reducir ligeramente la distancia vertical entre los elementos de navegación, lo que mejorará ligeramente la apariencia de la página.
Espaciado entre elementos y altura de la ventana gráfica
Estos son los estilos para este ejemplo:
.nav__item {
padding-top: 4px;
padding-bottom: 4px;
}
@media (min-height: 700px) {
.nav__item {
padding-top: 10px;
padding-bottom: 10px;
}
}
Y aquí puedes ver un video.
Además, se puede observar que en tal situación, el tamaño de la fuente también se puede modificar, lo que, cuando se reduce la altura de la ventana del navegador, dará aún más espacio para los elementos.
▍ Sección superior de la página y altura de la ventana gráfica
La sección superior de la página necesita algo de espacio vertical libre para darle algo de "aire". Las dimensiones de este espacio pueden depender de la altura de la ventana gráfica.
Cuanto más alta sea la página, más "aire".
Así es como se ven los estilos para este ejemplo:
.hero {
padding-top: 24px;
padding-bottom: 24px;
}
@media (min-height: 700px) {
.hero {
padding-top: 40px;
padding-bottom: 40px;
}
}
▍Componentes modales
Como ya sabrá, se espera que los componentes modales estén al menos centrados horizontalmente. Pero puede ser necesario alinear dicho elemento verticalmente. Esto es posible, pero se interpone en el camino de cambiar la cantidad de salida de datos por dichos elementos.
Si el modal contiene la cantidad correcta de datos, entonces se ve muy bien como se muestra a continuación.
Elemento modal correcto
Estos son los estilos para este elemento:
.modal__body {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 500px;
}
Pero si es necesario mostrar más texto en el mismo elemento, no todo será tan bueno. Es decir, el elemento llenará la pantalla verticalmente y el usuario no podrá desplazarse por su contenido.
Elemento modal demasiado alto
Este problema se produce por las siguientes razones:
- El modal no tiene altura especificada.
- El elemento está centrado verticalmente (esto acelerará el problema).
Aquí está el CSS que aborda estos problemas:
.modal__body {
position: absolute;
left: 50%;
top: 3rem;
transform: translateX(-50%);
width: 500px;
min-height: 200px;
max-height: 500px;
overflow-y: auto;
}
@media (min-height: 700px) {
.modal__body {
top: 50%;
transform: translate(-50%, -50%);
}
}
Tenga en cuenta que las propiedades
min-heighty se utilizan aquí min-width. La primera es hacer que el elemento se vea bien incluso cuando muestra texto corto. Y el segundo le permite limitar su altura a un valor dado en lugar de darle una altura constante.
Elemento modal adecuado para mostrar textos largos
Salir
Al diseñar sitios web teniendo en cuenta la experiencia que los usuarios obtendrán al trabajar con ellos, es mejor construir su diseño en función del ancho y alto de la ventana del navegador. Puede parecer extraño para alguien que pruebe páginas en ventanas de diferentes alturas, pero esa prueba se justifica por sí sola. Aquí hablé sobre la importancia de un enfoque "vertical" para el diseño de sitios, cómo diseñar páginas para mostrarlas correctamente en ventanas gráficas de diferentes alturas, y miré ejemplos. Espero que encuentre todo esto útil.
¿Está prestando atención al aspecto de las páginas web que crea en las ventanas del navegador de diferentes alturas?
