El GIF animado muestra lo que sucede en Invidious cuando reduzco la ventana del navegador en un par de píxeles.
El diseño de los elementos en la página cambia por completo: el diseño original de tres columnas cambia repentinamente a un diseño de una columna, y lo primero es el contenido de esa pequeña columna que estaba ubicada en el borde izquierdo y contenía información completamente sin importancia.
Estoy seguro de que no soy el único que a menudo se encuentra con esto. Personalmente, me gusta cuando las ventanas de mi navegador son lo suficientemente estrechas, pero en los últimos diez años, las páginas web han comenzado a reaccionar a esta preferencia como si quisiera una versión móvil y funcionalmente simplificada de la página. Aquí hay un gran problema, y no solo uno.
Iluminación espacial de gas
Uno de los conceptos fundamentales detrás del diseño de Macintosh, la primera interfaz gráfica de usuario verdaderamente centrada en el cliente, es la idea de organizar espacialmente las interacciones hombre-máquina cuando se trabaja con una computadora. El usuario se liberó de la necesidad de memorizar comandos de texto para organizar los archivos en el disco, y le brindó la oportunidad de mezclar los archivos para que fuera visual y, aquí está, la información, para recordar su posición, como si estuviera en espacio. El usuario puede recordar dónde puso el archivo, y no es tan importante cómo se llama el archivo . Así es como recordamos dónde ponemos la billetera, llaves o documento importante.
Esta idea de orientación espacial es fundamental para el diseño de cualquier interfaz de usuario y diseño web en particular. Cuando un usuario visita su sitio una y otra vez, gradualmente descubre cómo funciona todo aquí. Cuanto más tiempo dedique a diseñar su sitio, los usuarios podrán administrarlo de manera más eficiente y más les gustará su sitio. ¿Alguna vez te has preguntado por qué hay tantos escándalos de alto perfil en la web relacionados con el rediseño? Aquí tienes tu respuesta. A los usuarios no les gusta cuando los esfuerzos que realizan para dominar el sitio se tachan por capricho del diseñador, que el diseñador simplemente se aburre con el sitio anterior.
Este es exactamente el problema que tengo con el diseño receptivo. La mayoría de las implementaciones de diseño receptivo son esencialmente como rediseñar su sitio cada vez que el usuario cambia el tamaño de la ventana. El ejemplo más atroz de este tipo es cuando una barra de menú horizontal se convierte en una vertical. ¡Todo lo que el usuario logró recordar visualmente sobre la ubicación de los enlaces en el panel vuela hacia la tubería! ¿Pensaste que esta opción estaba oculta aquí? ¡No, ella está ahí!
Incoherencia entre sitios
Pero incluso si a los usuarios no les gusta el diseño receptivo, no hay forma de evitarlo. Muchos ejemplos del llamado diseño receptivo se implementan usando consultas de medios usando CSS, esencialmente declaraciones condicionales que le dicen al navegador que aplique un conjunto de reglas CSS cuando se cumplen ciertas condiciones, por ejemplo, si el ancho de la ventana del navegador excede o no exceder un número especificado de píxeles ... El número exacto en este caso lo elige el diseñador web; en consecuencia, dos diseñadores web diferentes casi nunca eligen el mismo ancho.
Creo que todos estarán de acuerdo en que en una PC de escritorio, preferimos ver la mayoría de las páginas web en un diseño de ancho completo. Hay excepciones en las que la versión reducida de la página es más conveniente., pero son raros, si no aislados. Como regla general, trabajar con una página web de ancho completo es mucho más agradable y fácil.
Para no tener que lidiar con versiones reducidas de páginas web, el usuario tiene que ajustar el ancho de la ventana del navegador él mismo, asegurándose de que la página se ajuste a toda la ventana. Pero, dado que dos diseñadores web casi nunca especificarán el mismo ancho en sus consultas de medios, es imposible que un usuario coincida con un ancho de ventana que esté garantizado para adaptarse a una versión completa de cualquier página web, a menos que el usuario se rinda y esté satisfecho. .modo de pantalla completa o una ventana demasiado ancha. Sin embargo, es importante para el usuario no solo tener acceso a las versiones completas de las páginas web, sino también mantener muchas ventanas en el alcance a la vez, y por esta razón el ancho de una ventana individual debe ser limitado.
Parece por qué el usuario simplemente no ajusta el tamaño de la ventana si llega a una página web que requiere una ventana más amplia para ver. Después de todo, así es como tenía que actuar el usuario antes de la llegada del diseño receptivo, cuando era posible simplemente cambiar entre páginas web con un ancho fijo determinado. Pero la realidad no es tan simple: en las páginas que no responden, está bastante claro si es necesario cambiar el tamaño de la ventana para que quepa en toda la página. Y en una página web receptiva, nada le dice al usuario: "¡Oye! La página completa no cabe en una ventana como la tuya ahora ". No hay barra de desplazamiento ni recorte de contenido; en el mejor de los casos (o, supongo, peor) hay un menú de hamburguesas o alguna otra interfaz extraña "similar a un móvil".
¿Qué debe hacer el usuario?
Supone la idea de que el usuario podría resolver este problema desactivando el soporte para consultas de medios en el navegador. ¡Si sólo fuera así de simple! La raíz del problema es que es una práctica común entre los diseñadores web asignar un diseño de ancho completo a una consulta de medios y ofrecer una versión móvil de forma predeterminada . Al deshabilitar las consultas de medios, obtendremos exactamente el resultado opuesto en dichas páginas.
Sería más racional forzar de alguna manera al navegador a dar el mismo ancho definido por el usuario a las hojas de estilo y scripts en todas las páginas web. Esto es deseable, aunque solo sea por razones de privacidad.
La solución ideal es proporcionar la capacidad de identificar una consulta de medios (si existe) que habilitaría el ancho completo para el sitio y activarla, mientras que deshabilita todas las otras consultas de medios relacionadas con la selección del ancho de la ventana. Esto podría potencialmente hacerse como una extensión del navegador usando JavaScript que analiza todas las consultas de medios en la hoja de estilo, eliminándolas selectivamente según sea necesario.
¿Qué debe hacer un diseñador web?
Dejé esta sección para el final porque es la más importante. Todo lo anterior nos lleva a una conclusión simple: los diseñadores web deben pensar detenidamente cómo implementar el diseño receptivo .
Es cierto que, en un nivel superior, uno debería preguntarse cuál es el significado general del diseño receptivo. Definitivamente, este diseño es muy útil: los usuarios modernos acceden a Internet desde una amplia variedad de dispositivos con diferentes anchos de pantalla, y este problema se resuelve con la ayuda del diseño receptivo. Pero quizás el problema con el diseño receptivo es la generalización excesiva de dicha solución. Está diseñado para admitir todos los tamaños de pantalla imaginables, pero ¿son las pantallas realmente tan diversas? Por el contrario, están estandarizados y subdivididos en pocas categorías fácilmente identificables. Como estos:
- PC de escritorio / portátil
- La tableta
- Teléfono inteligente
¿No sería mucho más conveniente para el usuario si el diseño del sitio se hiciera por separado para cada uno de estos tamaños de pantalla? Entonces, el usuario podría dedicar un tiempo útil a aprender la interfaz del sitio, ya que se vería consistente en todos los dispositivos del mismo tipo.
No puedo creer que esté diciendo esto, pero sería mejor volver a detectar el agente de usuario, de una forma u otra:
let mobile = navigator.userAgent.match(/Mobi/); let ipad = navigator.userAgent.match(/iPad/); let android = navigator.userAgent.match(/Android/); if (mobile && !ipad) this is a phone else if (ipad || android) this is a tablet
El código anterior puede estar incompleto, pero creo que cubre muchas cosas básicas. Solo asegúrese de usar la versión para PC del sitio de forma predeterminada, ya que no todos los navegadores de PC son compatibles con JavaScript de manera uniforme, pero todos los teléfonos inteligentes y tabletas sí lo hacen.
Nuestros servidores se pueden utilizar para el desarrollo y alojamiento de sitios web.
Regístrese usando el enlace de arriba o haciendo clic en el banner y obtenga un 10% de descuento durante el primer mes de alquiler de un servidor de cualquier configuración.
