El Responsive Web Design o Diseño Web Adaptativo consiste básicamente en diseñar y desarrollar una Web que sea capaz de adaptarse a cualquier dispositivo o pantalla para lo cual «responde» o se «adapta» en función del tipo de dispositivo que está viendo el sitio Web. Cuando hablamos de un dispositivo puede ser el monitor de un ordenador de sobremesa, un ordenador portátil, una Tablet de 10 pulgadas, una Tablet de 7 pulgadas o la pantalla de un Smartphone de 4 pulgadas.
El diseño Web Adaptativo se ha convertido en una de las tendencias más importantes del 2013 y de suma importancia para toda empresa o negocio que desee tener presencia en Internet, esto se debe al uso cada vez mas masificado de los teléfonos inteligentes o Smartphone, cada día más personas se conectan a Internet a través de ellos.
El fin del diseño web adaptativo es tener un sitio Web que responda de manera diferente cuando se ve en dispositivos de diferente tamaño logrando que el usuario se sienta cómodo y pueda permanecer más tiempo navegando en el. En el conocido Blog de Marketing HubSpot puedes ver un articulo muy interesante sobre este tema.
Pongamos que accedemos al sitio Web tradicional en nuestro ordenador de sobremesa, este sitio podría mostrar tres columnas pero al ver el mismo sitio Web en una Tablet de 7 pulgadas podría obligar al usuario a tener que desplazarse horizontalmente o algunos elementos podrían estar ocultos a la vista o se pueden ver distorsionados algo que a los usuarios les puede parecer molesto o incluso podrían abandonar el sitio Web. Esto además se complica con el hecho de que muchas Tablets o Smartphone se pueden ver tanto en orientación vertical o colocadas de manera lateral para la vista horizontal.
En la pantalla diminuta de un Smartphone los sitios Web pueden ser aun mas difíciles de ver, las imágenes grandes pueden “romper” técnicamente el diseño, los sitios pueden ser lentos para cargar en Smartphone si sus gráficos son muy pesados. Sin embargo si un sitio utiliza el diseño Web Adaptativo en una tableta se puede ajustar automáticamente para mostrar solo dos columnas, de este modo el contenido es legible y fácil de navegar. En un Smartphone, el contenido puede aparecer en una sola columna o posiblemente el usuario tendría la posibilidad de pasar el dedo por encima para ver otras columnas, las imágenes cambiaran de tamaño en lugar de distorsionarse o cortarse en algunos casos.
¿Cómo funciona el diseño web adaptativo?
En el diseño Web Adaptativo se utilizan redes de fluidos, todos los elementos de la página son clasificados por la proporción, en lugar de pixeles. Así que si el sitio tiene tres columnas, la columna 1 tomara la mitad de la página, la columna 2 hasta un 30 % y la columna 3 el 20 % por ejemplo. Las imágenes también cambian de tamaño relativamente de esta manera una imagen puede aparecer dentro de la columna.
