Una breve historia del diseño web receptivo

Vistas: 30
0 0
Tiempo de lectura:6 Minutos, 39 Segundos

Los sitios web no siempre han sido tan adaptables como lo son hoy. Para los diseñadores modernos, la “capacidad de respuesta” es uno de los determinantes más importantes de un buen diseño. Después de todo, ahora atendemos a muchos usuarios que cambian con frecuencia entre dispositivos móviles y de escritorio con diferentes tamaños de pantalla.

Sin embargo, la transición al diseño receptivo no sucedió de la noche a la mañana. A lo largo de los años, hemos estado modificando el concepto de “diseño web receptivo” para finalmente llegar a la etapa en la que nos encontramos hoy.

Hoy echamos un vistazo más de cerca a la historia del diseño web receptivo.

¿Cómo empezó el diseño web?

Cuando se crearon los primeros sitios web, nadie estaba preocupado por la capacidad de respuesta en diferentes pantallas. Todos los sitios fueron diseñados con las mismas plantillas y los desarrolladores no dedicaron mucho tiempo a conceptos como diseño, diseño y tipografía.

Incluso cuando la tecnología CSS comenzó a adoptarse más ampliamente, la mayoría de los desarrolladores no tuvieron que preocuparse demasiado por adaptar el contenido a diferentes tamaños de pantalla. Sin embargo, todavía encontraron varias formas de trabajar con diferentes monitores y tamaños de navegador.

Diseños líquidos

Las dos principales opciones de diseño disponibles para los desarrolladores en los primeros días eran Ancho fijo o Diseño fluido.

Con diseños de ancho fijo, es más probable que el diseño se rompa si su monitor no tiene exactamente la misma resolución que el que se utilizó para diseñar el sitio. Puedes ver un ejemplo aquí.

Además, los diseños receptivos, acuñados por Glenn Davis, se consideraron uno de los primeros ejemplos revolucionarios de diseño web receptivo.

Los diseños fluidos pueden adaptarse a diferentes resoluciones de monitor y tamaños de navegador. Sin embargo, el contenido también podría desbordarse y el texto a menudo se rompería en pantallas más pequeñas.

Diseños dependientes de la resolución

En 2004, una publicación de blog de Cameron Adams introdujo un nuevo método de uso de JavaScript para reemplazar las hojas de estilo según el tamaño de la ventana del navegador. Esta técnica se conoció como “diseños dependientes de la resolución”. Aunque requirieron más trabajo de los desarrolladores, los diseños sensibles a la resolución permitieron un control más preciso sobre el diseño del sitio.

El diseño basado en resolución básicamente funcionó como una versión anterior de los puntos de interrupción de CSS antes de que se convirtieran en algo especial. La desventaja era que los desarrolladores tenían que crear diferentes hojas de estilo para cada resolución de destino y hacer que JavaScript funcionara en todos los navegadores.

Había tantos navegadores en ese momento, y jQuery se estaba volviendo cada vez más popular como una forma de abstraer las diferencias entre las opciones del navegador.

Crecimiento de subdominios móviles

La introducción de conceptos como el diseño consciente de la resolución ocurrió casi al mismo tiempo que muchos dispositivos móviles se estaban volviendo más accesibles a la web. Las empresas estaban creando navegadores para sus teléfonos inteligentes y, de repente, los desarrolladores también tuvieron que tenerlos en cuenta.

Aunque los subdominios móviles estaban destinados a ofrecer a los usuarios la misma funcionalidad que el sitio de escritorio en un teléfono inteligente, eran aplicaciones completamente independientes.

Tener un subdominio móvil, si bien fue un desafío, tuvo algunos beneficios, como permitir a los desarrolladores orientar específicamente el SEO para dispositivos móviles y generar más tráfico a las variaciones del sitio móvil. Sin embargo, al mismo tiempo, los desarrolladores necesitaban administrar dos variaciones del mismo sitio web.

En un momento en que Apple acababa de presentar su primer iPad, innumerables diseñadores web todavía confiaban en esta estrategia anticuada y torpe para hacer que un sitio web fuera accesible en cualquier dispositivo. A fines de la década de 2000, los desarrolladores a menudo se basaban en una serie de trucos para hacer que los sitios móviles fueran más accesibles. Por ejemplo, incluso los diseños simples usaban el truco max-width: 100% para imágenes receptivas.

Afortunadamente, las cosas empezaron a cambiar cuando Ethan Marcotte acuñó el término “diseño web receptivo” en A List Apart. Este artículo llamó la atención sobre la exploración de John Allsopp de los principios arquitectónicos del diseño web y allanó el camino para los sitios web todo en uno que pueden funcionar igual de bien en cualquier dispositivo.

Una nueva era de diseño web receptivo

El artículo de Marcotta presenta tres componentes críticos que los desarrolladores deben tener en cuenta al crear un sitio web receptivo: cuadrículas receptivas, consultas de medios e imágenes receptivas.

rejillas liquidas

El concepto de cuadrículas flexibles introdujo la idea de que los sitios web deberían poder usar diferentes columnas flexibles que crecen o se reducen según el tamaño de la pantalla actual.

En los dispositivos móviles, esto significaba introducir una o dos columnas flexibles de contenido, mientras que los dispositivos de escritorio normalmente podían mostrar más columnas (debido a más espacio).

Imágenes flexibles

Las imágenes flexibles introdujeron la idea de que, al igual que el contenido, las imágenes deberían poder crecer o reducirse junto con la cuadrícula cambiante en la que se colocan. Como se mencionó anteriormente, los desarrolladores han usado previamente el llamado truco de “ancho máximo” para hacer esto posible.

Si estuviera almacenando una imagen en un contenedor, podría desbordarse fácilmente, especialmente si el contenedor respondía. Sin embargo, si establece “max-width” al 100%, la imagen simplemente cambiará de tamaño junto con su contenedor principal.

Preguntas de los medios

La idea de “consultas de medios” se refería a las consultas de medios CSS introducidas en 2010 pero que no se adoptaron ampliamente hasta que se publicaron oficialmente como una recomendación W3 2 años después. Las consultas de medios son esencialmente reglas CSS que se activan en función de parámetros como el tipo de medio (impresión, pantalla, etc.) y las características del medio (alto, ancho, etc.).

Aunque eran más simples en ese momento, estas solicitudes permitieron a los desarrolladores implementar esencialmente un tipo simple de punto de interrupción, el tipo de herramientas que se utilizan en el diseño receptivo en la actualidad. Los puntos de interrupción se refieren a cuando los sitios web cambian su diseño o estilo en función del ancho de la ventana del navegador o del dispositivo.

En la mayoría de los casos, se deben usar etiquetas meta de ventana gráfica para que las consultas de medios funcionen como los desarrolladores modernos esperan que lo hagan.

El auge del diseño móvil

Desde que Marcotte introdujo el diseño web receptivo, los desarrolladores han estado trabajando en nuevas formas de implementar esta idea de la manera más efectiva posible. La mayoría de los desarrolladores ahora se dividen en dos categorías en función de si consideran principalmente las necesidades del usuario de escritorio o las necesidades del usuario móvil. La tendencia se está acelerando cada vez más hacia lo último.

Al diseñar un sitio web desde cero en la era de la navegación móvil, la mayoría de los desarrolladores creen que los dispositivos móviles son la mejor opción. El diseño móvil suele ser mucho más simple y minimalista, lo que está en línea con muchas de las tendencias de diseño web actuales.

Tomar la primera ruta móvil significa evaluar primero las necesidades de un sitio web en términos de dispositivos móviles. Usted escribiría sus estilos normalmente usando puntos de interrupción una vez que comience a crear diseños de escritorio y tabletas. Alternativamente, si elige el enfoque centrado en el escritorio, tendrá que adaptarlo constantemente a dispositivos más pequeños con puntos de interrupción de su elección.

Explorando el futuro del diseño web receptivo

El diseño web receptivo todavía no es perfecto. Existen innumerables sitios que aún no pueden brindar la misma experiencia increíble en todos los dispositivos. Además, constantemente surgen nuevos desafíos, como descubrir cómo diseñar para nuevos dispositivos, como auriculares de realidad aumentada y relojes inteligentes.

Sin embargo, es justo decir que hemos recorrido un largo camino desde los inicios del diseño web.

Imagen destacada a través de Pexels.

Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleepy
Sleepy
0
Angry
Angry
0
Surprise
Surprise
0
Previous post Por qué el marketing del ciclo de vida es importante para el equipo de su comunidad
Next post 8 ejemplos de aprendizaje de marca para inspirar a los profesionales del marketing digital

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta