Desde el comienzo, la World Wide Web se diseñó para ser agnóstico. No importa qué hardware tengas. No importa qué sistema operativo ejecute tu dispositivo. Siempre que puedas conectarte a Internet, podrás acceder a la World Wide Web.
En los comienzos de la Web, la mayoría de las personas usaban computadoras de escritorio. En la actualidad, la Web está disponible en computadoras de escritorio, laptops, tablets, teléfonos plegables, refrigeradores y automóviles. Con razón, las personas esperan que los sitios web se vean bien independientemente del dispositivo que estén utilizando. El diseño adaptable lo hace posible.
El diseño adaptable no es el primer enfoque para diseñar sitios web. En los años anteriores al diseño adaptable, los diseñadores y desarrolladores web probaron muchas técnicas diferentes.
Diseño de ancho fijo
A principios de la década de 1990, cuando la Web se volvió popular, la mayoría de los monitores tenían dimensiones de pantalla de 640 píxeles de ancho por 480 píxeles de alto. Eran tubos de rayos cátodo convexos, no como las pantallas planas de cristal líquido
En los días formativos de los comienzos del diseño web, diseñar páginas web con un ancho de 640 píxeles era una opción segura. Sin embargo, mientras otras tecnologías, como los teléfonos y las cámaras, se estaban minimizando, las pantallas se hicieron más grandes (y, finalmente, se hicieron más planas). En poco tiempo, la mayoría de las pantallas tenían dimensiones de 800 por 600 píxeles. Los diseños web cambiaron en consecuencia. Los diseñadores y desarrolladores comenzaron a asumir que 800 píxeles era un valor predeterminado seguro.
Luego, las pantallas se hicieron más grandes otra vez. 1,024 por 768 se convirtió en la configuración predeterminada. Se sintió como una carrera armamentista entre diseñadores web y fabricantes de hardware.
Ya sea de 640, 800 o 1, 024 píxeles, elegir un ancho específico para diseñar se denominaba diseño de ancho fijo.
Si especificas un ancho fijo para tu diseño, este solo se verá bien en ese ancho específico. Si un visitante de tu sitio tiene una pantalla más ancha que el ancho que elegiste, se desperdiciará espacio en la pantalla. Puedes centrar el contenido de tus páginas para distribuir ese espacio de manera más uniforme (en lugar de tener un espacio vacío en un lado), pero no aprovecharás al máximo el espacio disponible.
Del mismo modo, si un visitante llega con una pantalla más estrecha que el ancho que elegiste, el contenido no caberá horizontalmente. El navegador genera una barra de rastreo (el equivalente horizontal de una barra de desplazamiento) y el usuario tiene que mover toda la página hacia la izquierda y hacia la derecha para ver todo el contenido.
Diseños líquidos
Si bien la mayoría de los diseñadores usaron diseños de ancho fijo, algunos eligieron hacer que sus diseños sean flexibles. En lugar de usar anchos fijos para tus diseños, podrías crear un diseño flexible con porcentajes para los anchos de tus columnas. Estos diseños funcionan en más situaciones que un diseño de ancho fijo que solo se ve bien en un tamaño específico.
Estos se llamaban diseños líquidos. Pero si bien un diseño líquido se verá bien en una amplia gama de anchos, comenzará a empeorar en los extremos. En una pantalla panorámica, el diseño se ve estirado. En una pantalla estrecha, el diseño se ve aplastado. No ambas situaciones son ideales.
Puedes mitigar estos problemas usando min-width y max-width para tu diseño.
Sin embargo, en cualquier tamaño por debajo del ancho mínimo o superior al ancho máximo, tendrás los mismos problemas que tendrías con un diseño de ancho fijo.
En una pantalla panorámica, se desperdiciaría espacio sin usar.
En una pantalla estrecha, el usuario tendría que mover toda la página hacia la izquierda y hacia la derecha para ver todo.
La palabra liquid es solo uno de los términos usados para describir este tipo de diseño. Este tipo de diseños también se denominaban diseños fluidos o diseños flexibles. La terminología era tan fluida como la técnica.
Pantallas pequeñas
En el siglo XXI, la Web siguió creciendo. También lo hicieron los monitores. Pero llegaron nuevas pantallas que eran más pequeñas que cualquier dispositivo de escritorio. Con la llegada de los teléfonos celulares con navegadores web con todas las funciones, los diseñadores se enfrentaron a un dilema. ¿Cómo podría asegurarse de que sus diseños se verían bien en una computadora de escritorio y un teléfono móvil? Necesitaban una forma de ajustar el estilo de su contenido para pantallas de hasta 240 píxeles de ancho y de hasta miles de píxeles de ancho.
Sitios separados
Una opción es crear un subdominio independiente para los visitantes que utilizan dispositivos móviles. Pero luego debes mantener dos bases de código y diseños separados. Para redireccionar a los visitantes en dispositivos móviles, tendrás que realizar un sniffing de usuarios-agentes, que puede ser poco confiable y fácil de falsificar. Por motivos de privacidad, Chrome dará de baja su string usuario-agente. Además, no existe una línea clara entre los dispositivos móviles y los que no. ¿A qué sitio envías las tabletas?
Diseños adaptables
En lugar de tener sitios separados en diferentes subdominios, podrías tener un solo sitio con dos o tres diseños de ancho fijo.
Cuando las consultas de medios llegaron por primera vez a CSS, abrieron la puerta para que los diseños fueran más flexibles. Sin embargo, muchos desarrolladores se sentían más cómodos creando diseños de ancho fijo. Una técnica implicaba alternar entre varios diseños de ancho fijo en anchos específicos. Algunas personas lo llaman diseño adaptable.
El diseño adaptable permitió a los diseñadores proporcionar diseños que se veían bien en varios tamaños diferentes, pero que el diseño nunca se veía bien cuando se veía entre esos tamaños. El problema del exceso de espacio persistió, aunque no era tan malo como en un diseño de ancho fijo.
Con las consultas de medios CSS, puedes ofrecer a los usuarios el diseño que se aproxime más al ancho de su navegador. Pero, dada la variedad de tamaños de dispositivos, es probable que el diseño no se vea perfecto para la mayoría de las personas.
Diseño web responsivo
Si los diseños adaptables son una combinación de consultas de medios y diseños de ancho fijo, el diseño web adaptable es una combinación de consultas de medios y diseños líquidos.
Ethan Marcotte acuñó el término en un artículo en A List Apart en 2010.
Ethan definió tres criterios para el diseño adaptable:
- Cuadrículas fluidas
- Contenido multimedia fluido
- Consultas de medios
El diseño y las imágenes de un sitio responsivo se verían bien en cualquier dispositivo. Pero había un problema.
Un elemento meta para viewport
Los navegadores de los teléfonos móviles tenían que lidiar con sitios web que se diseñaban con diseños de ancho fijo para pantallas más anchas. De forma predeterminada, los navegadores para dispositivos móviles asumían que 980 píxeles era el ancho para el que las personas diseñaban (y no eran erróneos). Por lo tanto, incluso si usaras un diseño líquido, el navegador aplicaría un ancho de 980 píxeles y, luego, reducirá la escala de la página web renderizada al ancho real de la pantalla.
Si usas un diseño adaptable, debes indicarle al navegador que no realice ese escalamiento.
Puedes hacerlo con un elemento meta en el head de la página web:
<meta name="viewport" content="width=device-width, initial-scale=1">
Hay dos valores separados por comas.
El primero es width=device-width.
Esto le indica al navegador que suponga que el ancho del sitio web es el mismo que el ancho del dispositivo (en lugar de asumir que el ancho del sitio web es de 980 píxeles).
El segundo valor es initial-scale=1.
Esto le indica al navegador cuánto o qué poco debe realizar el escalamiento.
Con un diseño responsivo, no querrás que el navegador realice ningún escalamiento.
Una vez implementado el elemento meta, tus páginas web estarán listas para ser responsivas.
Diseño responsivo moderno
Hoy en día, podemos crear sitios web que sean responsivos en formas mucho más allá de los tamaños de los viewports.
Las funciones multimedia ofrecen a los desarrolladores acceso a las preferencias de los usuarios y permiten experiencias personalizadas.
Las consultas a contenedores permiten que los componentes posean su propia información responsiva.
El elemento picture permite a los diseñadores tomar decisiones sobre la dirección del arte en función de las relaciones de pantalla.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre diseño web adaptable
En 2021, ¿es una opción segura diseñar páginas web con un ancho fijo?
¿En qué tipos de tamaños de pantalla suelen tener dificultades los diseños líquidos?
¿Los tres criterios originales para el diseño adaptable son los?
El diseño adaptable es un mundo de posibilidades emocionante y creciente. En el resto de este curso, aprenderás sobre estas tecnologías y cómo usarlas para crear sitios web atractivos y responsivos para todo el mundo.