¿Cómo lidiar con los límites de resolución en sitios responsivos?
Un sitio web responsivo vende la idea de adaptarse a todo tipo de resolución. Pero, ¿realmente es a todo tipo? ¿Y los extremos? ¿Pantallas muy pequeñas y pantallas muy grandes? ¿Cómo tratar? O mejor dicho, ¿cómo adoptar una estrategia pragmática al respecto?
Entendiendo los sitios únicos y responsivos
Los sitios web únicos responsivos son una respuesta a la práctica que teníamos antes de "crear un sitio web para cada dispositivo". La idea era que en el pasado la gente creaba diferentes sitios web para dispositivos móviles, computadoras de escritorio e incluso tabletas (los famosos sitios web m.).
Y eso en la práctica es imposible de hacer. Hay muchos dispositivos diferentes. Por eso preferimos la idea de un sitio web único que se adapte a diferentes resoluciones de pantalla.
Esta adaptación se realiza con diseño responsivo:
- un diseño base con pequeñas adaptaciones realizadas en las media queries.
Sitios responsivos en el mundo ideal
En el mundo ideal, todos los sitios del mundo deberían adaptarse a todas las resoluciones del mundo. Ese sería un mega responsivo ideal. Eso nadie lo hace.
En la práctica, hemos establecido límites que nuestro sitio web debe soportar. Esto está dentro de los límites de nuestro público y lo que creemos que es una prioridad hoy.
Lo veo de la misma manera que hoy en día ningún sitio web es compatible con IE4 más; no tiene sentido. En el mundo ideal, admitiríamos todos los navegadores y resoluciones de pantalla posibles.
Entonces, ¿qué debo hacer en el mundo real?
En el mundo real, priorizamos soportar tanto como sea posible dentro de los criterios del proyecto.
Entonces, como no es posible admitir todos los tamaños de pantalla (este número sería infinito), es común establecer un valor máximo para admitirlo.
Entonces, el sitio web de Alura, por ejemplo, no queda bien en 2000px. Y, tampoco se ve bien en pantallas pequeñas de 200px.
El sitio es responsivo entre los límites de 320px y 1400px.
Fuera de ellos, se ve mal.Incluso me gusta hacer explícitos estos límites en código para dejar muy claro el rango de resoluciones que admite ese proyecto (y, nuevamente, cada proyecto debe priorizar a su manera):
html {
min-width: 320px;
max-width: 1400px;
}
En Alura tenemos cursos de Front-end que fueron pensados para que comiences desde cero y te conviertas en un profesional de vanguardia. Es una guía de estudios con un paso a paso pensado con cariño por el equipo de Alura.