Los sitios web no siempre fueron tan receptivos como lo son hoy. Para los diseñadores modernos, «la capacidad de respuesta es uno de los factores definitorios más importantes de un buen diseño. Después de todo, ahora tratamos con muchos usuarios que cambian con frecuencia entre dispositivos móviles y de escritorio con diferentes tamaños de pantalla.
Sin embargo, el cambio al diseño receptivo no sucedió de la noche a la mañana. Durante años, hemos modificado el concepto de «diseño web receptivo’ para eventualmente llegar a donde estamos hoy.
Hoy vamos a echar un vistazo más de cerca a la historia del diseño web receptivo.
¿Dónde comenzó el diseño web?
Cuando se crearon originalmente los primeros sitios web, a nadie le preocupaba la capacidad de respuesta en una variedad de pantallas. Todos los sitios fueron diseñados para ajustarse a las mismas plantillas y los desarrolladores no dedicaron mucho tiempo a conceptos como diseño, diseño y tipografía.
Incluso cuando la adopción más amplia de CSS comenzó la tecnología, la mayoría de los desarrolladores no tenían que preocuparse por adaptar el contenido a diferentes tamaños de pantalla. Sin embargo, todavía encontraron algunas formas de trabajar con diferentes tamaños de monitor y navegador.
Aspectos líquidos
El las dos principales opciones de diseño disponibles para los desarrolladores en los primeros días eran el ancho fijo o el diseño líquido.
Con diseños de ancho fijo, era más probable que el diseño se rompiera si el monitor no tenía exactamente la misma resolución con la que se diseñó el sitio. Puedes ver un ejemplo aquí.
Alternativa, diseños líquidosinventados por Glenn Davis, fueron considerados uno de los primeros ejemplos revolucionarios de diseño web receptivo.
Los diseños líquidos pueden adaptarse a diferentes resoluciones de monitor y tamaños de navegador. Sin embargo, el contenido podría desbordarse y el texto se rompería con frecuencia en pantallas más pequeñas.
Aspectos dependientes de la resolución
En el 2004, una publicación de blog de Cameron Adams introdujo un nuevo método de uso de JavaScript para cambiar 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 por parte de los desarrolladores, los aspectos dependientes de la resolución permitieron un control más preciso sobre el diseño del sitio.
El aspecto dependiente de la resolución básicamente funcionó como una versión anterior del CSS puntos de interrupción, antes de que sea una cosa. La desventaja fue que los desarrolladores tuvieron que crear diferentes hojas de estilo para cada resolución de destino y asegurarse de que JavaScript funcionara en todos los navegadores.
Con tantos navegadores para considerar en ese momento, jQuery se hizo cada vez más popular como una forma de abstraer las diferencias entre las opciones del navegador.
El auge de los subdominios móviles
La introducción de conceptos como los diseños dependientes de la resolución se produjo al mismo tiempo que muchos dispositivos móviles eran cada vez más compatibles con Internet. 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 tienen como objetivo brindar a los usuarios exactamente las mismas funciones que obtendrían de un sitio de escritorio en un teléfono inteligente, eran aplicaciones completamente separadas.
Tener un subdominio móvil, aunque complejo, tenía algunos beneficios, como permitir a los desarrolladores apuntar específicamente SEO en dispositivos móviles y atraer más tráfico a las variantes de sitios móviles. Sin embargo, al mismo tiempo, los desarrolladores tuvieron que administrar dos variantes del mismo sitio web.
Cuando Apple acababa de presentar el primer iPad, innumerables diseñadores web todavía confiaban en esta estrategia anticuada y engorrosa para permitir el acceso a un sitio web en todos los dispositivos. Al final de los años 2000s, los desarrolladores a menudo se basaron 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 ancho máximo: 100% truco para imágenes flexibles.
Afortunadamente, todo empezó a cambiar cuando Ethan Marcotte acuñar el termino «Diseño web receptivo» en una lista aparte. 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 sitios web todo en uno capaces de funcionar igual de bien en cualquier dispositivo.
Una nueva era de diseño web receptivo
El artículo de Marcotte presentó tres componentes cruciales que los desarrolladores deben considerar al crear un sitio web receptivo: cuadrículas fluidas, consultas de medios e imágenes flexibles.
Rejillas fluidas
El concepto de rejillas fluidas insertadas la idea de que los sitios web deberían poder adoptar una variedad de columnas flexibles que crecen o se reducen según el tamaño de pantalla actual.
En los dispositivos móviles, esto significaba introducir una o dos columnas flexibles de contenido, mientras que los dispositivos de escritorio generalmente podían mostrar varias columnas (debido al espacio más grande).
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 fluida en la que se encuentran. Como se mencionó anteriormente, los desarrolladores usaron algo llamado «max-width” para habilitar esto.
Si mantuvo una imagen en un contenedor, podría desbordarse fácilmente, especialmente si el contenedor respondía. Sin embargo, si establece «ancho máximo” a 100%, la imagen solo cambia de tamaño con el contenedor principal.
Preguntas de los medios
La idea de «consultas de los medios” se refiere a CSS consultas de los medios, ingresadas en 2010 pero no fue ampliamente adoptado hasta que fue lanzado oficialmente como un w3 recomendación 2 años después. Las consultas de medios son esencialmente CSS reglas activadas en función de opciones como el tipo de medio (impresión, pantalla, etc.) y las características del medio (alto, ancho, etc.).
Aunque más simples en ese momento, estas consultas permitieron a los desarrolladores implementar lo que era esencialmente un tipo simple de punto de interrupción: el tipo de herramientas que se usan en el diseño receptivo en la actualidad. Los puntos de interrupción se refieren a cuando los sitios web cambian su apariencia o estilo según la ventana del navegador o el ancho del dispositivo.
En la mayoría de los casos, se deben usar metaetiquetas de ventana gráfica para garantizar que las consultas de medios funcionen como esperan los desarrolladores de hoy.
El auge del diseño móvil primero
Desde la introducción de Marcotte a Diseño web adaptable, los desarrolladores trabajaron en nuevas formas de implementar la idea de la manera más eficiente posible. La mayoría de los desarrolladores ahora se dividen en dos categorías en función de si consideran primero las necesidades del usuario de escritorio o las necesidades del usuario móvil primero. La tendencia se está acelerando cada vez más hacia lo segundo.
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 la mejor opción es la mejor opción. Los diseños móviles suelen ser mucho más simples y minimalistas, lo que encaja con muchas tendencias actuales de diseño web.
Tomar la ruta móvil primero significa primero evaluar las necesidades de su sitio web desde una perspectiva móvil. Escribiría sus estilos normalmente, usando puntos de interrupción una vez que comience a crear diseños de escritorio y tableta. Alternativamente, si ha adoptado el enfoque basado en escritorio, debe adaptarlo constantemente a dispositivos más pequeños con sus opciones de punto de interrupción.
Explorando el futuro del diseño web receptivo
El diseño web receptivo todavía no es perfecto. Hay innumerables sitios que aún no ofrecen la misma experiencia increíble en todos los dispositivos. Además, continúan surgiendo nuevos desafíos todo el tiempo, como descubrir cómo diseñar para nuevos dispositivos como Él auriculares y relojes inteligentes.
Sin embargo, es justo decir que hemos recorrido un largo camino desde los inicios del diseño web.
Foto principal a través de Pexels.
