¿Qué es un sitio responsivo y cómo funciona?

¿Qué es un sitio responsivo y cómo funciona? - Versión para impresión

+- Foro Anime - Sitio de Anime, Manga, Comics y Videojuegos. (https://foroanime.net)
+-- Foro: ZONA GENERAL (https://foroanime.net/Foro-ZONA-GENERAL)
+--- Foro: Off Topic (https://foroanime.net/Foro-Off-Topic)
+--- Tema: ¿Qué es un sitio responsivo y cómo funciona? (/Tema-%C2%BFQu%C3%A9-es-un-sitio-responsivo-y-c%C3%B3mo-funciona)

¿Qué es un sitio responsivo y cómo funciona? - Argi - 28-10-2021

Un sitio responsivo es aquél donde la web se adapta al ancho de la pantalla del dispositivo. Claro que es algo más que eso, como veremos más adelante, cuando lleguemos al tema de ahorrar datos.

La prueba de fuego para saber si un sitio web es responsivo es muy simple: achica el ancho de la ventana en tu PC de escritorio y, si no es responsivo, va a aparecerte una fea barra horizontal.

[Imagen: Ahs57.gif]

En esta tarea, ayudan las propiedades flexbox (de Caja Flexible). Hoy en día, es muy sencillo alinear elementos en un sitio web, cosa que no siempre fue así.

Anteriormente (y todavía quedan ciertos casos), los sitios grandes usaban un diseño adaptativo. Lo que quiere decir es que tenían varias vistas preparadas y te presentaban una, según el dispositivo desde el cual accedías al sitio. Era común que, para los móviles, te pusieran una dirección que empezaba con m., por ejemplo, ésta: https://m.youtube.com/watch?v=R-cJS23N4GQ. Eso significa que Youtube no le muestra el mismo sitio a todos; en cambio, tiene una versión distinta para presentar el sitio de acuerdo con el dispositivo detectado.

¿Podría hacerse de forma diferente? ¡Claro que sí! Pienso que Youtube la tiene difícil porque su sitio es de videos (contenido pesado) y por eso no se puede comportar igual. Para la inmensa mayoría, es mejor desarrollar un sitio para todos y no cargar en el dispositivo móvil lo que no sea necesario (o sea, un diseño responsive, no uno adaptativo). Los videos no se deben cargar hasta que el usuario decida que quiere verlos y no basta con esconderlos aplicando un "display: none", porque le consumirían datos igual, aunque no se vean. El contenido debe ser distinto, como un enlace o algún tipo de botón para cargarlo sólo si él lo pide. Pero ves que el botón o el enlace deben aparecer únicamente cuando es un móvil, así que sí o sí se necesita averiguar desde qué dispositivo se conecta el usuario. Y no es difícil porque el navegador nos provee de las herramientas para eso. Digo que no se necesita ninguna clase de código raro; basta con pedirle al navegador que nos diga esa información.

[Imagen: desktop-vs-mobile.png]

¿Cómo se podría aplicar un diseño responsive a ForoAnime? Primero, dejemos claro que esto es a modo de ejemplo y porque es un sitio que conocemos todos. Hay muchísimas cosas que están bien hechas, como el posicionamiento y los temas. Pero voy a poner una lista de cosas que pueden hacerse y, excepto por la primera, me voy a centrar en la responsividad.

Por cuestiones de seguridad, el sitio debería redirigir cuando alguien visita la ruta http hacia https. Esto de las rutas se maneja de forma sencilla (porque el servidor está tratando con peticiones todo el tiempo y simplemente debe responder al visitante de http mandándolo a la otra ruta con https). Por no complicar la explicación, apenas se escribe código para lograrlo. Y si no lo hacemos, cuando alguno escriba "foroanime.net" y de ENTER, llegará al sitio http. Si está diatraído o no sabe, no se va a cambiar a la versión segura https, y si tiene la mala suerte de que alguien esté haciendo sniffing a los datos que envía por wifi (interceptándolos), entonces esos datos no encriptados van a pasar a estar en manos del atacante, por ejemplo la contraseña del usuario.
Se debe usar matchMedia() para determinar si el dispositivo cumple o no con determinada condición (media query, "coincidencia de medios"). Esas media queries las recibe por parámetro matchMedia y tienen esta apariencia: "(min-width: 1024px)". Como ven, se refiere a un ancho mínimo de la pantalla de 1024 píxeles. Si se cumple o no, podemos saberlo gracias a matchMedia y tomar las medidas que queramos. También CSS tiene funcionalidad para las media queries. Bueno, lo importante es no cargar directamente ningún video y cosas parecidas que pesen mucho y, en su lugar, darle la decisión de cargarlo o ir a verlo al sitio.
Usar medidas relativas. Por ejemplo, en vez de volverse loco con los tamaños de fuente en píxeles, usar la unidad de medida rem, que significa el tamaño predeterminado de fuente (por defecto, 16px). El em también se usa en ciertas situaciones; es parecido pero no igual. También, hay otras útiles como vh y vw, que son la centésima parte de la pantalla del dispositivo, es decir, 100vh son el total de la altura de la pantalla (vh = viewport height) y 100vw, el total del ancho (vw = viewport width). No conviene medir en píxeles porque esto es muy variable, dependiendo del dispositivo.
Botón de ir para arriba, cuando "se scrollea" bastante (yo lo haría aparecer a los 150vh más o menos).
Menú hamburguesa: los usuarios adoran esto.

Puede ser que suene a mucho, pero siempre se están midiendo con el peso de las imágenes así que pensé que hay varias cosas mejores que controlar y se puede hacer directamente desde la vista que se le presenta al usuario. Insisto en que es un ejemplo nada más y así vemos cómo es la responsividad.

RE: ¿Qué es un sitio responsivo y cómo funciona? - Cruyff - 28-10-2021

Me encanta cómo lo explicás y sobre todo el final, jaja.
Noté la diferencia de un tipo de sitio a otro pero no sabía cómo se llamaba, en realidad ni que tenía nombre.