Introducción

Desde el principio, la World Wide Web se diseñó para ser independiente del hardware y el sistema operativo que elijas. Siempre que puedas conectarte a Internet, podrás acceder a la World Wide Web.

En los primeros días de la Web, la mayoría de las personas usaban computadoras de escritorio. Hoy en día, la Web está disponible en computadoras de escritorio, laptops, tablets, teléfonos plegables, refrigeradores y automóviles. Las personas esperan con razón que los sitios web se vean bien, sin importar qué dispositivo utilicen. El diseño responsivo 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 responsivo, los diseñadores y desarrolladores web probaron muchas técnicas diferentes.

Primeras opciones de diseño

Los desarrolladores crearon sitios web con ancho fijo o diseños fluidos.

Diseño de ancho fijo

A principios de la década de 1990, 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. Estos eran tubos de rayos catódicos convexos, a diferencia de las pantallas de cristal líquido planas que tenemos ahora.

El sitio web de Microsoft con dos columnas de texto sencillas y una barra de navegación.
El sitio web de Microsoft a fines de los 90 se diseñó para un ancho de 640 píxeles. Captura de pantalla de archive.org

En los primeros días del diseño web, 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, se miniaturizaban, las pantallas se hacían 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 según corresponda. Los diseñadores y desarrolladores comenzaron a suponer que 800 píxeles era un valor predeterminado seguro.

El sitio web de Microsoft utilizaba un diseño de tres columnas, mayormente basado en texto.
El sitio web de Microsoft a principios de la década de 2000 se diseñó para un ancho de 800 píxeles. Captura de pantalla de archive.org

Luego, las pantallas volvieron a crecer. 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.

​​

El sitio web de Microsoft con un diseño más complejo que usa imágenes y texto.
El sitio web de Microsoft a mediados de la década de 2000 se diseñó para un ancho de 1,024 píxeles. Captura de pantalla de archive.org

Ya sea 640, 800 o 1024 píxeles, elegir un ancho específico para diseñar se llamaba 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 espacio vacío en un lado), pero aún no aprovecharías por completo el espacio disponible.

Un diseño estrecho con mucho espacio en blanco a su alrededor.
El sitio web de Yahoo de principios de la década de 2000 tal como se experimenta en un navegador más ancho que el diseño de 800 píxeles de ancho del sitio. Captura de pantalla de archive.org

Del mismo modo, si un visitante llega con una pantalla más angosta que el ancho que elegiste, tu contenido no se ajustará de manera horizontal. El navegador genera una barra de desplazamiento, el equivalente horizontal de una barra de desplazamiento, y el usuario tiene que mover toda la página hacia la izquierda y la derecha para ver todo el contenido.

Un sitio web que aparece cortado a la derecha porque es demasiado ancho para el viewport.
El sitio web de Yahoo de principios de la década de 2000 con un navegador más estrecho que el diseño de 800 píxeles de ancho del sitio. Captura de pantalla de archive.org

Diseños fluidos

Si bien la mayoría de los diseñadores usaron diseños de ancho fijo, algunos optaron por hacer que sus diseños fueran flexibles. En lugar de usar anchos fijos para tus diseños, puedes crear un diseño flexible con porcentajes para los anchos de las 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. Sin embargo, si bien un diseño líquido puede verse bien en un amplio rango de anchos, empeora en los extremos. En una pantalla ancha, el diseño se ve estirado. En una pantalla estrecha, el diseño se ve aplastado. Ninguna de las dos situaciones es ideal.

Es un diseño que se acopla en una ventana estrecha.
Diseño fluido de Wikipedia de mediados de la década de 2000 tal como se experimenta en una ventana de navegador estrecha. Captura de pantalla de archive.org
​​
Un diseño estirado horizontalmente con longitudes de línea muy largas.
Diseño fluido de Wikipedia de mediados de la década de 2000 tal como se experimenta en una ventana de navegador ancha. Captura de pantalla de archive.org

Puedes mitigar estos problemas usando min-width y max-width para tu diseño. Sin embargo, con cualquier tamaño inferior al 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 ancha, 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.

Abre el ejemplo de diseño líquido en una ventana del navegador nueva para ver cómo cambia el tamaño de la ventana y se estira el diseño.

La palabra liquid es solo uno de los términos que se usan para describir este tipo de diseño. Estos tipos de diseños también se denominaban diseños fluidos o flexibles. La terminología era tan fluida como la técnica.

Cómo compilar para diferentes tamaños de pantalla

En el siglo XXI, la Web siguió creciendo cada vez más. Lo mismo sucedió con 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 aplicar diseño a su contenido para pantallas de hasta 240 píxeles de ancho y de miles de píxeles de ancho.

Sitios independientes

Una opción es crear un subdominio independiente para los visitantes que usan dispositivos móviles. Pero luego debes mantener dos bases de código y diseños separados. Además, para redireccionar a los visitantes en dispositivos móviles, deberás realizar un análisis de usuario-agente, que puede ser poco confiable y falsificado. Chrome redujo la cadena de usuario-agente para evitar este tipo de creación pasiva de huellas digitales. Además, no hay una línea clara entre lo que es y no es para dispositivos móviles. ¿A qué sitio envías los dispositivos de tablet?

Diseños adaptables

En lugar de tener sitios separados en diferentes subdominios, puedes 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 consistía en alternar entre algunos diseños de ancho fijo en anchos especificados. Algunas personas lo llaman diseño adaptable.

El diseño adaptable permitió a los diseñadores proporcionar diseños que se vieran bien en algunos 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.

Con las consultas de medios de CSS, puedes ofrecer a los usuarios el diseño más cercano al ancho de su navegador. Sin embargo, debido a la variedad de tamaños de dispositivos, es probable que el diseño no se vea perfecto para la mayoría de las personas.

Abre el ejemplo de diseño adaptable en una nueva ventana del navegador para ver cómo el cambio de tamaño de la ventana hace que el diseño salte entre diseños.

Diseño web responsivo

Si los diseños adaptables son un mashup de consultas de medios y diseños de ancho fijo, el diseño web responsivo es un mashup de consultas de medios y diseños fluidos.

Abre el ejemplo de diseño responsivo en una ventana del navegador nueva para ver cómo el cambio de tamaño de la ventana hace que el diseño cambie de forma fluida.

El término fue acuñado por Ethan Marcotte en un artículo de A List Apart en 2010.

Ethan definió tres criterios para el diseño responsivo:

  1. Cuadrículas fluidas
  2. Contenido multimedia fluido
  3. Consultas de medios

El diseño y las imágenes de un sitio responsivo se verán bien en cualquier dispositivo. Pero había un problema.

Un elemento meta para viewport

Los navegadores de 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). Por lo tanto, incluso si usaras un diseño líquido, el navegador aplicaría un ancho de 980 píxeles y, luego, reduciría 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 asuma 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é tan poco escalar. Con un diseño responsivo, no quieres que el navegador realice ningún tipo de escalamiento.

Imágenes de dos teléfonos celulares que contienen texto, y uno aparece alejado porque no tiene la metaetiqueta ubicada.
En el teléfono de la izquierda, se muestra cómo se ve el diseño antes de que se incluya la metaetiqueta en comparación con el diseño de la derecha.

Con ese elemento meta en su lugar, tus páginas web están listas para ser responsivas.

Diseño responsivo moderno

Ahora, podemos crear sitios web receptivos en maneras más allá de 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 contenedor permiten que los componentes tengan su propia información responsiva. El elemento picture permite a los diseñadores tomar decisiones de dirección de arte en función de las relaciones de pantalla.

Verifica tu comprensión

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?

falso
verdadero

¿En qué tipos de tamaños de pantalla suelen tener problemas los diseños líquidos?

Pantallas cortas
Pantallas altas
Todas las pantallas
Pantallas promedio
Pantallas panorámicas
Pantallas estrechas

¿Cuáles son los tres criterios originales del diseño responsivo?

Cuadrículas fluidas
Contenido multimedia fluido
Diseño de ancho fijo
Cuadrículas adaptables
Tipografía fluida
Consultas de medios

El diseño responsivo es un mundo emocionante y en crecimiento de posibilidades. En el resto de este curso, aprenderás sobre estas tecnologías y cómo usarlas para crear sitios web responsivos y hermosos para todos.