Desde el principio, la World Wide Web fue diseñada para ser agnóstica. No importa qué hardware tengas. No importa qué sistema operativo ejecute tu dispositivo. Siempre que puedas conectarte a Internet, tendrás acceso a la World Wide Web.
En los inicios de la Web, la mayoría de las personas usaban computadoras de escritorio. Actualmente, la Web está disponible para computadoras de escritorio, laptops, tablets, teléfonos plegables, refrigeradores y autos. Las personas esperan con razón que los sitios web se verán bien, independientemente del dispositivo que estén utilizando. El diseño adaptable hace esto 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 los 90, cuando la Web se volvía 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 catódicos convexos, como las pantallas de cristal líquido plano que tenemos ahora.
En los días formativos del diseño web inicial, era una apuesta segura diseñar páginas web con un ancho de 640 píxeles. Pero mientras otras tecnologías, como los teléfonos y las cámaras, estaban minimizando las pantallas eran cada vez más grandes (y, con el tiempo, 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 empezaron a asumir que 800 píxeles era un valor predeterminado seguro.
Luego, las pantallas se volvieron más grandes. 1,024 por 768 se convirtió en el valor predeterminado. Era como una carrera armamentista entre los diseñadores web y los fabricantes de hardware.
Ya sea 640, 800 o 1024 píxeles, elegir un ancho específico para diseñar se llama diseño de ancho fijo.
Si especificas un ancho fijo para tu diseño, entonces tu diseño 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, habrá un desperdicio de espacio en la pantalla. Puedes centrar el contenido de las páginas para distribuir ese espacio de manera más uniforme (en lugar de tener un espacio vacío en un lado), pero no estarías aprovechando al máximo el espacio disponible.
Del mismo modo, si un visitante llega con una pantalla más angosta que el ancho que elegiste, entonces el contenido no encajará horizontalmente. El navegador genera una barra de rastreo (el equivalente horizontal de una barra de desplazamiento), y el usuario debe mover toda la página hacia la izquierda y la derecha para ver todo el contenido.
Diseños líquidos
Si bien la mayoría de los diseñadores utilizaron diseños de ancho fijo, algunos eligieron que sus diseños fueran flexibles. En lugar de usar anchos fijos para tus diseños, podrías crear un diseño flexible con porcentajes para los anchos de columna. 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. Sin embargo, aunque un diseño líquido se verá bien en un amplio rango 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. Ninguna de estas situaciones es ideal.
Puedes mitigar estos problemas usando min-width y max-width para tu diseño.
Pero, en cualquier tamaño por debajo del ancho mínimo o por encima del ancho máximo, tienes 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 líquido es solo uno de los términos usados para describir este tipo de diseño. Este tipo de diseños también se llamaron 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. Los monitores también. 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 completos, 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 personalizar su contenido para pantallas de hasta 240 píxeles de ancho y tan grandes como miles de píxeles de ancho.
Sitios separados
Una opción es crear un subdominio independiente para los visitantes que usen dispositivos móviles. Pero luego debes mantener dos bases de código y diseños separados. Y para redireccionar a los visitantes en dispositivos móviles, tendrías que hacer lo siguiente: Sniffing de usuarios-agentes, que pueden ser poco confiables y fácilmente falsificados. 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 no móviles. ¿A qué sitio envía tablets?
Diseños adaptables
En lugar de tener sitios separados en subdominios diferentes, 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, se abrieron las puertas a la creación de diseños más flexibles. Sin embargo, muchos desarrolladores seguían dispuestos a crear diseños de ancho fijo. Una técnica implicó cambiar entre un conjunto de diseños de ancho fijo con anchos específicos. Algunas personas lo llaman diseño adaptable.
El diseño adaptable permitió a los diseñadores proporcionar diseños que se vieran bien en varios tamaños diferentes, pero 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.
Mediante las consultas de medios CSS, puedes brindarles a las personas el diseño más cercano al ancho de su navegador. Sin embargo, 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 mashup de consultas de medios y diseños de ancho fijo, el diseño web responsivo es una mashup de consultas de medios y diseños líquidos.
El término fue acuñado por Ethan Marcotte en un artículo en A List Apart en 2010.
Ethan definió tres criterios para el diseño adaptable:
- Cuadrículas fluidas
- Medios fluidos
- Consultas de medios
El diseño y las imágenes de un sitio responsivo se verían bien en cualquier dispositivo. Pero hubo un problema.
Un elemento meta para viewport
Los navegadores de los teléfonos celulares tenían que lidiar con sitios web diseñados con diseños de ancho fijo para pantallas más anchas. De forma predeterminada, los navegadores para dispositivos móviles suponían que 980 píxeles era el ancho para el que las personas diseñaban (y no se equivocaban). Así que incluso si usaste un diseño líquido, el navegador aplicaría un ancho de 980 píxeles y reduciría el tamaño 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">
Existen 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 del dispositivo.
(en lugar de suponer que el ancho del sitio web es de 980 píxeles).
El segundo valor es initial-scale=1.
Esto indica al navegador cuál es el escalamiento que debe realizar.
Con un diseño adaptable, no querrás que el navegador realice ningún escalamiento.
Con el elemento meta implementado, tus páginas web están listas para ser responsivas.
Diseño adaptable y moderno
En la actualidad, tenemos la capacidad de crear sitios web con una capacidad de respuesta más amplia que los tamaños de viewport.
Las funciones multimedia brindan a los desarrolladores acceso a las preferencias de los usuarios y habilitan experiencias personalizadas.
Las consultas de contenedores permiten que los componentes posean su propia información responsiva.
El elemento picture permite a los diseñadores tomar decisiones de dirección artística según las proporciones de pantalla.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre el diseño web adaptable
En 2021, ¿es una apuesta segura diseñar páginas web con un ancho fijo?
¿En qué tipo de tamaños de pantalla generalmente hay problemas para los diseños líquidos?
¿Cuáles son los tres criterios originales del diseño adaptable?
El diseño adaptable es un mundo de posibilidades emocionante y creciente. En el resto del curso, aprenderás sobre estas tecnologías y cómo usarlas para crear los sitios web adaptables.