Saltar la navegación

Diseños de sitios web históricos

En un momento de la historia, solo tenías dos opciones al diseñar un sitio web:

  • Podías crear un sitio _líquido_, que se expandiría para llenar toda la ventana del navegador
  • o un sitio de _ancho fijo_, que sería un tamaño fijo en píxeles.

Estos dos enfoques tendían a dar como resultado un sitio web que se veía mejor ¡en la pantalla de la persona que diseñaba el sitio! El sitio líquido dio como resultado un diseño encogido en las pantallas que eran más pequeñas (como se ve a continuación) o longitudes de línea interminables en las pantallas que eran más grandes.

Nota:

Observa este ejemplo y su código fuente de un diseño líquido sencillo. Amplía o reduce la ventana del navegador y observa cómo cambia su aspecto en diferentes tamaños.

Nota:

Las capturas de pantalla anteriores se han tomado usando el modo de diseño responsivo de las herramientas DevTools de Firefox.

A medida que la web móvil comenzó a hacerse realidad con los primeros teléfonos con funciones, las empresas que deseaban adoptar los dispositivos móviles solían crear una versión especial de su sitio web para dispositivo móvil, con una URL diferente (a menudo algo así como m.example.com o _example.mobi_). Esto significaba que había que desarrollar y actualizar dos versiones independientes del sitio web.

Además, estos sitios web para dispositivos móviles a menudo ofrecían una experiencia muy reducida. A medida que los dispositivos móviles se volvían más potentes y capaces de mostrar sitios web completos, esto resultaba frustrante para los usuarios de dispositivos móviles, que se veían atrapados en la versión móvil del sitio web y no podían acceder a la información que sabían que había en la versión de escritorio, que incluía todas las funciones del sitio web.