¿Qué es el diseño web adaptable?
El propósito del diseño receptivo es tener un sitio, pero con diferentes elementos que respondan de manera diferente cuando se ve en dispositivos de diferentes tamaños.
Tomemos un sitio web tradicional «fijo». Cuando se ve en una computadora de escritorio, por ejemplo, el sitio web puede mostrar tres columnas. Pero cuando ve el mismo diseño en una tableta más pequeña, puede obligarlo a desplazarse horizontalmente, algo que a los usuarios no les gusta. O los elementos pueden estar ocultos a la vista o verse distorsionados. El impacto también es complicado por el hecho de que muchas tabletas se pueden ver en orientación vertical o giradas de lado para una vista horizontal.
En una pequeña pantalla de teléfono inteligente, los sitios web pueden ser aún más difíciles de ver. Las imágenes grandes pueden «romper» el diseño. Los sitios pueden tardar en cargarse en los teléfonos inteligentes si tienen muchos gráficos.
Sin embargo, si un sitio utiliza un diseño receptivo, la versión de la tableta podría ajustarse automáticamente para mostrar solo dos columnas. De esa manera, el contenido es legible y fácil de navegar. En un teléfono inteligente, el contenido puede aparecer como una sola columna, quizás apilada verticalmente. O posiblemente el usuario podría deslizarse para ver otras columnas. Las imágenes cambiarán de tamaño en lugar de distorsionar el diseño o cortarse.
El punto es: con un diseño receptivo, el sitio web se ajusta automáticamente en función del dispositivo en el que el espectador lo ve.
¿Cómo funciona el diseño web adaptable?
Los sitios receptivos usan rejillas fluidas. Todos los elementos de la página están dimensionados por proporción, en lugar de píxeles. Entonces, si tiene tres columnas, no diría exactamente qué tan anchas deberían ser cada una, sino qué tan anchas deberían ser en relación con las otras columnas. La columna 1 debería ocupar la mitad de la página, la columna 2 debería ocupar el 30% y la columna 3 debería ocupar el 20%, por ejemplo.
Los medios como las imágenes también cambian de tamaño relativamente. De esa manera, una imagen puede permanecer dentro de su columna o elemento de diseño relativo.